Skip to content

Small UI updates and fixes for nav redesign #3253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
KATIETOLER wants to merge 7 commits into from
Closed

Small UI updates and fixes for nav redesign #3253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b16e4b2
Fix hardcoded color value and settings icon.
KATIETOLER Mar 23, 2026
5682b23
Ensure sidenav doesn't change size when subtitle is href or not. smoo…
KATIETOLER Mar 25, 2026
8a2ee25
Fix timezone font size and weight to match.
KATIETOLER Mar 26, 2026
43e48e1
Add divider color and remove margin
KATIETOLER Mar 26, 2026
e6a636b
refactor(navigation-item): migrate to Svelte 5 runes
KATIETOLER Mar 31, 2026
5492e6f
refactor(side-nav): use navigation-utils type guards
KATIETOLER Mar 31, 2026
43fd80c
refactor(bottom-nav-links): use navigation-utils type guards
KATIETOLER Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/lib/components/bottom-nav-links.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<script lang="ts">
import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
import {
isNavDividerItem,
isNavLinkItem,
} from '$lib/holocene/navigation/navigation-utils';
import type { NavLinkListItem } from '$lib/types/global';

export let open = false;
Expand All @@ -10,10 +14,10 @@
<div
class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
>
{#each linkList as item}
{#if 'divider' in item && item.divider}
{#each linkList as item, i (i)}
{#if isNavDividerItem(item)}
<hr class="border-subtle" />
{:else if 'href' in item}
{:else if isNavLinkItem(item)}
Comment thread
KATIETOLER marked this conversation as resolved.
<NavigationItem
link={item.href}
label={item.label}
Expand Down
12 changes: 8 additions & 4 deletions src/lib/components/side-nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@

import Navigation from '$lib/holocene/navigation/navigation-container.svelte';
import NavigationItem from '$lib/holocene/navigation/navigation-item.svelte';
import {
isNavDividerItem,
isNavLinkItem,
} from '$lib/holocene/navigation/navigation-utils';
import { translate } from '$lib/i18n/translate';
import type { NavLinkListItem } from '$lib/types/global';

Expand All @@ -16,10 +20,10 @@
</script>

<Navigation {isCloud} {bottom} aria-label={translate('common.primary')}>
{#each linkList as item}
{#if 'divider' in item && item.divider}
<hr class="my-4 border-subtle group-data-[nav=closed]:hidden" />
{:else if 'href' in item && !item.hidden}
{#each linkList as item, i (i)}
{#if isNavDividerItem(item)}
<hr class="-mx-2 my-4 border-black/25" />
{:else if isNavLinkItem(item) && !item.hidden}
<NavigationItem
link={item.href}
label={item.label}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/timezone-select.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
});
</script>

<MenuContainer {open} class="max-md:w-full max-md:justify-items-end">
<MenuContainer {open} class="`max-md:justify-items-end max-md:w-full">
Copy link
Copy Markdown
Contributor Author

@KATIETOLER KATIETOLER Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this

<MenuButton
label={translate('common.timezone', { timezone })}
controls="timezones-menu"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/holocene/icon/svg/settings.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<Svg {...props}>
<path
d="M15.375 0L16.0594 3.13125C16.6172 3.38906 17.1516 3.69375 17.6438 4.05L20.7 3.075L24.075 8.92031L21.7031 11.0812C21.7313 11.3812 21.7453 11.6859 21.7453 11.9953C21.7453 12.3047 21.7313 12.6094 21.7031 12.9094L24.075 15.0703L20.7 20.9156L17.6438 19.9406C17.1469 20.2922 16.6172 20.6016 16.0594 20.8594L15.375 24H8.62501L7.94063 20.8688C7.38282 20.6109 6.84844 20.3062 6.35626 19.95L3.29532 20.925L-0.0796814 15.0797L2.29219 12.9188C2.26407 12.6188 2.25001 12.3141 2.25001 12.0047C2.25001 11.6953 2.26407 11.3906 2.29219 11.0906L-0.0796814 8.925L3.29532 3.07969L6.35157 4.05469C6.84844 3.70312 7.37813 3.39375 7.93594 3.13594L8.62501 0H15.375ZM18.3281 6.19687L17.2547 6.53906L16.3406 5.8875C15.9563 5.61562 15.5484 5.37656 15.1219 5.17969L14.1 4.71094L13.8609 3.61406L13.5656 2.25H10.4344L10.1344 3.61406L9.89532 4.71094L8.87344 5.17969C8.44219 5.37656 8.03438 5.61562 7.65469 5.8875L6.74063 6.53906L5.67188 6.19687L4.34063 5.775L2.77501 8.47969L3.80626 9.42188L4.63594 10.1766L4.53282 11.2922C4.50938 11.5266 4.50001 11.7609 4.50001 12C4.50001 12.2391 4.50938 12.4734 4.53282 12.7078L4.63594 13.8234L3.80626 14.5781L2.77501 15.5203L4.34063 18.2297L5.67188 17.8078L6.74532 17.4656L7.65938 18.1172C8.04376 18.3891 8.45157 18.6281 8.87813 18.825L9.90001 19.2938L10.1391 20.3906L10.4391 21.7547H13.5656L13.8656 20.3906L14.1047 19.2938L15.1266 18.825C15.5578 18.6281 15.9656 18.3891 16.3453 18.1172L17.2594 17.4656L18.3328 17.8078L19.6641 18.2297L21.2297 15.5203L19.3641 13.8234L19.4672 12.7078C19.4906 12.4734 19.5 12.2391 19.5 12C19.5 11.7609 19.4906 11.5266 19.4672 11.2922L19.3641 10.1766L21.2297 8.47969L19.6641 5.77031L18.3328 6.19219L18.3281 6.19687ZM14.25 12C14.25 11.4033 14.013 10.831 13.591 10.409C13.169 9.98705 12.5967 9.75 12 9.75C11.4033 9.75 10.831 9.98705 10.409 10.409C9.98706 10.831 9.75001 11.4033 9.75001 12C9.75001 12.5967 9.98706 13.169 10.409 13.591C10.831 14.0129 11.4033 14.25 12 14.25C12.5967 14.25 13.169 14.0129 13.591 13.591C14.013 13.169 14.25 12.5967 14.25 12ZM7.50001 12C7.50001 10.8065 7.97411 9.66193 8.81803 8.81802C9.66194 7.97411 10.8065 7.5 12 7.5C13.1935 7.5 14.3381 7.97411 15.182 8.81802C16.0259 9.66193 16.5 10.8065 16.5 12C16.5 13.1935 16.0259 14.3381 15.182 15.182C14.3381 16.0259 13.1935 16.5 12 16.5C10.8065 16.5 9.66194 16.0259 8.81803 15.182C7.97411 14.3381 7.50001 13.1935 7.50001 12Z"
d="M 16.1265,18.75 H 24 V 21 h -7.8735 v 3 H 8.62647 V 21 H 0 V 18.75 H 8.62647 V 16.5 h 7.50003 z m -5.25,3 h 3 v -3 h -3 z M 7.5,10.8852 H 24 v 2.25 H 7.5 V 15.75 H 0 V 8.25 H 7.5 Z M 2.25,13.5 h 3 v -3 h -3 z M 16.1265,2.537115 H 24 v 2.25 H 16.1265 V 7.5 H 8.62647 V 4.787115 H 0 v -2.25 H 8.62647 V 0 H 16.1265 Z M 10.8765,5.25 h 3 v -3 h -3 z"
fill="currentcolor"
/>
</Svg>
35 changes: 16 additions & 19 deletions src/lib/holocene/navigation/cloud-nav-bar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,32 +41,29 @@
/>
</a>
{#if subtitle}
{#if subtitleHref}
<a href={subtitleHref} class="contents">
<Icon
label="Project Namespaces"
name="arrow-left"
class="m-1.5 text-indigo-100 group-data-[nav=closed]:hidden"
/>
<h2
class={merge(
'mb-0 hidden whitespace-nowrap px-1 pr-2 font-sans font-medium not-italic text-indigo-100 underline group-data-[nav=open]:block',
subtitle === 'Cloud' ? 'text-2xl' : 'text-xs underline-offset-2',
)}
>
{subtitle}
</h2>
</a>
{:else}
<svelte:element
this={subtitleHref ? 'a' : 'div'}
href={subtitleHref ?? undefined}
class="contents"
>
<Icon
label="Project Namespaces"
name="arrow-left"
class={merge(
'm-1.5 text-indigo-100 group-data-[nav=closed]:hidden',
!subtitleHref && 'invisible',
)}
/>
<h2
class={merge(
'mb-0 hidden whitespace-nowrap pl-2 font-sans font-medium not-italic text-indigo-100 group-data-[nav=open]:block',
'mb-0 hidden whitespace-nowrap px-1 pr-2 font-sans font-medium not-italic text-indigo-100 group-data-[nav=open]:block',
subtitle === 'Cloud' ? 'text-2xl' : 'text-xs',
subtitleHref && 'underline underline-offset-2',
)}
>
{subtitle}
</h2>
{/if}
</svelte:element>
{/if}
</div>
<button
Expand Down
40 changes: 27 additions & 13 deletions src/lib/holocene/navigation/navigation-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,38 @@
import Icon from '$lib/holocene/icon/icon.svelte';
import { navOpen } from '$lib/stores/nav-open';

export let link: string;
export let label: string;
export let icon: IconName | undefined = undefined;
export let tooltip = label;
export let external = false;
export let animate = false;
export let disabled = false;
export let isActive: ((path: string) => boolean | undefined) | undefined =
undefined;
interface Props {
link: string;
label: string;
icon?: IconName;
tooltip?: string;
external?: boolean;
animate?: boolean;
disabled?: boolean;
isActive?: (path: string) => boolean | undefined;
[key: string]: unknown;
}

$: rel = external ? 'noopener noreferrer' : '';
$: target = external ? '_blank' : '';
$: active = isActive && isActive($page.url.href);
let {
link,
label,
icon,
tooltip = label,
external = false,
animate = false,
disabled = false,
isActive,
...restProps
}: Props = $props();

const rel = $derived(external ? 'noopener noreferrer' : '');
const target = $derived(external ? '_blank' : '');
const active = $derived(isActive && isActive($page.url.href));
</script>

<div
role="listitem"
data-testid={$$props?.['data-testid'] || `${icon}-button`}
data-testid={restProps?.['data-testid'] || `${icon}-button`}
class="relative"
>
<a
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(app)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@
'https://support.temporal.io'}
target="_blank"
rel="noopener noreferrer"
class="flex items-center text-indigo-100 hover:text-white"
class="flex items-center hover:text-white"
aria-label="Support"
>
<Icon name="support" />
Expand Down
Loading