fix(web): make app bar and sidebar fully responsive

web/src/App.jsx

@@ -4,7 +4,6 @@ import AppBar from './components/AppBar';
 import Camera from './Camera';
 import CameraMap from './CameraMap';
 import Cameras from './Cameras';
-import { DarkModeProvider } from './context';
 import Debug from './Debug';
 import Event from './Event';
 import Events from './Events';
@@ -12,34 +11,37 @@ import { Router } from 'preact-router';
 import Sidebar from './Sidebar';
 import StyleGuide from './StyleGuide';
 import Api, { FetchStatus, useConfig } from './api';
+import { DarkModeProvider, SidebarProvider } from './context';
 
 export default function App() {
   const { data, status } = useConfig();
   return (
     <DarkModeProvider>
-      <div class="w-full">
+      <SidebarProvider>
-        <AppBar title="Frigate" />
+        <div class="w-full">
-        {status !== FetchStatus.LOADED ? (
+          <AppBar title="Frigate" />
-          <div className="flex flex-grow-1 min-h-screen justify-center items-center">
+          {status !== FetchStatus.LOADED ? (
-            <ActivityIndicator />
+            <div className="flex flex-grow-1 min-h-screen justify-center items-center">
-          </div>
+              <ActivityIndicator />
-        ) : (
-          <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
-            <Sidebar />
-            <div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
-              <Router>
-                <CameraMap path="/cameras/:camera/editor" />
-                <Camera path="/cameras/:camera" />
-                <Event path="/events/:eventId" />
-                <Events path="/events" />
-                <Debug path="/debug" />
-                {import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
-                <Cameras default path="/" />
-              </Router>
             </div>
-          </div>
+          ) : (
-        )}
+            <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
-      </div>
+              <Sidebar />
+              <div className="w-full flex-auto p-2 mt-20 px-4 min-w-0">
+                <Router>
+                  <CameraMap path="/cameras/:camera/editor" />
+                  <Camera path="/cameras/:camera" />
+                  <Event path="/events/:eventId" />
+                  <Events path="/events" />
+                  <Debug path="/debug" />
+                  {import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
+                  <Cameras default path="/" />
+                </Router>
+              </div>
+            </div>
+          )}
+        </div>
+      </SidebarProvider>
     </DarkModeProvider>
   );
 }

web/src/Sidebar.jsx

@@ -1,10 +1,11 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import Link from './components/Link';
 import LinkedLogo from './components/LinkedLogo';
 import { Link as RouterLink } from 'preact-router/match';
 import { useCallback, useState } from 'preact/hooks';
+import { useSidebar } from './context';
 
-function NavLink({ className = '', href, text }) {
+function NavLink({ className = '', href, text, ...other }) {
   const external = href.startsWith('http');
   const El = external ? Link : RouterLink;
   const props = external ? { rel: 'noopener nofollow', target: '_blank' } : {};
@@ -13,6 +14,7 @@ function NavLink({ className = '', href, text }) {
       activeClassName="bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200"
       className={`block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline self-end ${className}`}
       href={href}
+      {...other}
       {...props}
     >
       {text}
@@ -21,21 +23,34 @@ function NavLink({ className = '', href, text }) {
 }
 
 export default function Sidebar() {
+  const { showSidebar, setShowSidebar } = useSidebar();
+
+  const handleDismiss = useCallback(() => {
+    setShowSidebar(false);
+  }, [setShowSidebar]);
+
   return (
-    <div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0">
+    <Fragment>
-      <div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
+      {showSidebar ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
-        <div class="text-gray-500">
+      <div
-          <LinkedLogo />
+        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
+          !showSidebar ? '-translate-x-full' : ''
+        } lg:translate-x-0 transition-transform duration-300`}
+      >
+        <div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
+          <div class="text-gray-500">
+            <LinkedLogo />
+          </div>
         </div>
+        <nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
+          <NavLink onClick={handleDismiss} href="/" text="Cameras" />
+          <NavLink onClick={handleDismiss} href="/events" text="Events" />
+          <NavLink onClick={handleDismiss} href="/debug" text="Debug" />
+          <hr className="border-solid border-gray-500 mt-2" />
+          <NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
+          <NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
+        </nav>
       </div>
-      <nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
+    </Fragment>
-        <NavLink href="/" text="Cameras" />
-        <NavLink href="/events" text="Events" />
-        <NavLink href="/debug" text="Debug" />
-        <hr className="border-solid border-gray-500 mt-2" />
-        <NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
-        <NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
-      </nav>
-    </div>
   );
 }

web/src/components/AppBar.jsx

@@ -4,7 +4,7 @@ import LinkedLogo from './LinkedLogo';
 import Menu, { MenuItem } from './Menu';
 import MenuIcon from '../icons/Menu';
 import MoreIcon from '../icons/More';
-import { useDarkMode } from '../context';
+import { useDarkMode, useSidebar } from '../context';
 import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
@@ -18,6 +18,7 @@ export default function AppBar({ title }) {
   const [sidebarVisible, setSidebarVisible] = useState(true);
   const [showMoreMenu, setShowMoreMenu] = useState(false);
   const { currentMode, persistedMode, setDarkMode } = useDarkMode();
+  const { showSidebar, setShowSidebar } = useSidebar();
 
   const handleSelectDarkMode = useCallback(
     (value, label) => {
@@ -61,6 +62,10 @@ export default function AppBar({ title }) {
     setShowMoreMenu(false);
   }, [setShowMoreMenu]);
 
+  const handleShowSidebar = useCallback(() => {
+    setShowSidebar(true);
+  }, [setShowSidebar]);
+
   return (
     <div
       className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
@@ -68,7 +73,7 @@ export default function AppBar({ title }) {
       } ${!atZero ? 'shadow' : ''}`}
     >
       <div className="lg:hidden">
-        <Button className="rounded-full w-12 h-12 -ml-4 -mt-4 -mb-4" type="text">
+        <Button className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
           <MenuIcon />
         </Button>
       </div>

web/src/components/Card.jsx

@@ -20,7 +20,7 @@ export default function Box({
     <div className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-xl rounded-lg overflow-hidden ${className}`}>
       <Element href={href} {...props}>
         {media}
-        <div class="p-2 pb-2 lg:p-4 lg:pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
+        <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
       </Element>
       {buttons.length || content ? (
         <div class="pl-4 pb-2">

web/src/context/index.jsx

@@ -64,3 +64,15 @@ export function DarkModeProvider({ children }) {
 export function useDarkMode() {
   return useContext(DarkMode);
 }
+
+const Sidebar = createContext(null);
+
+export function SidebarProvider({ children }) {
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  return <Sidebar.Provider value={{ showSidebar, setShowSidebar }}>{children}</Sidebar.Provider>;
+}
+
+export function useSidebar() {
+  return useContext(Sidebar);
+}