Add collapsible sidebar (#68)

- Sidebar can collapse by menu option or dragging

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>
+  );
+};