Fix mobile navigation dark mode

src/components/layout/App.tsx

@@ -6,15 +6,16 @@ import MobileNavigation from "./MobileNavigation";
 import Shells from "../shells/Shells";
 
 export default function App() {
+	const appDefaultClasses = `${STYLES.LINE_HEIGHT} ${STYLES.MAX_APP_WIDTH} ${STYLES.TEXT_COLOR} transition-colors`;
 	const classes =
 		// Base classes
-		`grid min-h-screen pb-8 ${STYLES.LINE_HEIGHT} ${STYLES.MAX_APP_WIDTH} ${STYLES.TEXT_COLOR} transition-colors ` +
+		`grid min-h-screen pb-8 ` +
 		// Grid: Small Screen
 		`grid-rows-[auto_auto_1fr] ` +
 		// Grid: Large Screen
 		`lg:grid-rows-[auto_1fr] lg:grid-cols-[15rem_1fr] lg:gap-y-8`;
 	return (
-		<>
+		<div className={appDefaultClasses}>
 			<div className={classes}>
 				<Header />
 				<Sidebar />
@@ -24,6 +25,6 @@ export default function App() {
 			</div>
 			<MobileNavigation />
 			<Shells />
-		</>
+		</div>
 	);
 }

src/components/layout/MobileNavigation.tsx

@@ -5,6 +5,8 @@ import { HeaderLogo } from "./Header";
 import HR from "../widgets/HR";
 import LanguageSelect from "../widgets/LanguageSelect";
 import classNames from "classnames";
+import ThemeToggle from "../widgets/ThemeToggle";
+import { Link } from "react-router-dom";
 
 export default function MobileNavigation() {
 	const [isVisible, setVisible] = useNavigationStore(s => [s.isVisible, s.setVisible]);
@@ -13,7 +15,7 @@ export default function MobileNavigation() {
 		// Layout
 		"lg:hidden fixed inset-y-0 right-0 w-64 overflow-y-auto " +
 		// Visual
-		`bg-body-light dark:bg-body-dark border-t border-b ${STYLES.BORDER_COLOR} shadow-md ` +
+		`bg-body-light dark:bg-body-dark shadow-md ` +
 		// Animation
 		"transition-transform will-change-transform " +
 		classNames({
@@ -31,13 +33,16 @@ export default function MobileNavigation() {
 			<div className={backdropClasses} onClick={() => setVisible(false)} />
 			<div className={sidebarClasses}>
 				<HeaderLogo className="m-4" />
-				<div className="font-bold text-xl text-center">FSI Self-Service</div>
-				<div className={`${STYLES.MUTED_COLOR} text-center`}>at your service</div>
-				<HR />
-				<div className="grid place-items-center">
+				<Link to="/">
+					<div className="font-bold text-xl text-center">FSI Self-Service</div>
+					<div className={`${STYLES.MUTED_COLOR} text-center`}>at your service</div>
+				</Link>
+				<HR className="my-4" />
+				<div className="flex items-center justify-center gap-4">
 					<LanguageSelect />
+					<ThemeToggle />
 				</div>
-				<HR />
+				<HR className="my-4" />
 				<Navigation />
 			</div>
 		</>

src/components/layout/NavigationHamburger.tsx

@@ -6,15 +6,25 @@ import { useNavigationStore } from "../../data/state/navigation";
 export default function NavigationHamburger({ className, children, ...props }: JSX.IntrinsicElements["button"]) {
 	const [isVisible, toggleVisibility] = useNavigationStore(s => [s.isVisible, s.toggleVisibility]);
 
-	const classes = classNames("p-2 border border-slate-400 rounded", className);
+	const classes = classNames("grid grid-cols-1 p-2 border border-slate-400 dark:border-slate-500 rounded", className);
 
-	const Icon = isVisible ? XMark : Bars;
-	const iconClasses = isVisible ? "fill-black" : "fill-slate-500";
+	const iconClasses = "w-6 h-6 row-start-1 col-start-1 transition-opacity";
 	const label = isVisible ? "Close navigation" : "Expand navigation";
 
 	return (
 		<button {...props} className={classes} onClick={toggleVisibility} aria-label={label}>
-			<Icon className={classNames("w-6 h-6", iconClasses)} />
+			<Bars
+				className={classNames(iconClasses, "fill-slate-500 dark:fill-slate-400", {
+					"opacity-0": isVisible,
+					"opacity-100": !isVisible,
+				})}
+			/>
+			<XMark
+				className={classNames(iconClasses, "fill-black dark:fill-white", {
+					"opacity-0": !isVisible,
+					"opacity-100": isVisible,
+				})}
+			/>
 		</button>
 	);
 }