UI: Replaced enum infavor of hash keys

pkgs/ui/src/app/layout.tsx

@@ -8,6 +8,7 @@ import {
   IconButton,
   ThemeProvider,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import { ChangeEvent, useState } from "react";
 
@@ -38,8 +39,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useTheme();
+  const is_small = useMediaQuery(theme.breakpoints.down("sm"));
+
   let [useDarkTheme, setUseDarkTheme] = useState(false);
   let [showSidebar, setShowSidebar] = useState(true);
+
+  // If the screen is small, hide the sidebar
+  React.useEffect(() => {
+    if (is_small) {
+      setShowSidebar(false);
+    } else {
+      setShowSidebar(true);
+    }
+  }, [is_small]);
+
   React.useEffect(() => {
     if (useDarkTheme !== userPrefersDarkmode) {
       // Enable dark theme if the user prefers dark mode

pkgs/ui/src/app/nodes/NodeList.tsx

@@ -41,7 +41,7 @@ import {
 } from "@mui/material";
 import hexRgb from "hex-rgb";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { NodeStatus, TableData } from "@/data/nodeData";
+import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
 
 interface HeadCell {
   disablePadding: boolean;
@@ -379,7 +379,7 @@ function Row(props: {
   selected: string | undefined;
   setSelected: (a: string | undefined) => void;
 }) {
-  function renderStatus(status: NodeStatus) {
+  function renderStatus(status: NodeStatusKeys) {
     switch (status) {
       case NodeStatus.Online:
         return (

pkgs/ui/src/data/nodeData.tsx

@@ -1,20 +1,22 @@
 export interface TableData {
   name: string;
   id: string;
-  status: NodeStatus;
+  status: NodeStatusKeys;
   last_seen: number;
 }
 
-export enum NodeStatus {
+export const NodeStatus = {
-  Online,
+  Online: "Online",
-  Offline,
+  Offline: "Offline",
-  Pending,
+  Pending: "Pending",
 }
 
+export type NodeStatusKeys = typeof NodeStatus[keyof typeof NodeStatus];
+
 function createData(
   name: string,
   id: string,
-  status: NodeStatus,
+  status: NodeStatusKeys,
   last_seen: number,
 ): TableData {
   return {