-
+
Logged in as{" "}
{username}
@@ -151,7 +164,7 @@ export function MobileNavMenu({
setOpen(false);
await onLogout();
}}
- className={`flex w-full items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors duration-200 text-white cursor-pointer bg-transparent border-none ${hoverClass}`}
+ className={`flex w-full items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors duration-200 ${textColor} cursor-pointer bg-transparent border-none ${hoverClass}`}
>
Log out
diff --git a/client/src/components/nav/NavMenu.tsx b/client/src/components/nav/NavMenu.tsx
index 13fc5ae..2aa067a 100644
--- a/client/src/components/nav/NavMenu.tsx
+++ b/client/src/components/nav/NavMenu.tsx
@@ -2,16 +2,32 @@ import { Label } from "@radix-ui/react-dropdown-menu";
import { Link, useLocation } from "react-router-dom";
import { useState, useEffect, useRef } from "react";
import { navItems } from "./navLogic/navItems";
+import {
+ getBackgroundClasses,
+ getLiquidGlassNavHighlight,
+ getSubtextColor,
+ getTextColor,
+ getTextShadow,
+} from "@/lib/utils";
interface NavMenuProps {
useLiquidGlass: boolean;
+ useDarkMode?: boolean;
}
-export function NavMenu({ useLiquidGlass }: NavMenuProps) {
+export function NavMenu({ useLiquidGlass, useDarkMode = false }: NavMenuProps) {
const location = useLocation();
const [highlightPos, setHighlightPos] = useState({ left: 0, width: 0 });
const [isHovering, setIsHovering] = useState(false);
const ulRef = useRef(null);
+ const textColor = getTextColor(useLiquidGlass, useDarkMode);
+ const subtextColor = getSubtextColor(useLiquidGlass, useDarkMode);
+ const textShadow = getTextShadow(useLiquidGlass, useDarkMode);
+ const navBackground = getBackgroundClasses(
+ useLiquidGlass,
+ useDarkMode,
+ "light",
+ );
useEffect(() => {
// Find the matching nav item based on current route
@@ -76,12 +92,12 @@ export function NavMenu({ useLiquidGlass }: NavMenuProps) {
return (
{useLiquidGlass && isHovering && (
(
-
diff --git a/client/src/components/nav/Navbar.tsx b/client/src/components/nav/Navbar.tsx
index 5ceb8f0..a57a3c6 100644
--- a/client/src/components/nav/Navbar.tsx
+++ b/client/src/components/nav/Navbar.tsx
@@ -6,8 +6,14 @@ import { MobileNavMenu } from "./MobileNavMenu";
import { useProfiles } from "../forms/addNewProfile/useProfiles";
import { Link, useNavigate } from "react-router";
import { useMediaQuery } from "./navLogic/useMediaQuery";
-import { apiLogout } from "@/hooks/useApi";
+import { useLogoutMutation } from "@/hooks/useQueryHooks";
import { AuthContext } from "@/context/AuthContext";
+import {
+ getBackgroundClasses,
+ getSubtextColor,
+ getTextColor,
+ getTextShadow,
+} from "@/lib/utils";
const Navbar = () => {
const { settings } = useSettings();
@@ -15,19 +21,31 @@ const Navbar = () => {
const username = selectedProfile?.name ?? "PlaceholderUserName";
const isDesktop = useMediaQuery("(min-width: 768px)");
const navigate = useNavigate();
- const { setIsLoggedIn, setUserId } = useContext(AuthContext);
+ const { setIsLoggedIn, setUserId, setIsAdmin } = useContext(AuthContext);
+ const logoutMutation = useLogoutMutation();
+ const navBackground = getBackgroundClasses(
+ settings.useLiquidGlass,
+ settings.useDarkMode,
+ "light",
+ );
+ const textColor = getTextColor(settings.useLiquidGlass, settings.useDarkMode);
+ const subtextColor = getSubtextColor(
+ settings.useLiquidGlass,
+ settings.useDarkMode,
+ );
+ const textShadow = getTextShadow(
+ settings.useLiquidGlass,
+ settings.useDarkMode,
+ );
const handleLogout = async () => {
try {
- const { ok } = await apiLogout();
- if (ok) {
- console.log("Logout successful");
- setIsLoggedIn(false);
- setUserId(null);
- navigate("/app/login");
- } else {
- console.error("Logout failed");
- }
+ await logoutMutation.mutateAsync();
+ console.log("Logout successful");
+ setIsLoggedIn(false);
+ setUserId(null);
+ setIsAdmin(false);
+ navigate("/app/login");
} catch (error) {
console.error("Logout failed:", error);
}
@@ -35,24 +53,29 @@ const Navbar = () => {
return (