base

app/components/Header/HeaderMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav class="navbar">
+    <div class="navbar-menu">
+      <div class="navbar-start">
+        <NuxtLink :key="index" v-for="(item, index) in listPage" :to="item.path" class="navbar-item"
+          >{{ item.title }}
+        </NuxtLink>
+      </div>
+      <div class="navbar-end" v-if="!isUser">
+        <NuxtLink to="#" class="navbar-item"> Đăng nhập </NuxtLink>
+        <NuxtLink to="#" class="navbar-item"> Đăng ký </NuxtLink>
+      </div>
+      <HeaderUser v-else />
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import HeaderUser from './HeaderUser.vue';
+
+const isUser = ref(false);
+
+const listPage = [
+  // {
+  //   path: '/',
+  //   title: 'Trang chủ',
+  // },
+  // {
+  //   path: '/about',
+  //   title: 'Giới thiệu',
+  // },
+  {
+    path: '#service-pricing',
+    title: 'Bảng giá',
+  },
+  {
+    path: '#contact',
+    title: 'Liên hệ',
+  },
+];
+</script>
+
+<style lang="scss">
+.navbar {
+  flex: auto;
+  min-height: fit-content;
+
+  .navbar-menu {
+    justify-content: flex-end;
+    gap: 30px;
+  }
+  .navbar-start {
+    margin-inline-end: unset;
+    flex: auto;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .navbar-end {
+    margin-inline-start: unset;
+    gap: 10px;
+  }
+
+  .navbar-item {
+    border-radius: 24px;
+    padding: 10px 20px;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+  .router-link-active {
+    background-color: var(--color-primary);
+    color: #fff;
+  }
+  a.navbar-item:focus,
+  a.navbar-item:focus-within,
+  a.navbar-item:hover,
+  .navbar-link:focus,
+  .navbar-link:focus-within,
+  .navbar-link:hover {
+    background-color: var(--color-hover);
+    color: #fff;
+  }
+}
+</style>