base

app/components/Header/Header.vue

@@ -0,0 +1,25 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <HeaderLogo />
+      <HeaderMenu />
+    </div>
+  </header>
+</template>
+
+<script setup>
+import HeaderLogo from './HeaderLogo.vue';
+import HeaderMenu from './HeaderMenu.vue';
+</script>
+
+<style lang="scss">
+.header {
+  box-shadow: 4px 4px 4px 0px #00000040;
+  .container {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>

app/components/Header/HeaderLogo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img src="/logo.png" alt="" srcset="" />
+    </NuxtLink>
+  </div>
+</template>
+
+<style lang="scss">
+.logo {
+  a {
+    display: inline-block;
+    width: 150px;
+  }
+}
+</style>

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>

app/components/Header/HeaderUser.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="navbar-end">
+    <ul class="menu-user">
+      <li class="menu-user-item">
+        <img class="img-avatar" src="/icons/avatar.svg" alt="avatar" /> <span> Nguyễn Văn Nam </span>
+        <ul class="sub-menu">
+          <li>Tài khoản</li>
+          <li>Đăng xuất</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<style lang="scss">
+.header {
+  .menu-user {
+    min-width: 180px;
+    .menu-user-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      position: relative;
+      cursor: pointer;
+
+      &:hover {
+        .sub-menu {
+          display: block;
+        }
+      }
+    }
+    .img-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
+  .sub-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 2px 2px 2px 0px #00000040;
+    border-radius: 16px;
+    padding: 20px 10px;
+
+    li {
+      padding: 5px;
+      & + li {
+        margin-top: 0.625rem;
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: var(--color-hover);
+        color: #fff;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>