Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging

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,
-  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) => {