heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added header

Browse Source
This commit is contained in:
Mamalizz
2024-12-13 23:45:57 +03:30
parent 367f074414
commit 54f2311918
1 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Header.vue
+63 -3
View File
@@ -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">
<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>
</header>
</template>
<style lang="scss" scoped></style>