Add ScrollArea to NavBar.tsx

sdss · Aug 31, 2024 · 795fea2 · 795fea2
1 parent 116f062
commit 795fea2
Showing 1 changed file with 56 additions and 50 deletions.
diff --git a/src/components/LVMWebRoot/LVMAppShell/NavBar/NavBar.tsx b/src/components/LVMWebRoot/LVMAppShell/NavBar/NavBar.tsx
@@ -9,7 +9,7 @@
 
 import NavAccordion from '@/src/components/NavAccordion/NavAccordion';
 import NavAccordionItem from '@/src/components/NavAccordionItem/NavAccordionItem';
-import { Box, Stack } from '@mantine/core';
+import { Box, ScrollArea, Stack } from '@mantine/core';
 import {
   IconCloudRain,
   IconDeviceComputerCamera,
@@ -23,58 +23,64 @@ import NavBarItem from './NavBarItem/NavBarItem';
 
 export default function NavBar() {
   return (
-    <Stack p={16} mt={2} gap="xs">
-      <NavBarItem path="/overview" icon={<IconHome />} text="Overview" />
-      <NavBarItem path="/gort-log" icon={<IconNotebook />} text="GORT Log" />
-      <NavBarItem path="/exposure-list" icon={<IconLogs />} text="Exposure List" />
-      <NavBarItem
-        path="https://localhost:18888/"
-        icon={<IconDeviceComputerCamera />}
-        text="Webcams"
-        external
-        newWindow
-      />
-      <NavBarItem
-        path="https://weather.lco.cl"
-        icon={<IconCloudRain />}
-        text="Weather"
-        external
-        newWindow
-      />
-
-      <Box pt={8} />
-      <NavAccordion value="Telescopes" open icon={IconTelescope}>
-        <NavAccordionItem value="Position" href="/telescopes/position" />
-        <NavAccordionItem value="Science" href="/telescopes/sci" />
-        <NavAccordionItem value="Spec" href="/telescopes/spec" />
-        <NavAccordionItem value="Sky-E" href="/telescopes/skye" />
-        <NavAccordionItem value="Sky-W" href="/telescopes/skyw" />
-        <NavAccordionItem value="MoTAN" href="/telescopes/motan" />
-      </NavAccordion>
-
-      <NavAccordion value="Links" icon={IconLink}>
-        <NavAccordionItem value="Grafana" href="https://lvm-grafana.lco.cl" external />
-        <NavAccordionItem
-          value="Kubernetes"
-          href="https://localhost:8443/#/pod?namespace=_all"
-          external
-        />
-        <NavAccordionItem
-          value="RabbitMQ"
-          href="http://localhost:8080/rabbitmq"
+    <ScrollArea type="never">
+      <Stack p={16} mt={2} gap="xs">
+        <NavBarItem path="/overview" icon={<IconHome />} text="Overview" />
+        <NavBarItem path="/gort-log" icon={<IconNotebook />} text="GORT Log" />
+        <NavBarItem path="/exposure-list" icon={<IconLogs />} text="Exposure List" />
+        <NavBarItem
+          path="https://localhost:18888/"
+          icon={<IconDeviceComputerCamera />}
+          text="Webcams"
           external
+          newWindow
         />
-        <NavAccordionItem
-          value="Obs. guide"
-          href="'https://lvmgort.readthedocs.io/en/latest/"
+        <NavBarItem
+          path="https://weather.lco.cl"
+          icon={<IconCloudRain />}
+          text="Weather"
           external
+          newWindow
         />
-        <NavAccordionItem
-          value="GORT docs"
-          href="'https://lvmgort.readthedocs.io/en/latest/"
-          external
-        />
-      </NavAccordion>
-    </Stack>
+
+        <Box pt={8} />
+        <NavAccordion value="Telescopes" open icon={IconTelescope}>
+          <NavAccordionItem value="Position" href="/telescopes/position" />
+          <NavAccordionItem value="Science" href="/telescopes/sci" />
+          <NavAccordionItem value="Spec" href="/telescopes/spec" />
+          <NavAccordionItem value="Sky-E" href="/telescopes/skye" />
+          <NavAccordionItem value="Sky-W" href="/telescopes/skyw" />
+          <NavAccordionItem value="MoTAN" href="/telescopes/motan" />
+        </NavAccordion>
+
+        <NavAccordion value="Links" icon={IconLink}>
+          <NavAccordionItem
+            value="Grafana"
+            href="https://lvm-grafana.lco.cl"
+            external
+          />
+          <NavAccordionItem
+            value="Kubernetes"
+            href="https://localhost:8443/#/pod?namespace=_all"
+            external
+          />
+          <NavAccordionItem
+            value="RabbitMQ"
+            href="http://localhost:8080/rabbitmq"
+            external
+          />
+          <NavAccordionItem
+            value="Obs. guide"
+            href="'https://lvmgort.readthedocs.io/en/latest/"
+            external
+          />
+          <NavAccordionItem
+            value="GORT docs"
+            href="'https://lvmgort.readthedocs.io/en/latest/"
+            external
+          />
+        </NavAccordion>
+      </Stack>
+    </ScrollArea>
   );
 }