✨ Accept active state for menu items

Author: Frontendland

src/components/Menu/Menu.astro

@@ -54,7 +54,11 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                 <ul>
                     {items.map(item => (
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class:list={[item.active && styles.active]}
+                            >
                                 {item.name}
                             </a>
                         </li>

src/components/Menu/Menu.svelte

@@ -50,7 +50,11 @@
                 <ul>
                     {#each items as item}
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class={item.active ? styles.active : null}
+                            >
                                 {item.name}
                             </a>
                         </li>

src/components/Menu/Menu.tsx

@@ -62,7 +62,11 @@ const Menu = ({
                         <ul>
                             {items.map((item, index) => (
                                 <li key={index}>
-                                    <a href={item.url} target={item.target}>
+                                    <a
+                                        href={item.url}
+                                        target={item.target}
+                                        className={item.active ? styles.active : undefined}
+                                    >
                                         {item.name}
                                     </a>
                                 </li>

src/components/Menu/menu.module.scss

@@ -75,6 +75,10 @@
             &:hover {
                 @include typography(primary);
             }
+
+            &.active {
+                @include typography(primary);
+            }
         }
     }
 

src/components/Menu/menu.ts

@@ -3,6 +3,7 @@ export type MenuProps = {
         url: string
         name: string
         target?: string
+        active?: boolean
     }[]
     logo?: {
         url?: string

src/static/Layout.astro

@@ -10,15 +10,17 @@ const menuClasses = [
 ].filter(Boolean).join(' ')
 
 const theme = (Astro.cookies.get('w-theme')?.value || 'theme-dark') as string
+const isPath = (path: string) => Astro.url.pathname.includes(path)
 
 const menu = {
     logo: {
         html: logo
     },
     items: [
-        { url: '/resets', name: 'Resets' },
-        { url: '/svelte', name: 'Svelte' },
-        { url: '/react', name: 'React' }
+        { url: '/svelte', name: 'Svelte', active: isPath('svelte') },
+        { url: '/react', name: 'React', active: isPath('react') },
+        { url: '/resets', name: 'Resets', active: isPath('resets') },
+        { url: '/utilities', name: 'Utilities', active: isPath('utilities') }
     ]
 }
 
@@ -60,7 +62,7 @@ const externalLinks = [
                 ))}
             </div>
         </Menu>
-        <div class="container">
+        <div class="container my">
             <slot />
         </div>
     </body>
@@ -124,7 +126,11 @@ const externalLinks = [
         }
     }
 
-    .container {
-        margin-top: 20px;
+    .my {
+        @include spacing(auto-default);
+    }
+
+    .mb {
+        @include spacing(mb-default);
     }
 </style>