layout cleanup wip

src/Nav/BottomNav.tsx

@@ -0,0 +1,21 @@
+import type React from "react";
+
+import { GitBranchIcon } from "@primer/octicons-react";
+
+export interface BottomNavProps {
+  children: React.ReactNode;
+}
+
+export const BottomNav = ({ children }: BottomNavProps): JSX.Element => {
+  return (
+    <div className="flex bg-backgroundPrimary">
+      <div className="flex h-8 cursor-pointer select-none gap-1 bg-accent px-1 text-textPrimary hover:brightness-hover active:brightness-press">
+        <GitBranchIcon className="my-auto w-4" />
+        <span className="my-auto font-mono text-sm">
+          {process.env.COMMIT_HASH}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+};

src/Nav/NavSpacer.tsx

@@ -0,0 +1,5 @@
+import type React from "react";
+
+export const NavSpacer = (): JSX.Element => {
+  return <div className="h-1 w-10 rounded-full bg-accentMuted" />;
+};

src/Nav/PageNav.tsx

@@ -0,0 +1,76 @@
+import type React from "react";
+import type { SVGProps } from "react";
+
+import { useDevice } from "@app/core/providers/useDevice.js";
+import type { Page } from "@app/core/stores/deviceStore.js";
+import {
+  BeakerIcon,
+  ChatBubbleBottomCenterTextIcon,
+  Cog8ToothIcon,
+  MapIcon,
+  Square3Stack3DIcon,
+  UsersIcon
+} from "@heroicons/react/24/outline";
+
+export const PageNav = (): JSX.Element => {
+  const { activePage, setActivePage } = useDevice();
+
+  interface NavLink {
+    name: string;
+    icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+    page: Page;
+  }
+
+  const pages: NavLink[] = [
+    {
+      name: "Messages",
+      icon: ChatBubbleBottomCenterTextIcon,
+      page: "messages"
+    },
+    {
+      name: "Map",
+      icon: MapIcon,
+      page: "map"
+    },
+    {
+      name: "Extensions",
+      icon: BeakerIcon,
+      page: "extensions"
+    },
+    {
+      name: "Config",
+      icon: Cog8ToothIcon,
+      page: "config"
+    },
+    {
+      name: "Channels",
+      icon: Square3Stack3DIcon,
+      page: "channels"
+    },
+    {
+      name: "Peers",
+      icon: UsersIcon,
+      page: "peers"
+    }
+  ];
+
+  return (
+    <div className="flex text-textPrimary">
+      {pages.map((Link) => (
+        <div
+          key={Link.name}
+          onClick={() => {
+            setActivePage(Link.page);
+          }}
+          className={`border-x-4 border-backgroundPrimary bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press ${
+            Link.page === activePage
+              ? "border-l-accent text-textPrimary"
+              : "text-textSecondary hover:text-textPrimary"
+          }`}
+        >
+          <Link.icon className="w-4" />
+        </div>
+      ))}
+    </div>
+  );
+};