base

2026-03-17 14:08:57 +07:00
parent c9940afc82
commit cf144ea896
34 changed files with 10875 additions and 0 deletions
--- a/app/components/Header/HeaderUser.vue
+++ b/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>