update navbar

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/main/header.vue

@@ -1,26 +1,37 @@
 <script setup lang="ts">
-let x = ref('10')
+let isDark = ref(false)
 </script>
 
 <template>
-  <nav class="py-5 border-b">
+  <div class="py-5 px-4 border-b text-zinc-600">
-    <div class="container flex justify-between mx-auto items-baseline">
+    <div class="flex container max-w-5xl justify-between mx-auto items-baseline">
       <ul class="flex items-baseline space-x-5">
         <li>
-          <NuxtLink to="/" class="text-2xl font-medium"> Home </NuxtLink>
+          <NuxtLink to="/" class="text-2xl text-black font-bold"> Home </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/categories" class="font-medium"> Categories </NuxtLink>
+          <NuxtLink to="/categories"> Categories </NuxtLink>
         </li>
       </ul>
-      <ul class="flex space-x-3">
+      <ul class="flex items-center space-x-3">
         <li>
-          <NuxtLink to="/blogs"> Blogs </NuxtLink>
+          <NuxtLink to="/blogs"> Archive </NuxtLink>
-        </li>
-        <li>
-          <NuxtLink to="/blogs"> Icon </NuxtLink>
         </li>
+        <Icon
+          v-if="isDark"
+          size="1.2em"
+          @click="isDark = !isDark"
+          class="cursor-pointer"
+          name="line-md:moon-to-sunny-outline-loop-transition"
+        />
+        <Icon
+          v-else
+          size="1.2em"
+          @click="isDark = !isDark"
+          class="cursor-pointer"
+          name="line-md:sunny-outline-to-moon-loop-transition"
+        />
       </ul>
     </div>
-  </nav>
+  </div>
 </template>

layouts/default.vue

@@ -3,7 +3,8 @@
     <header class="fixed w-full backdrop-blur-3xl">
       <MainHeader />
     </header>
-    <main class="mt-20">
+    <main>
+      <div class="p-9"></div>
       <slot />
     </main>
     <footer>

nuxt.config.ts

@@ -14,5 +14,5 @@ export default defineNuxtConfig({
     strict: true,
   },
 
-  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
+  modules: ['@nuxt/content', '@nuxtjs/tailwindcss', 'nuxt-icon'],
 })

package.json

@@ -12,6 +12,7 @@
     "@nuxtjs/tailwindcss": "^6.1.3",
     "@tailwindcss/typography": "^0.5.8",
     "nuxt": "3.0.0",
+    "nuxt-icon": "^0.1.8",
     "prettier": "2.8.1"
   }
 }

yarn.lock

@@ -409,6 +409,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.16.14.tgz#90558dcb279989d92a42e5be4dfb884b2399361f"
   integrity sha512-ED1UpWcM6lAbalbbQ9TrGqJh4Y9TaASUvu8bI/0mgJcxhSByJ6rbpgqRhxYMaQ682WfA71nxUreaTO7L275zrw==
 
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/vue@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.0.2.tgz#1df557cc82a454cb2d1eb69ded1fb48b6363ef87"
+  integrity sha512-LRp+mYh8N0bcX4lustHtI5o1aEoio9HN3/19uIzVOvI78qopKBjzsDK5hkEZYDSc6+LKG8hfLxTxpW8CejXGZg==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
@@ -4262,6 +4274,14 @@ nuxi@3.0.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+nuxt-icon@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/nuxt-icon/-/nuxt-icon-0.1.8.tgz#9df26856bf5ff05685989f95bbbe52fe5ee7887a"
+  integrity sha512-oPFlLOZCy80MN+hf49+mBkOIHWVF3sOqZREQZw3qD0N6wGlR15QeRQtKQC8qGeQcc+xvpLQm0GvrdJ8FxFOPYg==
+  dependencies:
+    "@iconify/vue" "^4.0.1"
+    "@nuxt/kit" "^3.0.0"
+
 nuxt@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.0.0.tgz#0909e6566d79805f3a4ed6229573817cbde12e89"