+ {pages.map((Link) => (
+
+ );
+};
diff --git a/src/PageRouter.tsx b/src/PageRouter.tsx
index 5756f183..3e5e617f 100644
--- a/src/PageRouter.tsx
+++ b/src/PageRouter.tsx
@@ -4,8 +4,6 @@ import { useDevice } from "@core/providers/useDevice.js";
import { ChannelsPage } from "@pages/Channels.js";
import { ConfigPage } from "@pages/Config/index.js";
import { ExtensionsPage } from "@pages/Extensions/Index.js";
-import { InfoPage } from "@pages/Info.js";
-import { LogsPage } from "@pages/Logs.js";
import { MapPage } from "@pages/Map.js";
import { MessagesPage } from "@pages/Messages.js";
import { PeersPage } from "@pages/Peers.js";
@@ -13,15 +11,13 @@ import { PeersPage } from "@pages/Peers.js";
export const PageRouter = (): JSX.Element => {
const { activePage } = useDevice();
return (
- {
+ 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"
+ }`}
+ >
+
+ ))}
+
+
{activePage === "messages" &&
);
};
diff --git a/src/components/CommandPalette/Index.tsx b/src/components/CommandPalette/Index.tsx
index df8e3974..f48f0651 100644
--- a/src/components/CommandPalette/Index.tsx
+++ b/src/components/CommandPalette/Index.tsx
@@ -24,8 +24,6 @@ import {
Cog8ToothIcon,
CubeTransparentIcon,
DevicePhoneMobileIcon,
- DocumentTextIcon,
- IdentificationIcon,
InboxIcon,
LinkIcon,
MapIcon,
@@ -135,20 +133,6 @@ export const CommandPalette = (): JSX.Element => {
action() {
setActivePage("peers");
}
- },
- {
- name: "Info",
- icon: IdentificationIcon,
- action() {
- setActivePage("info");
- }
- },
- {
- name: "Logs",
- icon: DocumentTextIcon,
- action() {
- setActivePage("logs");
- }
}
]
},
diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx
index d780ed96..88581fd0 100644
--- a/src/components/DeviceSelector.tsx
+++ b/src/components/DeviceSelector.tsx
@@ -2,52 +2,64 @@ import type React from "react";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { NavSpacer } from "@app/Nav/NavSpacer.js";
+import { PageNav } from "@app/Nav/PageNav.js";
import { Mono } from "@components/generic/Mono.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
-import { MoonIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { IconButton } from "./form/IconButton.js";
+import { PlusIcon } from "@heroicons/react/24/outline";
export const DeviceSelector = (): JSX.Element => {
const { getDevices } = useDeviceStore();
const { selectedDevice, setSelectedDevice, darkMode } = useAppStore();
return (
-
- Connected Devices
-
- {getDevices().map((device) => (
+
-
+
+
{tabs.map((tab, index) => (
{({ selected }) => (
@@ -26,7 +26,7 @@ export const Drawer = (): JSX.Element => {
onClick={() => {
setDrawerOpen(true);
}}
- className={`flex h-full cursor-pointer border-b-2 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
+ className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
selected
? "border-accent text-textPrimary"
: "border-backgroundPrimary text-textSecondary"
diff --git a/src/components/PageNav.tsx b/src/components/PageNav.tsx
deleted file mode 100644
index 2730d206..00000000
--- a/src/components/PageNav.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import type React from "react";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
-import type { Page } from "@app/core/stores/deviceStore.js";
-import {
- BeakerIcon,
- Cog8ToothIcon,
- DocumentTextIcon,
- IdentificationIcon,
- InboxIcon,
- MapIcon,
- Square3Stack3DIcon,
- UsersIcon
-} from "@heroicons/react/24/outline";
-
-export const PageNav = (): JSX.Element => {
- const { activePage, setActivePage } = useDevice();
-
- interface NavLink {
- name: string;
- icon: JSX.Element;
- page: Page;
- }
-
- const pages: NavLink[] = [
- {
- name: "Messages",
- icon:
+ 
);
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index d5197452..f3a2a9a2 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -17,8 +17,8 @@ export const Drawer = (): JSX.Element => {
{ name: "Sensor", element: Sensor }
];
return (
-
+ Connected Devices
+
+ {getDevices().map((device) => (
+
+
+ {selectedDevice !== 0 && (
+ <>
+ {
+ setSelectedDevice(device.id);
+ }}
+ className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
+ selectedDevice === device.id ? "border-l-accent" : ""
+ }`}
+ >
+
+ ))}
{
- setSelectedDevice(device.id);
+ setSelectedDevice(0);
}}
- className="group flex h-8 w-8 cursor-pointer bg-backgroundPrimary p-0.5 drop-shadow-md hover:brightness-hover"
+ className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
+ selectedDevice === 0 ? "border-l-accent" : ""
+ }`}
>
-
- ))}
- {
- setSelectedDevice(0);
- }}
- className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
- >
-
-
+
+ //actions
+
-
- {pages.map((Link) => (
-
- );
-};
diff --git a/src/components/form/IconButton.tsx b/src/components/form/IconButton.tsx
index b499c331..37c5b329 100644
--- a/src/components/form/IconButton.tsx
+++ b/src/components/form/IconButton.tsx
@@ -16,7 +16,7 @@ export const IconButton = ({
}: IconButtonProps): JSX.Element => {
return (
{
- setActivePage(Link.page);
- }}
- className={`hover:border-orange-300 h-9 w-9 cursor-pointer border-l-2 p-1.5 ${
- Link.page === activePage
- ? "border-accent text-textPrimary"
- : "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
- }`}
- >
- {Link.icon}
-
- ))}
-
-