From 54f23119180ff4031c803b0089130bcb86bc745a Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 13 Dec 2024 23:45:57 +0330
Subject: [PATCH] added header

---
 frontend/components/global/Header.vue | 70 +++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 5 deletions(-)

diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index a72124d..c5c0bd9 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -1,11 +1,71 @@
-<script setup></script>
+<script setup lang="ts">
+// types
+
+type NavLink = {
+    title: string;
+    path: string;
+};
+
+// state
+
+const nav_links = ref<NavLink[]>([
+    {
+        title: "Shop",
+        path: "#",
+    },
+    {
+        title: "Collections",
+        path: "#",
+    },
+    {
+        title: "Explore",
+        path: "#",
+    },
+    {
+        title: "Contact",
+        path: "#",
+    },
+    {
+        title: "Theme features",
+        path: "#",
+    },
+]);
+</script>
 
 <template>
-    <div class="w-full flex items-center justify-between bg-white">
-        <div class="w-3/12 flex items-center justify-start">
-            <span class="size-[2rem] bg-black rounded-full"></span>
+    <header class="w-full bg-white flex-center">
+        <div
+            class="w-full flex items-center justify-between container py-[2.25rem]"
+        >
+            <div class="w-2/12 flex items-center justify-start">
+                <span class="size-[2rem] bg-black rounded-full"></span>
+            </div>
+
+            <nav
+                class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
+            >
+                <NuxtLink
+                    v-for="(link, index) in nav_links"
+                    :key="index"
+                    :to="link.path"
+                >
+                    {{ link.title }}
+                </NuxtLink>
+            </nav>
+
+            <div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:search" class="**:stroke-black" />
+                </button>
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:profile" class="**:stroke-black" />
+                </button>
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:cart" class="**:stroke-black" />
+                </button>
+            </div>
         </div>
-    </div>
+    </header>
 </template>
 
 <style lang="scss" scoped></style>