Navbar component

GDSC-KIIT · Jun 13, 2024 · f720d90 · f720d90
1 parent cf2a3f1
commit f720d90
Show file tree

Hide file tree

Showing 10 changed files with 921 additions and 8 deletions.
diff --git a/components/Nav.vue b/components/Nav.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="fixed max-w-7xl left-0 right-0 mx-auto">
+    <nav
+      class="flex items-center justify-between p-2 max-w-7xl mx-auto text-primary font-popins"
+    >
+      <div class="flex gap-2 items-center">
+        <NuxtImg
+          src="/KIIT olx.svg"
+          alt="KIIT OLX"
+          width="50"
+          height="50"
+          class="h-[80px] mb-1"
+        />
+        <h1 class="text-xl"><span class="font-bold">KIIT</span> OLX</h1>
+      </div>
+      <div
+        class="flex items-center space-x-4 md:hidden relative z-10"
+        :class="isMenuOpen ? 'hidden' : 'block'"
+      >
+        <button @click="toggleMenu" class="focus:outline-none">
+          <VectorIconsHamburger class="text-2xl" />
+        </button>
+      </div>
+      <div
+        class="flex items-center space-x-4 md:hidden relative z-10"
+        :class="isMenuOpen ? 'block text-white' : 'hidden'"
+      >
+        <button @click="toggleMenu" class="focus:outline-none">
+          <VectorIconsClose class="text-2xl" />
+        </button>
+      </div>
+      <div
+        :class="{
+          hidden: !isMenuOpen,
+          block: isMenuOpen,
+        }"
+        class="absolute bg-black/70 md:bg-transparent w-[50%] h-screen md:h-auto md:w-auto top-0 right-0 md:static md:flex items-center justify-center md:space-x-4"
+      >
+        <ul
+          class="md:flex flex flex-col md:flex-row items-center justify-center text-center text-white md:text-primary md:space-x-4 h-[80%] my-auto"
+        >
+          <li
+            v-for="item in menuItems"
+            :key="item.name"
+            class="p-4 md:p-0 md:m-0 my-2 md:border-0 border-b-2 border-white"
+          >
+            <a
+              :href="item.link"
+              class="hover:text-gray-400 text-center text-2xl md:text-base"
+              >{{ item.name }}</a
+            >
+          </li>
+          <div :class="isMenuOpen ? 'block' : 'hidden'" class="m-4 md:hidden">
+          <div class="text-2xl">
+            <a href="/login" class="hover:text-grey-400 text-xl mx-auto w-fit text-white text-center m-4 py-4">Login</a>
+            <a
+              href="/signup"
+              class="hover:text-white flex gap-1 items-center bg-secondary hover:bg-secondary/95 text-white px-4 py-2 rounded-md w-fit m-4 mx-auto"
+              >Sign Up
+              <!-- <div><VectorIconsRightArrow class="text-xl" /></div -->
+            </a>
+          </div>
+        </div>
+        </ul>
+
+      </div>
+      <div class="hidden md:flex items-center space-x-4">
+        <a href="/login" class="hover:text-grey-400">Login</a>
+        <a
+          href="/signup"
+          class="hover:text-white flex gap-1 items-center bg-secondary hover:bg-secondary/95 text-white px-4 py-2 rounded-full"
+          >Get Started
+          <div><VectorIconsRightArrow class="text-2xl" /></div
+        ></a>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuItems: [
+        { name: "Home", link: "/" },
+        { name: "About", link: "/about" },
+        { name: "Store", link: "/store" },
+      ],
+      isMenuOpen: false,
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.isMenuOpen = !this.isMenuOpen;
+    },
+  },
+};
+</script>
diff --git a/components/VectorIcons/Close.vue b/components/VectorIcons/Close.vue
@@ -0,0 +1,10 @@
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 18l-6-6m0 0L6 6m6 6l6-6m-6 6l-6 6"></path></svg>
+  </template>
+
+  <script>
+  export default {
+    name: 'CiCloseMd'
+  }
+  </script>
diff --git a/components/VectorIcons/Hamburger.vue b/components/VectorIcons/Hamburger.vue
@@ -0,0 +1,10 @@
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 17h14M5 12h14M5 7h14"></path></svg>
+  </template>
+
+  <script>
+  export default {
+    name: 'CiHamburgerMd'
+  }
+  </script>
diff --git a/components/VectorIcons/RightArrow.vue b/components/VectorIcons/RightArrow.vue
@@ -0,0 +1,10 @@
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m13.692 17.308l-.707-.72l4.088-4.088H5v-1h12.073l-4.088-4.088l.707-.72L19 12z"></path></svg>
+  </template>
+
+  <script>
+  export default {
+    name: 'MaterialSymbolsLightArrowRightAlt'
+  }
+  </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -10,6 +10,6 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: ["shadcn-nuxt", "@nuxtjs/tailwindcss"],
+  modules: ["shadcn-nuxt", "@nuxtjs/tailwindcss", "@nuxt/image", "@nuxt/fonts"],
 
 })