From c560b4be74a97eeff53e7567385b45b2ebdbfd68 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Fri, 9 Dec 2022 01:35:55 +0600
Subject: [PATCH] desing navbar

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 assets/svg/wave-haikei (1).svg |   1 +
 assets/svg/wave-haikei (2).svg |   1 +
 assets/svg/wave-haikei.svg     |   1 +
 components/NavbarCom.vue       |  54 +++++++-
 components/svg/Wave.vue        |   9 ++
 layouts/default.vue            |   7 +-
 nuxt.config.ts                 |   1 +
 package.json                   |   3 +-
 pages/archive.vue              |   5 +
 pages/index.vue                | 240 +++++++++++++++++++++++++++++++++
 yarn.lock                      |  20 +++
 11 files changed, 337 insertions(+), 5 deletions(-)
 create mode 100644 assets/svg/wave-haikei (1).svg
 create mode 100644 assets/svg/wave-haikei (2).svg
 create mode 100644 assets/svg/wave-haikei.svg
 create mode 100644 components/svg/Wave.vue
 create mode 100644 pages/archive.vue

diff --git a/assets/svg/wave-haikei (1).svg b/assets/svg/wave-haikei (1).svg
new file mode 100644
index 0000000..cdb952f
--- /dev/null
+++ b/assets/svg/wave-haikei (1).svg	
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#002233"></rect><path d="M0 451L15 459.3C30 467.7 60 484.3 90 473.8C120 463.3 150 425.7 180 409.8C210 394 240 400 270 413.3C300 426.7 330 447.3 360 449.7C390 452 420 436 450 427C480 418 510 416 540 432.5C570 449 600 484 630 500.2C660 516.3 690 513.7 720 511.2C750 508.7 780 506.3 810 493C840 479.7 870 455.3 885 443.2L900 431L900 601L885 601C870 601 840 601 810 601C780 601 750 601 720 601C690 601 660 601 630 601C600 601 570 601 540 601C510 601 480 601 450 601C420 601 390 601 360 601C330 601 300 601 270 601C240 601 210 601 180 601C150 601 120 601 90 601C60 601 30 601 15 601L0 601Z" fill="#4FACF7" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/assets/svg/wave-haikei (2).svg b/assets/svg/wave-haikei (2).svg
new file mode 100644
index 0000000..bcdeeb4
--- /dev/null
+++ b/assets/svg/wave-haikei (2).svg	
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 450" width="900" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="450" fill="#c3f8f5"></rect><path d="M0 338L15 344.2C30 350.3 60 362.7 90 354.8C120 347 150 319 180 307.2C210 295.3 240 299.7 270 309.7C300 319.7 330 335.3 360 337.2C390 339 420 327 450 320.2C480 313.3 510 311.7 540 324C570 336.3 600 362.7 630 374.8C660 387 690 385 720 383C750 381 780 379 810 369C840 359 870 341 885 332L900 323L900 451L885 451C870 451 840 451 810 451C780 451 750 451 720 451C690 451 660 451 630 451C600 451 570 451 540 451C510 451 480 451 450 451C420 451 390 451 360 451C330 451 300 451 270 451C240 451 210 451 180 451C150 451 120 451 90 451C60 451 30 451 15 451L0 451Z" fill="#4FACF7" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/assets/svg/wave-haikei.svg b/assets/svg/wave-haikei.svg
new file mode 100644
index 0000000..2cb61e3
--- /dev/null
+++ b/assets/svg/wave-haikei.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#002233"></rect><path d="M0 457L21.5 462.3C43 467.7 86 478.3 128.8 481.3C171.7 484.3 214.3 479.7 257.2 465.7C300 451.7 343 428.3 385.8 421.5C428.7 414.7 471.3 424.3 514.2 442.7C557 461 600 488 642.8 494.5C685.7 501 728.3 487 771.2 467.8C814 448.7 857 424.3 878.5 412.2L900 400L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#0066FF" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/components/NavbarCom.vue b/components/NavbarCom.vue
index 55974e1..d174b9c 100644
--- a/components/NavbarCom.vue
+++ b/components/NavbarCom.vue
@@ -1,5 +1,53 @@
+<script setup lang="ts">
+const theme = ref("light");
+</script>
+
 <template>
-  <div>
-    <h1>Navbar Component</h1>
-  </div>
+  <header class="sticky top-0 p-6 bg-[#a2d9ff]">
+    <div class="container mx-auto max-w-6xl flex justify-between items-center">
+      <ul class="flex space-x-8">
+        <li>
+          <nuxt-link to="/">Home</nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/latest">Latest</nuxt-link>
+        </li>
+        <li class="space-x-2">
+          <nuxt-link to="/category">Category</nuxt-link>
+          <nuxt-link to="#">^</nuxt-link>
+        </li>
+
+        <li>
+          <nuxt-link to="/archive">Archive</nuxt-link>
+        </li>
+      </ul>
+      <ul class="flex space-x-4">
+        <li>
+          <nuxt-link to="/">
+            <icon size="2em" name="uil:github" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="2em" name="uil:linkedin" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="2em" name="mdi:stackoverflow" />
+          </nuxt-link>
+        </li>
+        <li v-if="theme === 'light'" @click="theme = 'dark'">
+          <nuxt-link to="/">
+            <icon size="2em" name="ph:sun-dim" />
+          </nuxt-link>
+        </li>
+        <li v-if="theme === 'dark'" @click="theme = 'light'">
+          <nuxt-link to="/">
+            <icon size="2em" name="ph:moon-stars" />
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+  </header>
 </template>
diff --git a/components/svg/Wave.vue b/components/svg/Wave.vue
new file mode 100644
index 0000000..df05779
--- /dev/null
+++ b/components/svg/Wave.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+    <path
+      fill="#a2d9ff"
+      fill-opacity="1"
+      d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,122.7C840,139,960,181,1080,197.3C1200,213,1320,203,1380,197.3L1440,192L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
+    ></path>
+  </svg>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index c8d12eb..8d489ae 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
+    <div class="h-10 bg-[#a2d9ff]"></div>
     <navbar-com />
-    <slot />
+    <div class="h-10 bg-[#a2d9ff]"></div>
+    <svg-wave />
+    <div>
+      <slot />
+    </div>
     <footer-com />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3debedb..7f2e92e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,5 +8,6 @@ export default defineNuxtConfig({
     "@nuxt/content",
     "@nuxt/image-edge",
     "@nuxtjs/robots",
+    "nuxt-icon",
   ],
 });
diff --git a/package.json b/package.json
index c67e132..e8a375e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
     "nuxt": "3.0.0",
-    "prettier": "^2.8.0"
+    "prettier": "^2.8.0",
+    "nuxt-icon": "^0.1.8"
   }
 }
diff --git a/pages/archive.vue b/pages/archive.vue
new file mode 100644
index 0000000..92440de
--- /dev/null
+++ b/pages/archive.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>This is archive page</p>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 46abba9..03f6bc7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,5 +7,245 @@ let x = ref(10);
     <h1 class="text-3xl">Index page</h1>
     <h4>Count = {{ x }}</h4>
     <input type="button" @click="x += 1" value="increase count" />
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
+      sint qui sit, totam minima modi placeat quaerat dolore quo.
+    </p>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 480157b..e6c81fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -289,6 +289,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239"
   integrity sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==
 
+"@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.1"
+  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.0.1.tgz#d7e3dbf3f3c79b6105c03fa0ec933eb573d073e7"
+  integrity sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==
+  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"
@@ -4219,6 +4231,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"