feat: icons in the navbar (#75)

* feat: icons in the navbar * fix: types
ZTL-UwU · Dec 24, 2024 · 5bd4ae5 · 5bd4ae5
1 parent 9d0e5e6
commit 5bd4ae5
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 19 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -39,11 +39,13 @@ export default defineAppConfig({
           title: 'Getting Started',
           to: '/getting-started',
           description: 'Start building your document with shadcn-docs-nuxt',
+          icon: 'lucide:book',
         }, {
           title: 'API',
           to: '/api',
           description: 'Discover the configurations and exposed APIs.',
           target: '_self',
+          icon: 'lucide:code',
         }],
       }, {
         title: 'Credits',

diff --git a/components/layout/Header/Nav.vue b/components/layout/Header/Nav.vue
@@ -12,13 +12,17 @@
                 <NuxtLink
                   :to="link.to"
                   :target="link.target"
-                  class="mb-1 block w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
+                  class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
                 >
-                  <div class="font-semibold">
-                    {{ link.title }}
-                  </div>
-                  <div class="text-sm text-muted-foreground">
-                    {{ link.description }}
+                  <SmartIcon v-if="link?.icon" :name="link.icon" :size="16" class="mt-1 min-w-5" />
+
+                  <div>
+                    <div class="font-semibold">
+                      {{ link.title }}
+                    </div>
+                    <div class="text-sm text-muted-foreground">
+                      {{ link.description }}
+                    </div>
                   </div>
                 </NuxtLink>
               </li>

diff --git a/components/layout/Header/NavMobileItem.vue b/components/layout/Header/NavMobileItem.vue
@@ -17,13 +17,17 @@
             <NuxtLink
               :to="link.to"
               :target="link.to"
-              class="mb-1 block w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
+              class="mb-1 flex w-full gap-2 rounded-md px-3 py-2 transition-all hover:bg-muted"
             >
-              <div class="font-semibold">
-                {{ link.title }}
-              </div>
-              <div class="text-sm text-muted-foreground">
-                {{ link.description }}
+              <SmartIcon v-if="link.icon" :name="link.icon" :size="16" class="mt-1 min-w-5" />
+
+              <div>
+                <div class="font-semibold">
+                  {{ link.title }}
+                </div>
+                <div class="text-sm text-muted-foreground">
+                  {{ link.description }}
+                </div>
               </div>
             </NuxtLink>
           </li>

diff --git a/composables/useConfig.ts b/composables/useConfig.ts
@@ -163,32 +163,32 @@ export function useConfig() {
           ...header,
           ...navKeyFromPath(route.path, 'header', navigation.value || []),
           ...page.value?.header,
-        } as typeof header,
+        } as (typeof header & DefaultConfig['header']),
         banner: {
           ...banner,
           ...navKeyFromPath(route.path, 'banner', navigation.value || []),
           ...page.value?.banner,
-        } as typeof banner,
+        } as (typeof banner & DefaultConfig['banner']),
         main: {
           ...main,
           ...navKeyFromPath(route.path, 'main', navigation.value || []),
           ...page.value?.main,
-        } as typeof main,
+        } as (typeof main & DefaultConfig['main']),
         aside: {
           ...aside,
           ...navKeyFromPath(route.path, 'aside', navigation.value || []),
           ...page.value?.aside,
-        } as typeof aside,
+        } as (typeof aside & DefaultConfig['aside']),
         toc: {
           ...toc,
           ...navKeyFromPath(route.path, 'toc', navigation.value || []),
           ...page.value?.toc,
-        } as typeof toc,
+        } as (typeof toc & DefaultConfig['toc']),
         footer: {
           ...footer,
           ...navKeyFromPath(route.path, 'footer', navigation.value || []),
           ...page.value?.footer,
-        } as typeof footer,
+        } as (typeof footer & DefaultConfig['footer']),
       };
     },
   );

diff --git a/content/3.api/1.configuration/1.shadcn-docs.md b/content/3.api/1.configuration/1.shadcn-docs.md
@@ -40,7 +40,7 @@ interface ILink {
 
 interface INav {
   title: string;
-  links?: (ILink & { description: string })[];
+  links?: (ILink & { description: string; icon: string })[];
   to?: string;
   target?: Target;
 }

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -45,6 +45,7 @@ interface DefaultConfig {
         to: string;
         target: string;
         description: string;
+        icon?: string;
       })[];
     })[];
     links: ({