From a9d18ba28fbb20db4e832f8407be877d587f3365 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 16 Oct 2023 20:34:21 +1100
Subject: [PATCH] Improved implementation of panel collapse (#5708)

* Improved implementation of panel collapse

* Slight tweaks
---
 .../src/components/nav/PanelGroup.tsx         | 71 ++++++++++---------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx
index 8c1ec161b2..89dfa17149 100644
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -1,4 +1,8 @@
-import { Divider, Group, Paper, Stack, Tabs, Tooltip } from '@mantine/core';
+import { Divider, Paper, Stack, Tabs, Tooltip } from '@mantine/core';
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse
+} from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 
@@ -55,7 +59,7 @@ export function PanelGroup({
     }
   }
 
-  const [showText, setShowText] = useState<boolean>(true);
+  const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
     <Paper p="sm" radius="xs" shadow="xs">
@@ -65,37 +69,40 @@ export function PanelGroup({
         onTabChange={handlePanelChange}
         keepMounted={false}
       >
-        <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.List position="left">
+          {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}
                   >
-                    <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>
+                    {expanded && panel.label}
+                  </Tabs.Tab>
+                </Tooltip>
+              )
+          )}
+          <Tabs.Tab
+            key="panel-tab-collapse-toggle"
+            p="xs"
+            value="collapse-toggle"
+            onClick={() => setExpanded(!expanded)}
+            icon={
+              expanded ? (
+                <IconLayoutSidebarLeftCollapse opacity={0.35} size={18} />
+              ) : (
+                <IconLayoutSidebarRightCollapse opacity={0.35} size={18} />
+              )
+            }
+          />
+        </Tabs.List>
         {panels.map(
           (panel, idx) =>
             !panel.hidden && (