oddbit · muzanella11 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/hosting/src/components/Dropdown/DropdownUser.tsx b/hosting/src/components/Dropdown/DropdownUser.tsx
@@ -0,0 +1,91 @@
+import UserAvatar from "@/components/UserAvatar";
+import {useAuthentication} from "@/hooks/useAuthentication";
+import {clsx} from "clsx";
+import Link from "next/link";
+import {useEffect, useRef, useState} from "react";
+
+interface DropdownItemProps {
+  href: string;
+  icon: string;
+  label: string;
+}
+
+function DropdownItem({href, icon, label}: DropdownItemProps) {
+  return (
+    <Link
+      href={href}
+      className="flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+    >
+      <span className={clsx("w-[24px] h-[24px]", icon)} />
+      {label}
+    </Link>
+  );
+}
+
+export default function DropdownUser() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const trigger = useRef<HTMLAnchorElement>(null);
+  const dropdown = useRef<HTMLDivElement>(null);
+  const {authUser, signout} = useAuthentication();
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({target}: MouseEvent) => {
+      if (!dropdown.current || !trigger.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target as Node) || trigger.current.contains(target as Node)) {
+        return;
+      }
+      setDropdownOpen(false);
+    };
+    document.addEventListener("click", clickHandler);
+    return () => document.removeEventListener("click", clickHandler);
+  }, [dropdownOpen]);
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({keyCode}: KeyboardEvent) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener("keydown", keyHandler);
+    return () => document.removeEventListener("keydown", keyHandler);
+  }, [dropdownOpen]);
+
+  return (
+    <div className="relative">
+      <Link ref={trigger} onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-4" href="#">
+        <span className="hidden text-right lg:block">
+          <span className="block text-sm font-medium text-black dark:text-white">{authUser?.displayName}</span>
+        </span>
+
+        <span className="rounded-full">
+          <UserAvatar uid={authUser?.uid} size={40} />
+        </span>
+        <span className="i-ic-round-keyboard-arrow-down w-[24px] h-[24px]" />
+      </Link>
+
+      {/* <!-- Dropdown Start --> */}
+      <div
+        ref={dropdown}
+        onFocus={() => setDropdownOpen(true)}
+        onBlur={() => setDropdownOpen(false)}
+        className={`absolute right-0 mt-4 flex w-62.5 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark ${
+          dropdownOpen ? "block" : "hidden"
+        }`}
+      >
+        <ul className="flex flex-col gap-5 border-b border-stroke px-6 py-7.5 dark:border-strokedark">
+          <DropdownItem href="/profile" icon="i-ic-baseline-person-outline" label="My Profile" />
+          <DropdownItem href="/settings" icon="i-ic-outline-settings" label="Account Settings" />
+        </ul>
+        <button
+          onClick={signout}
+          className="flex items-center gap-3.5 px-6 py-4 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+        >
+          <span className="i-ic-outline-logout w-[24px] h-[24px]" />
+          Log Out
+        </button>
+      </div>
+      {/* <!-- Dropdown End --> */}
+    </div>
+  );
+}
diff --git a/hosting/src/components/Header.tsx b/hosting/src/components/Header.tsx
@@ -1,3 +1,5 @@
+import DarkModeSwitcher from "@/components/DarkModeSwitcher";
+import DropdownUser from "@/components/Dropdown/DropdownUser";
 import {TogglePublishDocument} from "@/components/TogglePublishDocument";
 import Image from "next/image";
 import Link from "next/link";
@@ -23,24 +25,44 @@ export default function Header({sidebarOpen, setSidebarOpen}: HeaderProps) {
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        {/* Start Toggle Publish Document */}
         <TogglePublishDocument />
-        <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
-          <button
-            aria-controls="sidebar"
-            onClick={(e) => {
-              e.stopPropagation();
-              setSidebarOpen(!sidebarOpen);
-            }}
-            className="z-99999 flex items-center justify-center rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
-            style={{width: "40px", height: "40px"}}
-          >
-            <span className="i-ic-round-menu w-[24px] h-[24px]" />
-          </button>
+        {/* End Toggle Publish Document */}
 
-          <Link className="block flex-shrink-0 lg:hidden" href="/">
-            <Image width={32} height={32} src={"/images/logo.svg"} alt="Logo" />
-          </Link>
+        {/* Start Hamburger Menu */}
+        <div className="flex items-center gap-2 sm:gap-4">
+          <div className="flex items-center lg:hidden">
+            <button
+              aria-controls="sidebar"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSidebarOpen(!sidebarOpen);
+              }}
+              className="z-99999 flex items-center justify-center rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+              style={{width: "40px", height: "40px"}}
+            >
+              <span className="i-ic-round-menu w-[24px] h-[24px]" />
+            </button>
+
+            <Link className="block flex-shrink-0 pl-4 lg:hidden" href="/">
+              <Image width={32} height={32} src={"/images/logo.svg"} alt="Logo" />
+            </Link>
+          </div>
+        </div>
+        {/* End Hamburger Menu */}
+
+        {/* Start List Top Right Menu */}
+        <div className="flex items-center gap-2 2xsm:gap-4">
+          <ul className="flex items-center gap-2 2xsm:gap-4">
+            <li>
+              <DarkModeSwitcher />
+            </li>
+            <li>
+              <DropdownUser />
+            </li>
+          </ul>
         </div>
+        {/* End List Top Right Menu */}
       </div>
     </header>
   );