1import { create } from 'zustand';
 2import { subscribeWithSelector } from 'zustand/middleware';
 3import { PageType, Pages } from 'types';
 4import { chakra } from '@chakra-ui/react';
 5import { CubeIcon, HomeIcon, ServerIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline';
 6import { IconBaseStyle } from 'constants/IconBaseStyle';
 7
 8const UsersSidebarItemIcon = chakra(UsersIcon, IconBaseStyle);
 9const ServicesSidebarItemIcon = chakra(ServerStackIcon, IconBaseStyle);
10const NodesSidebarItemIcon = chakra(CubeIcon, IconBaseStyle);
11const HostSidebarItemIcon = chakra(ServerIcon, IconBaseStyle);
12const HomeSidebarItemIcon = chakra(HomeIcon, IconBaseStyle);
13
14
15export const pages: Pages = {
16  home: {
17    name: 'home',
18    path: '/',
19    itemIcon: HomeSidebarItemIcon,
20  },
21  users: {
22    name: 'users',
23    path: '/users',
24    itemIcon: UsersSidebarItemIcon,
25  },
26  services: {
27    name: 'services',
28    path: '/services',
29    itemIcon: ServicesSidebarItemIcon,
30  },
31  nodes: {
32    name: 'nodes',
33    path: '/nodes',
34    itemIcon: NodesSidebarItemIcon,
35  },
36  hosts: {
37    name: 'hosts',
38    path: '/hosts',
39    itemIcon: HostSidebarItemIcon,
40  },
41};
42
43type DashboardStateType = {
44  version: string | null;
45  loading: boolean;
46  activePage: PageType;
47  isCollapsed: boolean;
48  collapseSidebar: () => void;
49  expandSidebar: () => void;
50  activatePage: (pageId: PageType) => void;
51};
52
53export const useDashboard = create(
54  subscribeWithSelector<DashboardStateType>((set,) => ({
55    version: null,
56    loading: true,
57    activePage: pages.home,
58    isCollapsed: false,
59    expandSidebar: () => {
60      set({ isCollapsed: false })
61    },
62    collapseSidebar: () => {
63      set({ isCollapsed: true })
64    },
65    activatePage: (page) => {
66      set({ activePage: page });
67    },
68  }))
69);