You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.9 KiB
89 lines
1.9 KiB
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: <InboxIcon />,
|
|
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"
|
|
},
|
|
{
|
|
name: "Info",
|
|
icon: <IdentificationIcon />,
|
|
page: "info"
|
|
},
|
|
{
|
|
name: "Logs",
|
|
icon: <DocumentTextIcon />,
|
|
page: "logs"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="flex h-full flex-shrink-0 whitespace-nowrap bg-backgroundPrimary text-sm [writing-mode:vertical-rl]">
|
|
<span className="mt-2 flex gap-2 font-bold">
|
|
{pages.map((Link) => (
|
|
<div
|
|
key={Link.name}
|
|
onClick={() => {
|
|
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}
|
|
</div>
|
|
))}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|