Mamalizz
72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<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>
|
|
<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>
|