frontend/navbar: fix mobile menu and add icons. fix #125

Tinkerforge · Dec 9, 2024 · 6ca62f0 · 6ca62f0
1 parent ccfbb85
commit 6ca62f0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 28 deletions.
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -6,6 +6,8 @@ import { Navbar } from "react-bootstrap";
 import { connected} from "./charger_list";
 import Median from "median-js-bridge";
 import i18n from "../i18n";
+import { useState } from "preact/hooks";
+import { LogOut, Server, User } from "react-feather";
 
 export async function logout(logout_all: boolean) {
         await fetchClient.GET("/user/logout", {params:{query:{logout_all: logout_all}}, credentials: "same-origin"});
@@ -33,27 +35,44 @@ export function setAppNavigation() {
 
 export function CustomNavbar() {
     const { url } = useLocation();
-    const {t} = useTranslation("", {useSuspense: false, keyPrefix: "navbar"})
+    const [expanded, setExpanded] = useState(false);
+    const {t} = useTranslation("", {useSuspense: false, keyPrefix: "navbar"});
 
     if (Median.isNativeApp()) {
         return setAppNavigation()
     }
 
 
     return (
-        <Navbar id="remote_access_navbar" expand="md" hidden={connected.value} className="navbar-dark sticky-top flex-row flex-md-nowrap p-2 mb-2">
+        <Navbar id="remote_access_navbar" expanded={expanded} expand="md" hidden={connected.value} className="navbar-dark sticky-top flex-row flex-md-nowrap p-2 mb-2">
                 <a href="/"><img class="pt-2 pb-2 pl-3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ0AAAAjAQMAAAC0Dc25AAAABlBMVEXwH1b///+8ndbpAAAAAXRSTlMAQObYZgAAAE1JREFUOMtjeMDAwM7AwFDA/h8CDshDGQz1EPoHA3WVMEAA4wEogx1KM1iMKhlCSuiWXthhbpGBOQLmvOGihB1FCXKADwMl0Hj9QGslAM2l6A72PC0DAAAAAElFTkSuQmCC" style="max-width: calc(100vw - 80px); image-rendering: crisp-edges" alt="logo"/></a>
-                <Navbar.Toggle className="navbar-toggler" aria-controls="basic-navbar-nav"/>
-                <Navbar.Collapse id="navbar-nav" className="navbar-extend p-2">
+                <Navbar.Toggle onClick={() => setExpanded(!expanded)} id="navbar-toggler" aria-controls="basic-navbar-nav"/>
+                <Navbar.Collapse id="navbar-nav" className="sidebar px-2 py-1">
                     <Nav className="me-auto">
-                        <Nav.Link href="/user" active={url === "/user"}>{t("user")}</Nav.Link>
-                        <Nav.Link href="/chargers" active={url === "/chargers"}>{t("chargers")}</Nav.Link>
+                        <Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/user" active={url === "/user"}>
+                            <User/>
+                            <p class="ms-1 mb-0">
+                                {t("user")}
+                            </p>
+                        </Nav.Link>
+                        <Nav.Link className="d-flex align-items-center" onClick={() => setExpanded(false)} href="/chargers" active={url === "/chargers"}>
+                            <Server/>
+                            <p class="ms-1 mb-0">
+                                {t("chargers")}
+                            </p>
+                        </Nav.Link>
                     </Nav>
+                    <hr class="d-block d-md-none my-1" />
                     <Nav>
-                        <Nav.Link onClick={(e) => {
+                        <Nav.Link className="d-flex align-items-center" onClick={(e) => {
                             e.preventDefault();
                             logout(false);
-                        }}>{t("logout")}</Nav.Link>
+                        }}>
+                            <LogOut/>
+                            <p class="ms-1 mb-0">
+                                {t("logout")}
+                            </p>
+                        </Nav.Link>
                     </Nav>
                 </Navbar.Collapse>
         </Navbar>

diff --git a/frontend/src/main.scss b/frontend/src/main.scss
@@ -5,22 +5,24 @@
 $navbar-height: 66px;
 $navbar-color: #555;
 
-.sidebar {
+@media (max-width: 767.98px) {
+  .sidebar {
     position: fixed;
-    top: 0;
+    top: $navbar-height;
     bottom: 0;
     left: 0;
+    width: 100%;
     z-index: 1019; /* Behind the navbar */
+    background-color: rgba(var(--bs-light-rgb), 1);
     padding: $navbar-height 0 0; /* Height of navbar */
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
   }
 
-  @media (max-width: 767.98px) {
-    .sidebar {
-      top: $navbar-height;
-      padding-top: 0;
-    }
+  .sidebar .nav-link {
+      font-weight: 500;
+      color: #333;
   }
+}
 
 .footer {
   background-color: $navbar-color;
@@ -31,31 +33,31 @@ $navbar-color: #555;
 }
 
 .navbar-extend {
-    background-color: $navbar-color;
-}
-
-.sidebar .nav-link {
-    font-weight: 500;
-    color: #333;
+  background-color: $navbar-color;
+  border-radius: 0 0 15px 15px;
 }
 
 @media (hover: hover) {
-    .sidebar .nav-link:hover {
-        color: var(--primary);
-    }
+  .sidebar .nav-link:hover {
+      color: var(--primary);
+  }
 }
 
 .navbar {
-    background-color: $navbar-color;
-    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
-    height: $navbar-height;
-  }
+  background-color: $navbar-color;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
+  height: $navbar-height;
+}
 
 .navbar .navbar-toggler {
   top: 0.25rem;
   right: 1rem;
 }
 
+.navbar-divide {
+  color: #ffff !important;
+}
+
 .navbar-dark .navbar-toggler:hover {
   background-color: #5a6268
 }