Switch to Hilla for UI

2026-06-16 08:15:48 +00:00 · 2024-03-06 23:35:41 +01:00
parent 73457aad0b
commit e79dd7a6df
44 changed files with 12778 additions and 429 deletions
@@ -0,0 +1,52 @@
+import {AppLayout} from '@hilla/react-components/AppLayout.js';
+import {Avatar} from '@hilla/react-components/Avatar.js';
+import {Button} from '@hilla/react-components/Button.js';
+import {DrawerToggle} from '@hilla/react-components/DrawerToggle.js';
+import {useAuth} from 'Frontend/util/auth.js';
+import {useRouteMetadata} from 'Frontend/util/routing.js';
+import {useEffect} from 'react';
+import {Outlet} from 'react-router-dom';
+
+const navLinkClasses = ({isActive}: any) => {
+    return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
+};
+
+export default function MainLayout() {
+    const currentTitle = useRouteMetadata()?.title ?? 'My App';
+    useEffect(() => {
+        document.title = currentTitle;
+    }, [currentTitle]);
+
+    const {state, logout} = useAuth();
+    return (
+        <AppLayout primarySection="drawer">
+            <div slot="drawer" className="flex flex-col justify-between h-full p-m">
+                <header className="flex flex-col gap-m">
+                    <h1 className="text-l m-0">My App</h1>
+                    <nav>
+                    </nav>
+                </header>
+                <footer className="flex flex-col gap-s">
+                    {state.user ? (
+                        <>
+                            <div className="flex items-center gap-s">
+                                <Avatar theme="xsmall" name={state.user.name}/>
+                                {state.user.name}
+                            </div>
+                            <Button onClick={async () => logout()}>Sign out</Button>
+                        </>
+                    ) : (
+                        <a href="/login">Sign in</a>
+                    )}
+                </footer>
+            </div>
+
+            <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
+            <h2 slot="navbar" className="text-l m-0">
+                {currentTitle}
+            </h2>
+
+            <Outlet/>
+        </AppLayout>
+    );
+}