webui: Handle small screens

webui/package.json

@@ -17,6 +17,7 @@
     "@types/react-relay": "^13.0.1",
     "@types/relay-runtime": "^13.0.2",
     "axios": "^0.26.0",
+    "hamburger-react": "^2.4.1",
     "i18next": "^21.6.13",
     "i18next-browser-languagedetector": "^6.1.3",
     "i18next-http-backend": "^1.3.2",

webui/src/components/panel/dashboard/Dashboard.module.scss

@@ -3,15 +3,15 @@
 .dashboardGrid {
   height: 90%;
   display: grid;
-
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr;
   gap: var(--veles-layout-padding);
 
-  @media (max-width: 1300px) {
+  /*grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+
+  @media (max-width: 1300px) {*/
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
-  }
+  //}
   @media (max-width: 950px) {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr 1fr 1fr;

webui/src/layouts/PanelLayout.module.scss

@@ -1,5 +1,7 @@
 @import "../globals";
 
+$navBreakpoint: 1000px;
+
 .skipToContent {
   opacity: 0;
   pointer-events: none;
@@ -62,6 +64,21 @@
     border-bottom: thin solid var(--veles-color-border);
     height: 66px;
 
+    .hamburger {
+      padding: 8px 0 8px 10px;
+      display: none;
+    }
+
+    @media(max-width: 600px) {
+      .hamburger {
+        display: block;
+      }
+
+      >*>span {
+        display: none;
+      }
+    }
+
     a, button {
       @include panelTopBarLink;
     }
@@ -85,6 +102,27 @@
       flex-shrink: 0;
     }
 
+    .navUnderlay {
+      display: none;
+      position: absolute;
+      width: 100%;
+      z-index: 900;
+      background-color: rgba(0, 0, 0, .75);
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .25s;
+
+      @media(max-width: $navBreakpoint) {
+        display: block;
+        opacity: 0;
+        &.show {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
     > nav {
       display: flex;
       flex-direction: column;
@@ -92,6 +130,23 @@
       overflow-x: auto;
       height: calc(100vh - 66px);
       width: 250px;
+      background-color: var(--veles-color-background);
+      transition: left .25s;
+
+      @media (max-width: $navBreakpoint) {
+        left: -250px;
+        position: absolute;
+        z-index: 1000;
+
+        &.expanded {
+          left: 0;
+        }
+      }
+
+      @media (max-width: 400px) {
+        left: -100%;
+        width: 100%;
+      }
 
       >* {
         flex-shrink: 0;

webui/src/layouts/PanelLayout.tsx

@@ -1,18 +1,21 @@
 import React, {useState} from "react";
 
 import {Link, NavLink, useOutlet} from "react-router-dom";
-import {Home, List, ClipboardList, ExternalLink, ChevronRight, MessageSquare, LogOut} from "lucide-react";
+import {Home, List, ClipboardList, BookOpen, ChevronRight, MessageSquare, LogOut} from "lucide-react";
+import { Squash as Hamburger } from 'hamburger-react';
 
 import {ReactComponent as Logo} from "../logo.svg";
 
 import styles from "./PanelLayout.module.scss";
-import {Trans} from "react-i18next";
+import {Trans, useTranslation} from "react-i18next";
 import {useAppDispatch} from "../app/hooks";
 import {logOut} from "../features/auth/authSlice";
 
 const PanelLayout = () => {
+    const {t} = useTranslation()
     const outlet = useOutlet();
     const [hashingExpanded, setHashingExpanded] = useState(false)
+    const [sideNavExpanded, setSideNavExpanded] = useState(true)
 
     const dispatch = useAppDispatch()
 
@@ -20,20 +23,24 @@ const PanelLayout = () => {
         <a href={"#main"} className={styles.skipToContent}><Trans i18nKey={"panel:jump_to_content"}>Jump to Content</Trans></a>
         <a href={"#navigation"} className={styles.skipToContent}><Trans i18nKey={"panel:jump_to_navigation"}>Jump to Navigation</Trans></a>
         <div className={styles.topBar}>
+            <div className={styles.hamburger}>
+                <Hamburger toggle={setSideNavExpanded} toggled={sideNavExpanded} rounded={true} duration={.25} distance={"lg"} />
+            </div>
             <Link to={"/"} className={styles.logo}><Logo/> <span>Matrix-Veles</span></Link>
-            <a href={"https://veles.1in1.net/docs/intro"} target={"_blank"} rel={"noreferrer"}><ExternalLink/> <span><Trans i18nKey={"panel:documentation"}>Documentation</Trans></span></a>
+            <a href={"https://veles.1in1.net/docs/intro"} target={"_blank"} rel={"noreferrer"} title={t("panel:documentation", "Documentation")}><BookOpen/><span> <Trans i18nKey={"panel:documentation"}>Documentation</Trans></span></a>
-            <button onClick={() => {dispatch(logOut())}}><LogOut/> Logout</button>
+            <button onClick={() => {dispatch(logOut())}} title={t("panel:logout", "Logout")}><LogOut/><span> <Trans i18nKey={"panel:logout"}>Logout</Trans></span></button>
         </div>
         <div className={styles.content}>
-            <nav id={"navigation"}>
+            <div className={styles.navUnderlay + (sideNavExpanded ? " "+styles.show : "")} onClick={() => setSideNavExpanded(false)} />
-                <NavLink to={"/"}><Home/><span><Trans i18nKey={"panel:navigation.dashboard"}>Dashboard</Trans></span></NavLink>
+            <nav id={"navigation"} className={sideNavExpanded ? styles.expanded : ""}>
-                <NavLink to={"/rooms"}><MessageSquare/><span><Trans i18nKey={"panel:navigation.rooms"}>My Rooms</Trans></span></NavLink>
+                <NavLink to={"/"} onClick={() => setSideNavExpanded(false)}><Home/><span><Trans i18nKey={"panel:navigation.dashboard"}>Dashboard</Trans></span></NavLink>
+                <NavLink to={"/rooms"} onClick={() => setSideNavExpanded(false)}><MessageSquare/><span><Trans i18nKey={"panel:navigation.rooms"}>My Rooms</Trans></span></NavLink>
                 <div className={styles.dropdown + (hashingExpanded?" "+styles.expanded:"")}>
                     <button onClick={() => setHashingExpanded(!hashingExpanded)}>
                         <ChevronRight/> <span><Trans i18nKey={"panel:navigation.hash_checker"}>Hash-Checker</Trans></span>
                     </button>
-                    <NavLink to={"/hashing/lists"}><List/><span><Trans i18nKey={"panel:navigation.hash_lists"}>Lists</Trans></span></NavLink>
+                    <NavLink to={"/hashing/lists"} onClick={() => setSideNavExpanded(false)}><List/><span><Trans i18nKey={"panel:navigation.hash_lists"}>Lists</Trans></span></NavLink>
-                    <NavLink to={"/hashing/entries"}><ClipboardList/><span><Trans i18nKey={"panel:navigation.hash_entries"}>Entries</Trans></span></NavLink>
+                    <NavLink to={"/hashing/entries"} onClick={() => setSideNavExpanded(false)}><ClipboardList/><span><Trans i18nKey={"panel:navigation.hash_entries"}>Entries</Trans></span></NavLink>
                 </div>
             </nav>
             <main id={"main"}>

webui/yarn.lock

@@ -4934,6 +4934,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hamburger-react@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/hamburger-react/-/hamburger-react-2.4.1.tgz#44fac99c30720fe8ed098b2a33e919b14b3e007e"
+  integrity sha512-oqG9CrTVi8wM/dyQQh3JJOOfEiol9ChLOqwtjx+hFyRu0nYfe2ymNmzi2wtfQTDyExUdqETdyACZV9KZ9wpApA==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"