wip: update

cdsctf · Nov 4, 2024 · 2686a47 · 2686a47
1 parent d2c7bc0
commit 2686a47
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 63 deletions.
diff --git a/src/components/widgets/Navbar/Navbar.module.scss b/src/components/widgets/Navbar/Navbar.module.scss
@@ -22,79 +22,101 @@ $border-color: var(--navbar-border-color);
     color: #ffffff;
 
     transition: all 300ms ease-in-out;
+}
 
-    .left-section,
-    .right-section {
-        flex: 1;
-    }
+.left-section,
+.right-section {
+    flex: 1;
+}
+
+.info-wrapper {
+    width: fit-content;
+}
+
+.info {
+    display: flex;
+    justify-content: flex-start;
+    transition: all 300ms ease-in-out;
+    align-items: center;
+    gap: 8px;
+    user-select: none;
 
-    .info-wrapper {
-        width: fit-content;
+    &:hover {
+        cursor: pointer;
+        scale: 1.05;
     }
 
-    .info {
+    .logo {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
         display: flex;
-        justify-content: flex-start;
-        transition: all 300ms ease-in-out;
         align-items: center;
-        gap: 8px;
-        user-select: none;
-
-        &:hover {
-            cursor: pointer;
-            scale: 1.05;
-        }
-
-        .logo {
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-        }
-
-        .title {
-            font-size: 1.25rem;
-            font-weight: 700;
-        }
+        justify-content: center;
+        font-weight: 700;
     }
 
-    .links {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: row;
-        gap: 1rem;
-        user-select: none;
+    .title {
+        font-size: 1.25rem;
+        font-weight: 700;
     }
+}
 
-    .link {
-        display: flex;
-        gap: 5px;
-        align-items: center;
-        transition: all 150ms ease-in-out;
-        padding: 0.5em 1em;
-        border-radius: 9999px;
-
-        &[data-active="true"],
-        &:hover {
-            scale: 1.05;
-            background: #1111113d;
-        }
-
-        &:active {
-            transform: translateY(2px);
-        }
-
-        .label {
-            font-weight: 600;
-        }
+.links {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    user-select: none;
+}
+
+.link {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    transition: all 150ms ease-in-out;
+    padding: 0.5em 1em;
+    border-radius: 9999px;
+
+    &[data-active="true"],
+    &:hover {
+        scale: 1.05;
+        background: #1111113d;
     }
 
-    .features {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.75rem;
+    &:active {
+        transform: translateY(2px);
+    }
+
+    .label {
+        font-weight: 600;
+    }
+}
+
+.features-wrapper {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.features {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.avatar {
+    border-radius: 50%;
+    padding: 2px;
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: #1111113d;
+    }
+
+    &:active {
+        transform: translateY(2px);
     }
 }
diff --git a/src/components/widgets/Navbar/Navbar.tsx b/src/components/widgets/Navbar/Navbar.tsx
@@ -7,16 +7,20 @@ import UsersGroupTwoRoundedBoldDuotone from "~icons/solar/users-group-two-rounde
 import PlanetBoldDuotone from "~icons/solar/planet-bold-duotone";
 import styles from "./Navbar.module.scss";
 import useThemeColor from "@/hooks/useThemeColor";
-import { CSSProperties } from "react";
+import { CSSProperties, useRef, useState } from "react";
 import chroma from "chroma-js";
 import { Link, useLocation } from "react-router-dom";
+import { Avatar, Dropdown } from "@/components/core";
 
 export function Navbar() {
     const darkMode = useThemeStore.getState().darkMode;
     const pathname = useLocation().pathname;
 
     const baseColor = useThemeColor("primary");
 
+    const [dropdownMenuOpen, setDropdownMenuOpen] = useState<boolean>(false);
+    const dropdownMenuButtonRef = useRef(null);
+
     const variables = {
         "--navbar-bg-color": chroma(baseColor).hex(),
         "--navbar-border-color": chroma(baseColor).hex(),
@@ -83,6 +87,10 @@ export function Navbar() {
                             onClick={() => {
                                 useThemeStore.getState().setDarkMode(!darkMode);
                             }}
+                            style={{
+                                width: "fit-content",
+                                height: "fit-content",
+                            }}
                         >
                             {darkMode ? (
                                 <>
@@ -94,6 +102,36 @@ export function Navbar() {
                                 </>
                             )}
                         </button>
+                        <div
+                            className={styles["avatar"]}
+                            onClick={() => {
+                                setDropdownMenuOpen((r) => !r);
+                            }}
+                            ref={dropdownMenuButtonRef}
+                        >
+                            <Avatar
+                                src={"https://e23.dev/Ella_Avatar.png"}
+                                fallback={<>E</>}
+                                color={"transparent"}
+                            />
+                        </div>
+                        <Dropdown
+                            open={dropdownMenuOpen}
+                            onClose={() => setDropdownMenuOpen(false)}
+                            targetRef={dropdownMenuButtonRef}
+                        >
+                            <div
+                                style={{
+                                    width: "10rem",
+                                    height: "100px",
+                                    borderRadius: "8px",
+                                    backgroundColor: "var(--bg-2-color)",
+                                    zIndex: 1000,
+                                }}
+                            >
+                                1
+                            </div>
+                        </Dropdown>
                     </div>
                 </div>
             </div>