feat: icons in the navbar

ZTL-UwU · Dec 23, 2024 · 20d9a7b · 20d9a7b
1 parent d9b6d7e
commit 20d9a7b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 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/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: ({