Skip to content

fix(navigation): final minor fixes #2081

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

Merged
merged 8 commits into from
Dec 1, 2025
Merged

fix(navigation): final minor fixes #2081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bfae445
adjust default margin top of navigation title elements to 24
giamir Nov 28, 2025
bd75830
chevron icon on navigation title should be black 400
giamir Nov 28, 2025
1b2517c
adjust trailing story to fit design requirements
giamir Nov 28, 2025
1d022a9
add changeset
giamir Nov 28, 2025
5059366
button in the title section should be black-400
giamir Nov 28, 2025
c1c0dfb
Merge branch 'beta' into SPARK-105/navigation-final-fixes
giamir Dec 1, 2025
64724d0
background item on hover should be black-100
giamir Dec 1, 2025
524c1f8
add extra padding to s-navigation--title elements
giamir Dec 1, 2025
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
5 changes: 5 additions & 0 deletions .changeset/young-views-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@stackoverflow/stacks": patch
---

Navigation: adjust margin top of navigation title
10 changes: 7 additions & 3 deletions packages/stacks-classic/lib/components/navigation/navigation.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
--_na-item-fs: unset;
--_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
--_na-item-ws: nowrap;
--_na-item-bg-hover: var(--black-150);
--_na-item-bg-hover: var(--black-100);
--_na-item-fc-hover: var(--_na-item-fc);
--_na-item-selected-bg: none;
--_na-item-selected-fc: var(--black-600);
--_na-item-selected-bg-hover: var(--_na-item-bg-hover);
--_na-item-selected-h: var(--su-static2);
--_na-item-text-ta: center;
--_na-title-mt: var(--su16);
--_na-title-mt: var(--su24);
--_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
--_na-after-bg-color: var(--black-400);

Expand Down Expand Up @@ -149,10 +149,14 @@
--_na-title-mt: 0;
}

& .s-btn {
color: var(--black-400);
}

margin-top: var(--_na-title-mt);
font-size: var(--fs-fine);
color: var(--black-400);
padding: var(--su16) var(--su8);
padding: calc(var(--su16) + var(--su2)) var(--su8);
}

& &--icon {
Expand Down
60 changes: 41 additions & 19 deletions packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
IconHomeFill,
IconJobs,
IconJobsFill,
IconChevron16Up,
IconChevronUp,
IconQuestion,
IconQuestionFill,
IconChallenge,
Expand All @@ -40,6 +40,7 @@
IconHelpFill,
IconStar,
IconStarFill,
IconCompose,
} from "@stackoverflow/stacks-icons/icons";
const { Story } = defineMeta({
title: "Components/Navigation",
Expand Down Expand Up @@ -342,29 +343,50 @@
(item) => item.group === group
)}
{@const isCollapsed = tCollapsed[group]}
<NavigationTitle title={group} class="bc-black-200 bt ps-relative">
{@const selectedItem = groupItems.find(
(item) => tSelected === item.text
)}
<NavigationTitle
title={group}
class={`bc-black-200 bt ps-relative ${isCollapsed && !selectedItem ? "mbn24" : ""}`}
>
{#snippet trailing()}
<Button
class="ps-absolute r0"
size="xs"
weight="clear"
onclick={() => (tCollapsed[group] = !tCollapsed[group])}
aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${group} Section`}
>
<span
style:display="inline-block"
style:transform="rotate({isCollapsed ? 180 : 0}deg)"
style:transition="transform 0.2s ease"
<div class="ps-absolute r0 as-center d-flex ai-center">
{#if !isCollapsed && group === "Resources"}
<Button
class="p6"
weight="clear"
aria-label="Edit Section"
>
<Icon src={IconCompose} />
</Button>
{/if}
{#if isCollapsed && groupItems.some((i) => i.activity)}
<ActivityIndicator
label="There is one or more activity in this section"
/>
{/if}
<Button
class="p6"
weight="clear"
onclick={() =>
(tCollapsed[group] = !tCollapsed[group])}
aria-label={`${isCollapsed ? "Expand" : "Collapse"} ${group} Section`}
>
<Icon src={IconChevron16Up} />
</span>
</Button>
<span
style:display="inline-block"
style:transform="rotate({isCollapsed
? 180
: 0}deg)"
style:transition="transform 0.2s ease"
>
<Icon src={IconChevronUp} />
</span>
</Button>
</div>
{/snippet}
</NavigationTitle>

{@const selectedItem = groupItems.find(
(item) => tSelected === item.text
)}
{@const selectedIndex = groupItems.findIndex(
(item) => tSelected === item.text
)}
Expand Down