Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging
2026-01-01 10:23:33 +00:00 · 2023-05-10 18:20:04 -07:00 · 2023-05-10 18:20:04 -07:00 · e49fe6c452
commit e49fe6c452
parent ec7a053a74
11 changed files with 348 additions and 50 deletions
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/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>
                  </>
                )}
-
-                <Button
-                  compact
-                  opacity={0.8}
-                  radius={50}
-                  size="md"
-                  sx={{ position: 'absolute', right: 2, top: 2 }}
-                  tooltip={{ label: 'Expand', openDelay: 500 }}
-                  variant="default"
-                  onClick={handleToggleSidebarImage}
-                >
-                  <RiArrowUpSLine
-                    color="white"
-                    size={20}
-                  />
-                </Button>
+                {!collapsed && (
+                  <Button
+                    compact
+                    opacity={0.8}
+                    radius={50}
+                    size="md"
+                    sx={{ cursor: 'default', position: 'absolute', right: 2, top: 2 }}
+                    tooltip={{ label: 'Expand', openDelay: 500 }}
+                    variant="default"
+                    onClick={handleToggleSidebarImage}
+                  >
+                    <RiArrowUpSLine
+                      color="white"
+                      size={20}
+                    />
+                  </Button>
+                )}
              </Image>
            </ImageWrapper>
          )}
--- a/src/renderer/features/sidebar/components/action-bar.tsx
+++ b/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
--- a/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
+++ b/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,
+);
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/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>
+  );
+};
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@ -13,8 +13,8 @@ import {
  RiDiscLine,
  RiFlag2Line,
  RiFolder3Line,
-  RiHome5Fill,
-  RiHome5Line,
+  RiHome6Fill,
+  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) => {
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/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 />