fix(navigation): final minor fixes (#2081)

Author: giamir

.changeset/young-views-join.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": patch
+---
+
+Navigation: adjust margin top of navigation title

packages/stacks-classic/lib/components/navigation/navigation.less

@@ -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);
 
@@ -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 {

packages/stacks-svelte/src/components/Navigation/Navigation.stories.svelte

@@ -23,7 +23,7 @@
         IconHomeFill,
         IconJobs,
         IconJobsFill,
-        IconChevron16Up,
+        IconChevronUp,
         IconQuestion,
         IconQuestionFill,
         IconChallenge,
@@ -40,6 +40,7 @@
         IconHelpFill,
         IconStar,
         IconStarFill,
+        IconCompose,
     } from "@stackoverflow/stacks-icons/icons";
     const { Story } = defineMeta({
         title: "Components/Navigation",
@@ -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
             )}