Adds toggle for text elements in panel tabs (#5706)

- Placeholder for now, UX could be better
- Just showing functionality for now

src/frontend/src/components/nav/PanelGroup.tsx

@@ -1,4 +1,4 @@
-import { Divider, Paper, Stack, Tabs } from '@mantine/core';
+import { Divider, Group, Paper, Stack, Tabs, Tooltip } from '@mantine/core';
 import { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -55,6 +55,8 @@ export function PanelGroup({
     }
   }
 
+  const [showText, setShowText] = useState<boolean>(true);
+
   return (
     <Paper p="sm" radius="xs" shadow="xs">
       <Tabs
@@ -63,22 +65,37 @@ export function PanelGroup({
         onTabChange={handlePanelChange}
         keepMounted={false}
       >
-        <Tabs.List>
+        <Group spacing="xs">
-          {panels.map(
+          <Divider
-            (panel, idx) =>
+            size="md"
-              !panel.hidden && (
+            orientation="vertical"
-                <Tabs.Tab
+            onClick={() => setShowText(!showText)}
-                  key={`panel-tab-${panel.name}`}
+            style={{
-                  p="xs"
+              cursor: 'pointer'
-                  value={panel.name}
+            }}
-                  icon={panel.icon}
+          />
-                  hidden={panel.hidden}
+          <Tabs.List>
-                >
+            {panels.map(
-                  {panel.label}
+              (panel, idx) =>
-                </Tabs.Tab>
+                !panel.hidden && (
-              )
+                  <Tooltip
-          )}
+                    label={panel.label}
-        </Tabs.List>
+                    key={`panel-tab-tooltip-${panel.name}`}
+                  >
+                    <Tabs.Tab
+                      key={`panel-tab-${panel.name}`}
+                      p="xs"
+                      value={panel.name}
+                      icon={panel.icon}
+                      hidden={panel.hidden}
+                    >
+                      {showText && panel.label}
+                    </Tabs.Tab>
+                  </Tooltip>
+                )
+            )}
+          </Tabs.List>
+        </Group>
         {panels.map(
           (panel, idx) =>
             !panel.hidden && (