changed navbar

2026-03-13 14:40:00 +08:00
parent f44258d134
commit cb850b4cd0
14 changed files with 414 additions and 305 deletions
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -0,0 +1,145 @@
+/* Profile and Dropdown */
+.profileContainer {
+  display: flex;
+  height: 44px;
+  flex-direction: column;
+  align-items: flex-end;
+  cursor: pointer;
+  position: relative;
+}
+.profileBadge {
+  display: flex;
+  padding: 6px 0 6px 8px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+}
+.profileBadge:hover {
+  border-radius: 6px;
+  background: #21232f;
+  background: color(display-p3 0.1294 0.1373 0.1804);
+}
+.nameRole {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 6px;
+}
+.userName {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  /* line-height: 30px; 200% */
+  line-height: 1;
+  letter-spacing: -0.15px;
+}
+.userRole {
+  align-self: stretch;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  /* line-height: 30px; 230.769% */
+  line-height: 0.5;
+  letter-spacing: -0.26px;
+}
+.userImgContainer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.userPic {
+  width: 32px;
+  height: 32px;
+  aspect-ratio: 1/1;
+  border-radius: 32px;
+  background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
+}
+.ellipsisBtn {
+  display: none;
+}
+
+.dropdownContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  left: 0;
+  border-radius: 6px;
+  background: #2d3144;
+  background: color(display-p3 0.1787 0.1913 0.2605);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  cursor: pointer;
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  margin-top: 3px;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.settingsBtn,
+.logoutBtn {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  color: #acb0ff;
+  border-radius: 4px;
+}
+.settingsBtn:hover,
+.logoutBtn:hover {
+  background: #3c4159;
+  background: color(display-p3 0.2392 0.2549 0.3412);
+
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingsBtn,
+.logoutBtn > p {
+  color: #acb0ff;
+  color: color(display-p3 0.678 0.6895 1);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+/* Mobile */
+@media (max-width: 768px) {
+}