Animate mobile nav

README.md

 # Self Service Frontend
+
+## TODOs
+
+- RUB Auth + Auth Gates
+- Dark Mode

src/components/layout/MobileNavigation.tsx

@@ -4,23 +4,31 @@ import { useNavigationStore } from "../../data/state/navigation";
 import { HeaderLogo } from "./Header";
 import HR from "../widgets/HR";
 import LanguageSelect from "../widgets/LanguageSelect";
+import classNames from "classnames";
 
 export default function MobileNavigation() {
 	const [isVisible, setVisible] = useNavigationStore(s => [s.isVisible, s.setVisible]);
 
-	if (!isVisible) {
-		return <></>;
-	}
-
 	const sidebarClasses =
 		// Layout
 		"lg:hidden fixed inset-y-0 right-0 w-64 overflow-y-auto " +
 		// Visual
-		`bg-body border-t border-b ${STYLES.BORDER_COLOR} shadow-md`;
+		`bg-body border-t border-b ${STYLES.BORDER_COLOR} shadow-md ` +
+		// Animation
+		"transition-transform will-change-transform " +
+		classNames({
+			"translate-x-full": !isVisible,
+			"translate-x-0": isVisible,
+		});
+
+	const backdropClasses = classNames("lg:hidden fixed inset-0 bg-black transition-opacity", {
+		"opacity-0 pointer-events-none": !isVisible,
+		"opacity-50": isVisible,
+	});
 
 	return (
 		<>
-			<div className="lg:hidden fixed inset-0 bg-black opacity-40" onClick={() => setVisible(false)} />
+			<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>