123 lines
3.8 KiB
TypeScript
123 lines
3.8 KiB
TypeScript
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>
|
|
);
|
|
};
|