Refactor design of navbar

varianter · Nov 14, 2023 · 1a9a594 · 1a9a594
1 parent 399009a
commit 1a9a594
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -4,18 +4,20 @@ import NavBarUserIcon from "./NavBarUserIcon";
 
 export default function NavBar() {
   return (
-    <div className="bg-primary w-full h-[52px] flex flex-row justify-between header">
-      <div className="flex flex-row">
+    <div className="bg-primary w-full flex flex-row justify-between header px-4">
+      <div className="flex flex-row gap-8">
         <NavBarLink text="Bemanning" path={`bemanning`} />
       </div>
-      <div className="flex flex-row gap-6 items-center">
-        <Image
-          className="variant-logo"
-          alt="Variant logo"
-          src="/images/variant-logo.svg"
-          width="65"
-          height="16"
-        />
+      <div className="flex flex-row gap-4 items-center">
+        <div className="border-r border-white/20 py-2">
+          <Image
+            className="variant-logo mr-4"
+            alt="Variant logo"
+            src="/images/variant-logo.svg"
+            width="65"
+            height="16"
+          />
+        </div>
         <NavBarUserIcon />
       </div>
     </div>

diff --git a/frontend/src/components/NavBar/NavBarDropdown.tsx b/frontend/src/components/NavBar/NavBarDropdown.tsx
@@ -4,7 +4,7 @@ import { signOut } from "next-auth/react";
 import { LogOut } from "react-feather";
 import { useOutsideClick } from "@/hooks/useOutsideClick";
 
-export default function NavBarDropdown(props: { initials: string }) {
+export default function NavBarDropdown(props: { initial: string }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const menuRef = useRef(null);
@@ -15,14 +15,16 @@ export default function NavBarDropdown(props: { initials: string }) {
 
   return (
     <>
-      <div className="relative p-2" ref={menuRef}>
+      <div className="relative" ref={menuRef}>
         <button
-          className={`flex rounded-full border border-white h-9 min-w-[36px] justify-center items-center ${
-            props.initials.length > 3 && "px-1"
+          className={`flex rounded-full border border-white/50 h-8 w-8 justify-center items-center  ${
+            isOpen ? "bg-white" : "hover:bg-white/10 hover:border-white"
           }`}
           onClick={() => setIsOpen(!isOpen)}
         >
-          <p className="text-white small">{props.initials}</p>
+          <p className={`large ${isOpen ? "text-primary" : "text-white"}`}>
+            {props.initial}
+          </p>
         </button>
         <div
           className={`absolute right-0 top-11 rounded-b text-primary bg-white flex flex-col w-[138px] shadow-md ${

diff --git a/frontend/src/components/NavBar/NavBarLink.tsx b/frontend/src/components/NavBar/NavBarLink.tsx
@@ -8,7 +8,7 @@ export default function NavBarLink(props: { text: string; path: string }) {
 
   return (
     <a
-      className={`p-4 flex justify-center items-center text-white ${
+      className={`py-4 flex justify-center items-center text-white ${
         isCurrentPath
           ? "large-medium border-b-[3px] border-secondary"
           : "large opacity-70 hover:opacity-100"

diff --git a/frontend/src/components/NavBar/NavBarUserIcon.tsx b/frontend/src/components/NavBar/NavBarUserIcon.tsx
@@ -9,13 +9,8 @@ export default async function NavBarUserIcon() {
     !process.env.NEXT_PUBLIC_NO_AUTH &&
     (await getCustomServerSession(authOptions));
 
-  const initials =
-    session && session.user && session.user.name
-      ? session.user.name
-          .split(" ")
-          .map((name) => name.charAt(0).toUpperCase())
-          .join("")
-      : "NN";
+  const initial =
+    session && session.user && session.user.name ? session.user.name[0] : "N";
 
-  return <NavBarDropdown initials={initials} />;
+  return <NavBarDropdown initial={initial} />;
 }