keep sidebar on mobile for now and add icons

web/src/App.tsx

@@ -2,6 +2,7 @@ import Providers from "@/context/providers";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useState } from "react";
 import Wrapper from "@/components/Wrapper";
+import Sidebar from "@/components/Sidebar";
 import Header from "@/components/Header";
 import Dashboard from "@/pages/Dashboard";
 import Live from "@/pages/Live";
@@ -28,6 +29,7 @@ function App() {
         <Wrapper>
           <Header onToggleNavbar={toggleNavbar} />
           <div className="grid grid-cols-[auto,1fr] flex-grow-1 overflow-auto">
+            <Sidebar sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} />
             <div
               id="pageRoot"
               className="overflow-x-hidden px-4 py-2 w-screen md:w-full"

web/src/components/Header.tsx

@@ -8,7 +8,6 @@ import {
   LuList,
   LuMenu,
   LuMoon,
-  LuMoreVertical,
   LuPenSquare,
   LuRotateCw,
   LuSettings,
@@ -18,7 +17,7 @@ import {
 import { IoColorPalette } from "react-icons/io5";
 import { CgDarkMode } from "react-icons/cg";
 import { Button } from "@/components/ui/button";
-import Heading from "./ui/heading";
+import { VscAccount } from "react-icons/vsc";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -93,24 +92,28 @@ function HeaderNavigation() {
     },
   ];
 
-  return navbarLinks.map((item) => {
+  return (
-    let shouldRender = item.dev ? ENV !== "production" : true;
+    <div className="hidden md:flex">
-    return (
+      {navbarLinks.map((item) => {
-      shouldRender && (
+        let shouldRender = item.dev ? ENV !== "production" : true;
-        <NavLink
+        return (
-          key={item.id}
+          shouldRender && (
-          to={item.url}
+            <NavLink
-          className={({ isActive }) =>
+              key={item.id}
-            `py-4 px-2 flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
+              to={item.url}
-              isActive ? "font-bold bg-popover text-popover-foreground" : ""
+              className={({ isActive }) =>
-            }`
+                `py-4 px-2 flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
-          }
+                  isActive ? "font-bold bg-popover text-popover-foreground" : ""
-        >
+                }`
-          <div className="text-sm">{item.title}</div>
+              }
-        </NavLink>
+            >
-      )
+              <div className="text-sm">{item.title}</div>
-    );
+            </NavLink>
-  });
+          )
+        );
+      })}
+    </div>
+  );
 }
 
 function Header({ onToggleNavbar }: HeaderProps) {
@@ -161,7 +164,6 @@ function Header({ onToggleNavbar }: HeaderProps) {
             <div className="w-10 mr-5">
               <Logo />
             </div>
-            <Heading as="h1">Frigate</Heading>
           </div>
           {ENV == "production" && (
             <div className="text-red-500 text-sm items-center text-right">
@@ -175,7 +177,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button size="icon" variant="ghost">
-              <LuMoreVertical />
+              <LuSettings />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="md:w-72 mr-5">
@@ -309,6 +311,9 @@ function Header({ onToggleNavbar }: HeaderProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        <Button size="icon" variant="ghost">
+          <VscAccount />
+        </Button>
       </div>
       {restartDialogOpen && (
         <AlertDialog

web/src/components/Sidebar.tsx

@@ -69,7 +69,7 @@ function Sidebar({
 
   return (
     <>
-      <div className="hidden md:block">{sidebar}</div>
+      <div className="hidden">{sidebar}</div>
 
       <Sheet
         open={sheetOpen}