From 47dc83f360b2a351d2322a80416f18630ecdf51f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 22 Sep 2023 17:55:03 -0700
Subject: [PATCH] Make collapsed sidebar navigation configurable

---
 .../components/general/sidebar-settings.tsx   | 19 +++++++++
 .../sidebar/components/collapsed-sidebar.tsx  | 42 ++++++++++---------
 src/renderer/store/settings.store.ts          |  2 +
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/renderer/features/settings/components/general/sidebar-settings.tsx b/src/renderer/features/settings/components/general/sidebar-settings.tsx
index e966c4e6..cb9952f1 100644
--- a/src/renderer/features/settings/components/general/sidebar-settings.tsx
+++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx
@@ -87,6 +87,15 @@ export const SidebarSettings = () => {
         });
     };
 
+    const handleSetSidebarCollapsedNavigation = (e: ChangeEvent<HTMLInputElement>) => {
+        setSettings({
+            general: {
+                ...settings,
+                sidebarCollapsedNavigation: e.target.checked,
+            },
+        });
+    };
+
     const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
 
     return (
@@ -101,6 +110,16 @@ export const SidebarSettings = () => {
                 description="Show playlist list in sidebar"
                 title="Sidebar playlist list"
             />
+            <SettingsOptions
+                control={
+                    <Switch
+                        checked={settings.sidebarCollapsedNavigation}
+                        onChange={handleSetSidebarCollapsedNavigation}
+                    />
+                }
+                description="Show navigation buttons in the collapsed sidebar"
+                title="Sidebar (collapsed) navigation"
+            />
             <SettingsOptions
                 control={
                     <Button
diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
index 846355fc..45371547 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@@ -95,7 +95,7 @@ const sidebarItemMap = {
 export const CollapsedSidebar = () => {
     const navigate = useNavigate();
     const { windowBarStyle } = useWindowSettings();
-    const { sidebarItems } = useGeneralSettings();
+    const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
 
     const sidebarItemsWithRoute: (SidebarItemType & {
         activeIcon: IconType;
@@ -119,26 +119,28 @@ export const CollapsedSidebar = () => {
                 scrollHideDelay={0}
                 scrollbarSize={8}
             >
-                <Group
-                    grow
-                    spacing={0}
-                    style={{
-                        borderRight: 'var(--sidebar-border)',
-                    }}
-                >
-                    <CollapsedSidebarButton
-                        component={UnstyledButton}
-                        onClick={() => navigate(-1)}
+                {sidebarCollapsedNavigation && (
+                    <Group
+                        grow
+                        spacing={0}
+                        style={{
+                            borderRight: 'var(--sidebar-border)',
+                        }}
                     >
-                        <RiArrowLeftSLine size="22" />
-                    </CollapsedSidebarButton>
-                    <CollapsedSidebarButton
-                        component={UnstyledButton}
-                        onClick={() => navigate(1)}
-                    >
-                        <RiArrowRightSLine size="22" />
-                    </CollapsedSidebarButton>
-                </Group>
+                        <CollapsedSidebarButton
+                            component={UnstyledButton}
+                            onClick={() => navigate(-1)}
+                        >
+                            <RiArrowLeftSLine size="22" />
+                        </CollapsedSidebarButton>
+                        <CollapsedSidebarButton
+                            component={UnstyledButton}
+                            onClick={() => navigate(1)}
+                        >
+                            <RiArrowRightSLine size="22" />
+                        </CollapsedSidebarButton>
+                    </Group>
+                )}
                 <DropdownMenu position="right-start">
                     <DropdownMenu.Target>
                         <CollapsedSidebarItem
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 9fdc6870..09cd8e3b 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -113,6 +113,7 @@ export interface SettingsState {
         resume: boolean;
         showQueueDrawerButton: boolean;
         sideQueueType: SideQueueType;
+        sidebarCollapsedNavigation: boolean;
         sidebarItems: SidebarItemType[];
         sidebarPlaylistList: boolean;
         skipButtons: {
@@ -208,6 +209,7 @@ const initialState: SettingsState = {
         resume: false,
         showQueueDrawerButton: false,
         sideQueueType: 'sideQueue',
+        sidebarCollapsedNavigation: true,
         sidebarItems,
         sidebarPlaylistList: true,
         skipButtons: {