Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging

src/renderer/features/player/components/left-controls.tsx

@@ -8,10 +8,10 @@ import { Button, Text } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
   useAppStoreActions,
-  useAppStore,
   useCurrentSong,
   useSetFullScreenPlayerStore,
   useFullScreenPlayerStore,
+  useSidebarStore,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { LibraryItem } from '/@/renderer/api/types';
@@ -45,6 +45,7 @@ const Image = styled(motion.div)`
   width: 60px;
   height: 60px;
   background-color: var(--placeholder-bg);
+  cursor: pointer;
   filter: drop-shadow(0 5px 6px rgb(0, 0, 0, 50%));
 
   ${fadeIn};
@@ -84,7 +85,9 @@ export const LeftControls = () => {
   const { setSideBar } = useAppStoreActions();
   const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
   const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-  const hideImage = useAppStore((state) => state.sidebar.image);
+  // const hideImage = useAppStore((state) => state.sidebar.image);
+  const { image, collapsed } = useSidebarStore();
+  const hideImage = image && !collapsed;
   const currentSong = useCurrentSong();
   const title = currentSong?.name;
   const artists = currentSong?.artists;
@@ -144,22 +147,23 @@ export const LeftControls = () => {
                     </Center>
                   </>
                 )}
-
+                {!collapsed && (
-                <Button
+                  <Button
-                  compact
+                    compact
-                  opacity={0.8}
+                    opacity={0.8}
-                  radius={50}
+                    radius={50}
-                  size="md"
+                    size="md"
-                  sx={{ position: 'absolute', right: 2, top: 2 }}
+                    sx={{ cursor: 'default', position: 'absolute', right: 2, top: 2 }}
-                  tooltip={{ label: 'Expand', openDelay: 500 }}
+                    tooltip={{ label: 'Expand', openDelay: 500 }}
-                  variant="default"
+                    variant="default"
-                  onClick={handleToggleSidebarImage}
+                    onClick={handleToggleSidebarImage}
-                >
+                  >
-                  <RiArrowUpSLine
+                    <RiArrowUpSLine
-                    color="white"
+                      color="white"
-                    size={20}
+                      size={20}
-                  />
+                    />
-                </Button>
+                  </Button>
+                )}
               </Image>
             </ImageWrapper>
           )}

src/renderer/features/sidebar/components/action-bar.tsx

@@ -27,7 +27,7 @@ export const ActionBar = () => {
       ref={cq.ref}
       gutter="sm"
     >
-      <Grid.Col span={cq.isSm ? 7 : 5}>
+      <Grid.Col span={cq.isSm ? 7 : 6}>
         <TextInput
           disabled
           readOnly
@@ -36,7 +36,7 @@ export const ActionBar = () => {
           size="md"
         />
       </Grid.Col>
-      <Grid.Col span={cq.isSm ? 5 : 7}>
+      <Grid.Col span={cq.isSm ? 5 : 6}>
         <Group
           grow
           noWrap

src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx

@@ -0,0 +1,100 @@
+import { createPolymorphicComponent, Flex } from '@mantine/core';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components';
+
+const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
+  position: relative;
+  width: 100%;
+  padding: 0.9rem 0.3rem;
+  border-right: var(--sidebar-border);
+  cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
+  opacity: ${(props) => props.$disabled && 0.6};
+
+  svg {
+    fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
+  }
+
+  &:focus-visible {
+    background-color: var(--sidebar-bg-hover);
+    outline: none;
+  }
+
+  ${(props) =>
+    !props.$disabled &&
+    `
+      &:hover {
+          background-color: var(--sidebar-bg-hover);
+
+          div {
+            color: var(--main-fg) !important;
+          }
+
+          svg {
+            fill: var(--primary-color);
+          }
+        }
+    `}
+`;
+
+const TextWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+`;
+
+const ActiveTabIndicator = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+  width: 2px;
+  height: 80%;
+  margin-top: auto;
+  margin-bottom: auto;
+  background: var(--primary-color);
+`;
+
+interface CollapsedSidebarItemProps {
+  active?: boolean;
+  activeIcon: React.ReactNode;
+  disabled?: boolean;
+  icon: React.ReactNode;
+  label: string;
+}
+
+const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
+  ({ active, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
+    return (
+      <Container
+        ref={ref}
+        $active={active}
+        $disabled={disabled}
+        align="center"
+        direction="column"
+        {...props}
+      >
+        {active && <ActiveTabIndicator layoutId="active-tab-indicator" />}
+        {active ? activeIcon : icon}
+        <TextWrapper>
+          <Text
+            $secondary={!active}
+            fw="600"
+            overflow="hidden"
+            size="xs"
+          >
+            {label}
+          </Text>
+        </TextWrapper>
+      </Container>
+    );
+  },
+);
+
+export const CollapsedSidebarItem = createPolymorphicComponent<'button', CollapsedSidebarItemProps>(
+  _CollapsedSidebarItem,
+);

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -0,0 +1,123 @@
+import { UnstyledButton } from '@mantine/core';
+import { motion } from 'framer-motion';
+import {
+  RiUserVoiceLine,
+  RiMenuFill,
+  RiFlag2Line,
+  RiFolder3Line,
+  RiPlayListLine,
+  RiAlbumLine,
+  RiHome6Line,
+  RiMusic2Line,
+  RiHome6Fill,
+  RiAlbumFill,
+  RiMusic2Fill,
+  RiUserVoiceFill,
+  RiFlag2Fill,
+  RiFolder3Fill,
+  RiPlayListFill,
+} from 'react-icons/ri';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { DropdownMenu, ScrollArea } from '/@/renderer/components';
+import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useWindowSettings } from '/@/renderer/store';
+import { Platform } from '/@/renderer/types';
+
+const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: ${(props) =>
+    props.windowBarStyle === Platform.WEB
+      ? 'calc(100vh - 149px)'
+      : 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
+  user-select: none;
+`;
+
+export const CollapsedSidebar = () => {
+  const location = useLocation();
+  const { windowBarStyle } = useWindowSettings();
+
+  return (
+    <SidebarContainer windowBarStyle={windowBarStyle}>
+      <ScrollArea
+        scrollHideDelay={0}
+        scrollbarSize={8}
+      >
+        <DropdownMenu position="right-start">
+          <DropdownMenu.Target>
+            <CollapsedSidebarItem
+              activeIcon={<RiMenuFill size="25" />}
+              component={UnstyledButton}
+              icon={<RiMenuFill size="25" />}
+              label="Menu"
+            />
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <AppMenu />
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.HOME}
+          activeIcon={<RiHome6Fill size="25" />}
+          component={Link}
+          icon={<RiHome6Line size="25" />}
+          label="Home"
+          to={AppRoute.HOME}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_ALBUMS}
+          activeIcon={<RiAlbumFill size="25" />}
+          component={Link}
+          icon={<RiAlbumLine size="25" />}
+          label="Albums"
+          to={AppRoute.LIBRARY_ALBUMS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_SONGS}
+          activeIcon={<RiMusic2Fill size="25" />}
+          component={Link}
+          icon={<RiMusic2Line size="25" />}
+          label="Tracks"
+          to={AppRoute.LIBRARY_SONGS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS}
+          activeIcon={<RiUserVoiceFill size="25" />}
+          component={Link}
+          icon={<RiUserVoiceLine size="25" />}
+          label="Artists"
+          to={AppRoute.LIBRARY_ALBUM_ARTISTS}
+        />
+        <CollapsedSidebarItem
+          disabled
+          activeIcon={<RiFlag2Fill size="25" />}
+          component={Link}
+          icon={<RiFlag2Line size="25" />}
+          label="Genres"
+          to={AppRoute.LIBRARY_GENRES}
+        />
+        <CollapsedSidebarItem
+          disabled
+          activeIcon={<RiFolder3Fill size="25" />}
+          component={Link}
+          icon={<RiFolder3Line size="25" />}
+          label="Folders"
+          to={AppRoute.LIBRARY_FOLDERS}
+        />
+        <CollapsedSidebarItem
+          active={location.pathname === AppRoute.PLAYLISTS}
+          activeIcon={<RiPlayListFill size="25" />}
+          component={Link}
+          icon={<RiPlayListLine size="25" />}
+          label="Playlists"
+          to={AppRoute.PLAYLISTS}
+        />
+      </ScrollArea>
+    </SidebarContainer>
+  );
+};

src/renderer/features/sidebar/components/sidebar.tsx

@@ -13,8 +13,8 @@ import {
   RiDiscLine,
   RiFlag2Line,
   RiFolder3Line,
-  RiHome5Fill,
+  RiHome6Fill,
-  RiHome5Line,
+  RiHome6Line,
   RiListUnordered,
   RiMusic2Fill,
   RiMusic2Line,
@@ -54,6 +54,7 @@ const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
 const ImageContainer = styled(motion.div)<{ height: string }>`
   position: relative;
   height: ${(props) => props.height};
+  cursor: pointer;
 
   ${fadeIn};
   animation: fadein 0.2s ease-in-out;
@@ -141,9 +142,9 @@ export const Sidebar = () => {
             >
               <Group spacing="sm">
                 {location.pathname === AppRoute.HOME ? (
-                  <RiHome5Fill size="1.3em" />
+                  <RiHome6Fill size="1.3em" />
                 ) : (
-                  <RiHome5Line size="1.3em" />
+                  <RiHome6Line size="1.3em" />
                 )}
                 Home
               </Group>
@@ -305,7 +306,7 @@ export const Sidebar = () => {
                 opacity={0.8}
                 radius={100}
                 size="md"
-                sx={{ position: 'absolute', right: 5, top: 5 }}
+                sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
                 tooltip={{ label: 'Collapse', openDelay: 500 }}
                 variant="default"
                 onClick={(e) => {

src/renderer/features/titlebar/components/app-menu.tsx

@@ -3,10 +3,14 @@ import { openModal, closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import {
   RiLockLine,
-  RiServerFill,
-  RiEdit2Fill,
-  RiSettings3Fill,
   RiWindowFill,
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+  RiLayoutRightLine,
+  RiLayoutLeftLine,
+  RiEdit2Line,
+  RiSettings3Line,
+  RiServerLine,
 } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -14,7 +18,13 @@ import { DropdownMenu } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useServerList, useAuthStoreActions } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useServerList,
+  useAuthStoreActions,
+  useSidebarStore,
+  useAppStoreActions,
+} from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 
 const browser = isElectron() ? window.electron.browser : null;
@@ -24,6 +34,8 @@ export const AppMenu = () => {
   const currentServer = useCurrentServer();
   const serverList = useServerList();
   const { setCurrentServer } = useAuthStoreActions();
+  const { collapsed } = useSidebarStore();
+  const { setSideBar } = useAppStoreActions();
 
   const handleSetCurrentServer = (server: ServerListItem) => {
     navigate(AppRoute.HOME);
@@ -55,6 +67,14 @@ export const AppMenu = () => {
     browser?.devtools();
   };
 
+  const handleCollapseSidebar = () => {
+    setSideBar({ collapsed: true });
+  };
+
+  const handleExpandSidebar = () => {
+    setSideBar({ collapsed: false });
+  };
+
   const showBrowserDevToolsButton = isElectron();
 
   return (
@@ -70,7 +90,7 @@ export const AppMenu = () => {
           <DropdownMenu.Item
             key={`server-${server.id}`}
             $isActive={server.id === currentServer?.id}
-            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
+            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerLine />}
             onClick={() => {
               if (!isSessionExpired) return handleSetCurrentServer(server);
               return handleCredentialsModal(server);
@@ -82,18 +102,46 @@ export const AppMenu = () => {
       })}
       <DropdownMenu.Divider />
       <DropdownMenu.Item
-        icon={<RiEdit2Fill />}
+        icon={<RiEdit2Line />}
         onClick={handleManageServersModal}
       >
         Manage servers
       </DropdownMenu.Item>
       <DropdownMenu.Item
         component={Link}
-        icon={<RiSettings3Fill />}
+        icon={<RiSettings3Line />}
         to={AppRoute.SETTINGS}
       >
         Settings
       </DropdownMenu.Item>
+      <DropdownMenu.Divider />
+      <DropdownMenu.Item
+        icon={<RiArrowLeftSLine />}
+        onClick={() => navigate(-1)}
+      >
+        Go back
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        icon={<RiArrowRightSLine />}
+        onClick={() => navigate(1)}
+      >
+        Go forward
+      </DropdownMenu.Item>
+      {collapsed ? (
+        <DropdownMenu.Item
+          icon={<RiLayoutRightLine />}
+          onClick={handleExpandSidebar}
+        >
+          Expand sidebar
+        </DropdownMenu.Item>
+      ) : (
+        <DropdownMenu.Item
+          icon={<RiLayoutLeftLine />}
+          onClick={handleCollapseSidebar}
+        >
+          Collapse sidebar
+        </DropdownMenu.Item>
+      )}
       {showBrowserDevToolsButton && (
         <>
           <DropdownMenu.Divider />

src/renderer/layouts/default-layout/main-content.tsx

@@ -8,25 +8,31 @@ import styled from 'styled-components';
 import { DrawerPlayQueue, SidebarPlayQueue } from '/@/renderer/features/now-playing';
 import { FullScreenPlayer } from '/@/renderer/features/player/components/full-screen-player';
 import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
+import { CollapsedSidebar } from '../../features/sidebar/components/collapsed-sidebar';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useAppStoreActions, useFullScreenPlayerStore } from '/@/renderer/store';
 import { useWindowSettings, useGeneralSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/utils';
 
+const MINIMUM_SIDEBAR_WIDTH = 260;
+
 const MainContentContainer = styled.div<{
   leftSidebarWidth: string;
   rightExpanded?: boolean;
   rightSidebarWidth?: string;
   shell?: boolean;
+  sidebarCollapsed?: boolean;
 }>`
   position: relative;
   display: ${(props) => (props.shell ? 'flex' : 'grid')};
   grid-area: main-content;
   grid-template-areas: 'sidebar . right-sidebar';
   grid-template-rows: 1fr;
-  grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
+  grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
-      props.rightExpanded && props.rightSidebarWidth};
+      props,
+    ) => props.rightExpanded && props.rightSidebarWidth};
+
   gap: 0;
   background: var(--main-bg);
 `;
@@ -56,14 +62,25 @@ const ResizeHandle = styled.div<{
   bottom: ${(props) => props.placement === 'bottom' && 0};
   left: ${(props) => props.placement === 'left' && 0};
   z-index: 90;
-  width: 2px;
+  width: 4px;
   height: 100%;
-  background-color: var(--sidebar-handle-bg);
   cursor: ew-resize;
   opacity: ${(props) => (props.isResizing ? 1 : 0)};
 
   &:hover {
-    opacity: 0.5;
+    opacity: 0.7;
+  }
+
+  &::before {
+    position: absolute;
+    top: ${(props) => props.placement === 'top' && 0};
+    right: ${(props) => props.placement === 'right' && 0};
+    bottom: ${(props) => props.placement === 'bottom' && 0};
+    left: ${(props) => props.placement === 'left' && 0};
+    width: 1px;
+    height: 100%;
+    background-color: var(--sidebar-handle-bg);
+    content: '';
   }
 `;
 
@@ -193,10 +210,15 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
   const resize = useCallback(
     (mouseMoveEvent: any) => {
       if (isResizing) {
-        const width = `${constrainSidebarWidth(mouseMoveEvent.clientX)}px`;
+        const width = mouseMoveEvent.clientX;
-        setSideBar({ leftWidth: width });
+        const constrainedWidth = `${constrainSidebarWidth(width)}px`;
-      }
+
-      if (isResizingRight) {
+        if (width < MINIMUM_SIDEBAR_WIDTH - 100) {
+          setSideBar({ collapsed: true });
+        } else {
+          setSideBar({ collapsed: false, leftWidth: constrainedWidth });
+        }
+      } else if (isResizingRight) {
         const start = Number(sidebar.rightWidth.split('px')[0]);
         const { left } = rightSidebarRef!.current!.getBoundingClientRect();
         const width = `${constrainRightSidebarWidth(start + left - mouseMoveEvent.clientX)}px`;
@@ -224,6 +246,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
       rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
       rightSidebarWidth={sidebar.rightWidth}
       shell={shell}
+      sidebarCollapsed={sidebar.collapsed}
     >
       {!shell && (
         <>
@@ -243,7 +266,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
                 startResizing('left');
               }}
             />
-            <Sidebar />
+            {sidebar.collapsed ? <CollapsedSidebar /> : <Sidebar />}
           </SidebarContainer>
           <AnimatePresence
             initial={false}

src/renderer/router/routes.ts

@@ -12,6 +12,7 @@ export enum AppRoute {
   LIBRARY_ARTISTS = '/library/artists',
   LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
   LIBRARY_FOLDERS = '/library/folders',
+  LIBRARY_GENRES = '/library/genres',
   LIBRARY_SONGS = '/library/songs',
   NOW_PLAYING = '/now-playing',
   PLAYING = '/playing',

src/renderer/store/app.store.ts

@@ -5,6 +5,7 @@ import { immer } from 'zustand/middleware/immer';
 import { Platform } from '/@/renderer/types';
 
 type SidebarProps = {
+  collapsed: boolean;
   expanded: string[];
   image: boolean;
   leftWidth: string;
@@ -20,13 +21,7 @@ type TitlebarProps = {
 export interface AppState {
   isReorderingQueue: boolean;
   platform: Platform;
-  sidebar: {
+  sidebar: SidebarProps;
-    expanded: string[];
-    image: boolean;
-    leftWidth: string;
-    rightExpanded: boolean;
-    rightWidth: string;
-  };
   titlebar: TitlebarProps;
 }
 
@@ -60,6 +55,7 @@ export const useAppStore = create<AppSlice>()(
         isReorderingQueue: false,
         platform: Platform.WINDOWS,
         sidebar: {
+          collapsed: false,
           expanded: [],
           image: false,
           leftWidth: '400px',
@@ -78,7 +74,7 @@ export const useAppStore = create<AppSlice>()(
         return merge(currentState, persistedState);
       },
       name: 'store_app',
-      version: 1,
+      version: 2,
     },
   ),
 );

src/renderer/themes/default.scss

@@ -21,6 +21,7 @@
   --titlebar-controls-bg: rgba(0, 0, 0, 0);
 
   --sidebar-bg: rgb(0, 0, 0);
+  --sidebar-bg-hover: rgb(50, 50, 50);
   --sidebar-fg: rgb(210, 210, 210);
   --sidebar-fg-hover: rgb(255, 255, 255);
   --sidebar-handle-bg: #4d4d4d;

src/renderer/themes/light.scss

@@ -10,6 +10,7 @@ body[data-theme='defaultLight'] {
   --titlebar-controls-bg: rgba(0, 0, 0, 0);
 
   --sidebar-bg: rgb(240, 241, 242);
+  --sidebar-bg-hover: rgb(200, 200, 200);
   --sidebar-fg: rgb(0, 0, 0);
   --sidebar-fg-hover: rgb(85, 85, 85);
   --sidebar-handle-bg: rgb(220, 220, 220);