mobile-friendly admin navigation, links on startpage

JohanGrims · Sep 19, 2024 · 40c6bd0 · 40c6bd0
1 parent c80065e
commit 40c6bd0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,6 +9,15 @@ function App() {
 
   return (
     <div className="mdui-prose">
+      <div style={{ position: "fixed", top: 0, left: 0, padding: "1rem" }}>
+        <mdui-button-icon icon="admin_panel_settings" href="/admin" />
+      </div>
+      <div style={{ position: "fixed", top: 0, right: 0, padding: "1rem" }}>
+        <mdui-button-icon
+          icon="code"
+          href="https://github.com/johangrims/waldorfwahlen"
+        />
+      </div>
       <p />
       <div style={{ display: "flex", justifyContent: "center" }}>
         <img src="/WSP.png" alt="Logo" className="waldorf-logo" />

diff --git a/src/admin/auth/Login.tsx b/src/admin/auth/Login.tsx
@@ -52,7 +52,7 @@ export default function Login() {
   return (
     <mdui-card variant="filled" class="card">
       <div className="mdui-prose">
-        <h1>Login</h1>
+        <h1>Administratoren-Bereich</h1>
         <mdui-text-field
           value={email}
           onInput={(e) => setEmail(e.target.value)}

diff --git a/src/admin/index.jsx b/src/admin/index.jsx
@@ -13,6 +13,8 @@ export default function Admin(props) {
   const [authUser, setAuthUser] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
 
+  const [open, setOpen] = React.useState(true);
+
   React.useEffect(() => {
     const listen = onAuthStateChanged(auth, (user) => {
       if (user) {
@@ -40,8 +42,29 @@ export default function Admin(props) {
 
   return (
     <mdui-layout style={{ width: "100vw", height: "100vh" }}>
-      <DrawerList />
+      {open && <DrawerList />}
+      {open && window.innerWidth < 1024 && (
+        <div
+          style={{
+            position: "absolute",
+            top: "0px",
+            right: "0px",
+            padding: "1rem",
+            zIndex: 100000,
+          }}
+          onClick={() => setOpen(false)}
+        >
+          <mdui-button-icon icon="menu_open" variant="filled" />
+        </div>
+      )}
+
       <mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
+        {window.innerWidth < 1024 && (
+          <mdui-button-icon
+            icon="menu"
+            onClick={() => setOpen(!open)}
+          ></mdui-button-icon>
+        )}
         <mdui-top-app-bar-title>{authUser.email}</mdui-top-app-bar-title>
         <mdui-tooltip content="Abmelden" open-delay="0" placement="left">
           <mdui-button-icon