Make collapsed sidebar navigation configurable

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

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,6 +119,7 @@ export const CollapsedSidebar = () => {
                 scrollHideDelay={0}
                 scrollbarSize={8}
             >
+                {sidebarCollapsedNavigation && (
                     <Group
                         grow
                         spacing={0}
@@ -139,6 +140,7 @@ export const CollapsedSidebar = () => {
                             <RiArrowRightSLine size="22" />
                         </CollapsedSidebarButton>
                     </Group>
+                )}
                 <DropdownMenu position="right-start">
                     <DropdownMenu.Target>
                         <CollapsedSidebarItem

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: {