Add drawer to navigate between tools

src/Geopilot.Frontend/public/locale/de/common.json

@@ -1,5 +1,6 @@
 {
   "about": "Über",
+  "administration": "Administration",
   "appSubTitle": "Online Validierung & Lieferung von Geodaten",
   "bugTracking": "Bugtracking",
   "cancel": "Abbrechen",

src/Geopilot.Frontend/public/locale/en/common.json

@@ -1,5 +1,6 @@
 {
   "about": "About",
+  "administration": "Administration",
   "appSubTitle": "Online validation & delivery of geodata",
   "bugTracking": "bug tracking",
   "cancel": "Cancel",

src/Geopilot.Frontend/public/locale/fr/common.json

@@ -1,5 +1,6 @@
 {
   "about": "À propos",
+  "administration": "Administration",
   "appSubTitle": "Validation en ligne et livraison de données géographiques",
   "bugTracking": "Suivi des bugs",
   "cancel": "Annuler",

src/Geopilot.Frontend/public/locale/it/common.json

@@ -1,5 +1,6 @@
 {
   "about": "Informazioni",
+  "administration": "Amministrazione",
   "appSubTitle": "Validazione online e consegna di dati geografici",
   "bugTracking": "Tracciamento bug",
   "cancel": "Annulla",

src/Geopilot.Frontend/src/Header.jsx

@@ -1,21 +1,46 @@
-import { Button, Navbar, Nav, Container } from "react-bootstrap";
-import { NavLink } from "react-router-dom";
-import { useAuth } from "./auth";
+import { useAuth } from "./auth";
 import { useTranslation } from "react-i18next";
-import { AdminTemplate } from "./auth/AdminTemplate";
-import { LoggedInTemplate } from "./auth/LoggedInTemplate";
-import { LoggedOutTemplate } from "./auth/LoggedOutTemplate";
+import * as React from "react";
+import {
+  AppBar,
+  Box,
+  Button,
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import { LoggedInTemplate } from "./auth/LoggedInTemplate.jsx";
+import { LoggedOutTemplate } from "./auth/LoggedOutTemplate.jsx";
+import { AdminTemplate } from "./auth/AdminTemplate.jsx";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export const Header = ({ clientSettings }) => {
   const { user, login, logout } = useAuth();
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [userMenuOpen, setUserMenuOpen] = React.useState(false);
+
+  const toggleUserMenu = newOpen => () => {
+    setUserMenuOpen(newOpen);
+  };
 
   return (
     <header>
-      <Navbar expand="md" className="full-width justify-content-between" sticky="top">
-        <Container fluid className="align-items-baseline">
-          {clientSettings?.vendor?.logo && (
-            <Navbar.Brand href={clientSettings?.vendor?.url} target="_blank" rel="noreferrer">
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static">
+          <Toolbar
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}>
+            <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
               <img
                 className="vendor-logo"
                 src={clientSettings?.vendor?.logo}
@@ -24,45 +49,72 @@ export const Header = ({ clientSettings }) => {
                   e.target.style.display = "none";
                 }}
               />
-            </Navbar.Brand>
-          )}
-          <Navbar.Toggle aria-controls="navbar-nav" />
-          <Navbar.Collapse id="navbar-nav">
-            <div className="navbar-container">
-              <Nav className="full-width mr-auto" navbarScroll>
-                <NavLink className="nav-link" to="/">
-                  {t("delivery").toUpperCase()}
-                </NavLink>
-                <AdminTemplate>
-                  <NavLink className="nav-link" to="/admin">
-                    {t("deliveryOverview").toUpperCase()}
-                  </NavLink>
-                  <a className="nav-link" href="/browser">
-                    {t("stacBrowser").toUpperCase()}
-                  </a>
-                </AdminTemplate>
-              </Nav>
-              <Nav>
-                <LoggedOutTemplate>
-                  <Button className="nav-button" onClick={login}>
-                    {t("logIn")}
-                  </Button>
-                </LoggedOutTemplate>
-                <LoggedInTemplate>
-                  <Button className="nav-button" onClick={logout}>
-                    {t("logOut")}
-                  </Button>
-                </LoggedInTemplate>
-              </Nav>
-            </div>
-            <div className="navbar-info-container">
+              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                {location.pathname.includes("admin") ? t("administration").toUpperCase() : t("delivery").toUpperCase()}
+              </Typography>
+            </Box>
+            <Box sx={{ flexGrow: 0 }}>
+              <LoggedOutTemplate>
+                <Button color="inherit" onClick={login}>
+                  {t("logIn")}
+                </Button>
+              </LoggedOutTemplate>
               <LoggedInTemplate>
-                <div className="user-info">{t("loggedInAs", { name: user?.name })}</div>
+                <Button className="nav-button" sx={{ color: "white" }} onClick={toggleUserMenu(true)}>
+                  {user?.name}
+                </Button>
               </LoggedInTemplate>
-            </div>
-          </Navbar.Collapse>
-        </Container>
-      </Navbar>
+            </Box>
+          </Toolbar>
+        </AppBar>
+      </Box>
+      <Drawer anchor={"right"} open={userMenuOpen} onClose={toggleUserMenu(false)}>
+        <div className="user-menu">
+          <Box
+            sx={{ width: 250 }}
+            role="presentation"
+            onClick={toggleUserMenu(false)}
+            onKeyDown={toggleUserMenu(false)}>
+            <List>
+              <ListItem key={user?.name}>
+                <ListItemText primary={user?.name} />
+              </ListItem>
+            </List>
+            <Divider />
+            <List>
+              <ListItem key={t("delivery").toUpperCase()} disablePadding>
+                <ListItemButton
+                  onClick={() => {
+                    navigate("/");
+                  }}>
+                  <ListItemText primary={t("delivery").toUpperCase()} />
+                </ListItemButton>
+              </ListItem>
+              <AdminTemplate>
+                <ListItem key={t("administration").toUpperCase()} disablePadding>
+                  <ListItemButton
+                    onClick={() => {
+                      navigate("/admin");
+                    }}>
+                    <ListItemText primary={t("administration").toUpperCase()} />
+                  </ListItemButton>
+                </ListItem>
+                <ListItem key={t("stacBrowser").toUpperCase()} disablePadding>
+                  <ListItemButton
+                    onClick={() => {
+                      window.location.href = "/browser";
+                    }}>
+                    <ListItemText primary={t("stacBrowser").toUpperCase()} />
+                  </ListItemButton>
+                </ListItem>
+              </AdminTemplate>
+            </List>
+          </Box>
+          <Button className="nav-button" sx={{ color: "black" }} onClick={logout}>
+            {t("logOut")}
+          </Button>
+        </div>
+      </Drawer>
     </header>
   );
 };

src/Geopilot.Frontend/src/app.css

@@ -1,6 +1,5 @@
 /************ Base Layout ************/
 body {
-  text-align: center;
   background: #eaeff27a;
 }
 
@@ -14,6 +13,7 @@ main {
   flex: 1 1 auto;
   overflow: auto;
   padding: 20px 35px;
+  text-align: center;
 }
 
 main a {
@@ -40,13 +40,12 @@ header a {
   transform: scale(1.05);
 }
 
-header {
-  justify-content: space-between;
+.user-menu {
   display: flex;
-  padding-left: 35px;
-  padding-right: 35px;
-  padding-top: 20px;
-  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 20px 0;
 }
 
 .app-title {
@@ -167,9 +166,9 @@ input {
     font-size: 20px;
   }
   .vendor-logo {
-    max-height: 70px;
+    max-height: 40px;
     max-width: 200px;
-    margin: 0 !important;
+    margin: 0 20px 0 0 !important;
   }
   .app-logo {
     max-height: 200px;
@@ -202,7 +201,7 @@ input {
   }
   .vendor-logo {
     margin-left: 2rem;
-    max-height: 50px;
+    max-height: 40px;
     max-width: 150px;
   }
   .app-logo {
@@ -506,91 +505,15 @@ footer {
   align-items: center;
 }
 
-/************ Navbar ************/
-.full-width {
-  width: 100%;
-}
-
-.container-fluid {
-  padding: 0 !important;
-}
-
-@media screen and (max-width: 767px) {
-  #navbar-nav {
-    display: none;
-  }
-
-  .show#navbar-nav {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .show .nav-link {
-    padding: 0.5rem 1rem !important;
-  }
-
-  .nav-button {
-    margin-top: 1rem;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  #navbar-nav {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .navbar-container {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    width: 100%;
-    padding-top: 18px;
-  }
-
-  .navbar-info-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    width: 100%;
-    align-items: center;
-  }
-}
-
-.nav-link {
-  font-family: "Dosis", sans-serif;
-  font-size: 1.2rem;
-  padding: 0 1rem !important;
-  white-space: nowrap;
-  overflow: auto;
-}
-
 .nav-button {
-  color: rgba(0, 0, 0, 0.65);
   background-color: transparent !important;
-  border: none;
-  text-decoration-line: none;
-  font-family: "Dosis", sans-serif;
-  font-size: 1.2rem;
+  font-size: 1.25rem !important;
+  font-weight: 500;
   padding: 0 !important;
 }
 
 .nav-button:hover {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.user-info {
-  font-family: "Dosis", sans-serif;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.65);
-  cursor: default;
-}
-
-.logged-in-button .nav-button {
-  padding: 0 !important;
-  margin-bottom: -1rem !important;
+  opacity: 0.8;
 }
 
 /************ Alerts ************/