Initial 1.3.x rework

src/components/layout/Sidebar/index.tsx

@@ -1,33 +1,120 @@
-import type React from 'react';
+import type React from "react";
+import { useState } from "react";
 
-import { Settings } from '@components/layout/Sidebar/Settings/Index';
-import { useAppSelector } from '@hooks/useAppSelector';
+import {
+  ArrayIcon,
+  GlobeIcon,
+  IconComponent,
+  InboxIcon,
+  InfoSignIcon,
+  LabTestIcon,
+  LayersIcon,
+  majorScale,
+  Pane,
+  SettingsIcon,
+  Tab,
+  Tablist,
+} from "evergreen-ui";
 
-export interface SidebarProps {
-  children: React.ReactNode;
-  setSettingsOpen: (settingsOpen: boolean) => void;
-  settingsOpen: boolean;
+import { PeersDialog } from "@app/components/Dialog/PeersDialog.js";
+import { Page, useDevice } from "@app/core/stores/deviceStore.js";
+
+import { DeviceCard } from "./DeviceCard.js";
+
+interface NavLink {
+  name: string;
+  icon: IconComponent;
+  page: Page;
+  disabled?: boolean;
 }
 
-export const Sidebar = ({
-  settingsOpen,
-  setSettingsOpen,
-  children,
-}: SidebarProps): JSX.Element => {
-  const appState = useAppSelector((state) => state.app);
+export const Sidebar = (): JSX.Element => {
+  const { activePage, setActivePage } = useDevice();
+  const [PeersDialogOpen, setPeersDialogOpen] = useState(false);
+
+  const navLinks: NavLink[] = [
+    {
+      name: "Messages",
+      icon: InboxIcon,
+      page: "messages",
+    },
+    {
+      name: "Map",
+      icon: GlobeIcon,
+      page: "map",
+      disabled: true,
+    },
+    {
+      name: "Extensions",
+      icon: LabTestIcon,
+      page: "extensions",
+    },
+    {
+      name: "Config",
+      icon: SettingsIcon,
+      page: "config",
+    },
+    {
+      name: "Channels",
+      icon: LayersIcon,
+      page: "channels",
+    },
+    {
+      name: "Info",
+      icon: InfoSignIcon,
+      page: "info",
+    },
+  ];
 
   return (
-    <div
-      className={`absolute z-20 h-full w-full flex-grow flex-col md:relative md:flex md:w-96 ${
-        appState.mobileNavOpen ? 'flex' : 'hidden'
-      }`}
+    <Pane
+      display="flex"
+      flexDirection="column"
+      width="100%"
+      flexGrow={1}
+      margin={majorScale(3)}
+      padding={majorScale(2)}
+      borderRadius={majorScale(1)}
+      background="white"
+      elevation={1}
     >
-      <div className="flex h-full w-full flex-col drop-shadow-xl dark:bg-primaryDark">
-        <div className="relative flex-grow gap-1">
-          <div className="absolute h-full w-full">{children}</div>
-          <Settings open={settingsOpen} setOpen={setSettingsOpen} />
-        </div>
-      </div>
-    </div>
+      <Tablist>
+        {navLinks.map((Link) => (
+          <Tab
+            key={Link.name}
+            gap={majorScale(2)}
+            disabled={Link.disabled}
+            direction="vertical"
+            isSelected={Link.page === activePage}
+            onSelect={() => {
+              setActivePage(Link.page);
+            }}
+          >
+            <Link.icon />
+            {Link.name}
+          </Tab>
+        ))}
+        <Tab
+          gap={5}
+          direction="vertical"
+          isSelected={PeersDialogOpen}
+          onSelect={() => {
+            setPeersDialogOpen(true);
+          }}
+        >
+          <ArrayIcon />
+          Peers
+        </Tab>
+      </Tablist>
+      <PeersDialog
+        isOpen={PeersDialogOpen}
+        close={() => {
+          setPeersDialogOpen(false);
+        }}
+      />
+      <Pane display="flex" flexGrow={1}>
+        <DeviceCard />
+      </Pane>
+    </Pane>
   );
 };