remove sidebar (#9731)

* remove sidebar

* keep sidebar on mobile for now and add icons

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,
@@ -57,11 +56,66 @@ import {
 import ActivityIndicator from "./ui/activity-indicator";
 import { useRestart } from "@/api/ws";
 import { ENV } from "@/env";
+import { NavLink } from "react-router-dom";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
 };
 
+function HeaderNavigation() {
+  const navbarLinks = [
+    {
+      id: 1,
+      title: "Dashboard",
+      url: "/",
+    },
+    {
+      id: 2,
+      title: "Live",
+      url: "/live",
+    },
+    {
+      id: 3,
+      title: "History",
+      url: "/history",
+    },
+    {
+      id: 4,
+      title: "Export",
+      url: "/export",
+    },
+    {
+      id: 5,
+      title: "UI Playground",
+      url: "/playground",
+      dev: true,
+    },
+  ];
+
+  return (
+    <div className="hidden md:flex">
+      {navbarLinks.map((item) => {
+        let shouldRender = item.dev ? ENV !== "production" : true;
+        return (
+          shouldRender && (
+            <NavLink
+              key={item.id}
+              to={item.url}
+              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>
+  );
+}
+
 function Header({ onToggleNavbar }: HeaderProps) {
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
@@ -110,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">
@@ -118,12 +171,13 @@ function Header({ onToggleNavbar }: HeaderProps) {
             </div>
           )}
         </Link>
+        <HeaderNavigation />
       </div>
       <div className="flex flex-shrink-0 md:gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button size="icon" variant="ghost">
-              <LuMoreVertical />
+              <LuSettings />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="md:w-72 mr-5">
@@ -257,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}