From 5b57685ae33cb10fbb21be655d28532ef6ff2f07 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 16 Oct 2023 19:44:28 +1100
Subject: [PATCH] Adds toggle for text elements in panel tabs (#5706)

- Placeholder for now, UX could be better
- Just showing functionality for now
---
 .../src/components/nav/PanelGroup.tsx         | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx
index fb9332a8d4..8c1ec161b2 100644
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/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>
-          {panels.map(
-            (panel, idx) =>
-              !panel.hidden && (
-                <Tabs.Tab
-                  key={`panel-tab-${panel.name}`}
-                  p="xs"
-                  value={panel.name}
-                  icon={panel.icon}
-                  hidden={panel.hidden}
-                >
-                  {panel.label}
-                </Tabs.Tab>
-              )
-          )}
-        </Tabs.List>
+        <Group spacing="xs">
+          <Divider
+            size="md"
+            orientation="vertical"
+            onClick={() => setShowText(!showText)}
+            style={{
+              cursor: 'pointer'
+            }}
+          />
+          <Tabs.List>
+            {panels.map(
+              (panel, idx) =>
+                !panel.hidden && (
+                  <Tooltip
+                    label={panel.label}
+                    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 && (