antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Separate sidebar icons to new component

Browse source 
- Fixes react render issue
This commit is contained in:
jeffvli 2023-10-17 05:46:42 -07:00
parent 3675146f1f
commit cbeb4ab7d8
3 changed files with 109 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file

@ -1,42 +1,16 @@
import { Group, UnstyledButton } from '@mantine/core';
import { motion } from 'framer-motion';
import { useMemo } from 'react';
import { IconType } from 'react-icons';
import {
RiUserVoiceLine,
RiMenuFill,
RiFolder3Line,
RiPlayListLine,
RiAlbumLine,
RiHome6Line,
RiMusic2Line,
RiHome6Fill,
RiAlbumFill,
RiMusic2Fill,
RiUserVoiceFill,
RiFlag2Fill,
RiFolder3Fill,
RiPlayListFill,
RiSearchLine,
RiSearchFill,
RiPlayFill,
RiPlayLine,
RiSettings2Fill,
RiSettings2Line,
RiFlag2Line,
RiArrowLeftSLine,
RiArrowRightSLine,
} from 'react-icons/ri';
import { generatePath, NavLink, useNavigate } from 'react-router-dom';
import { RiArrowLeftSLine, RiArrowRightSLine, RiMenuFill } from 'react-icons/ri';
import { NavLink, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { LibraryItem } from '/@/renderer/api/types';
import { DropdownMenu, ScrollArea } from '/@/renderer/components';
import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button';
import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { AppRoute } from '/@/renderer/router/routes';
import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
import { Platform } from '/@/renderer/types';
import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button';
const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>`
display: flex;
@ -49,65 +23,18 @@ const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>`
user-select: none;
`;
const sidebarItemMap = {
[AppRoute.HOME]: {
activeIcon: RiHome6Fill,
icon: RiHome6Line,
},
[AppRoute.LIBRARY_ALBUMS]: {
activeIcon: RiAlbumFill,
icon: RiAlbumLine,
},
[AppRoute.LIBRARY_ALBUM_ARTISTS]: {
activeIcon: RiUserVoiceFill,
icon: RiUserVoiceLine,
},
[AppRoute.PLAYLISTS]: {
activeIcon: RiPlayListFill,
icon: RiPlayListLine,
},
[AppRoute.LIBRARY_SONGS]: {
activeIcon: RiMusic2Fill,
icon: RiMusic2Line,
},
[AppRoute.LIBRARY_FOLDERS]: {
activeIcon: RiFolder3Fill,
icon: RiFolder3Line,
},
[AppRoute.LIBRARY_GENRES]: {
activeIcon: RiFlag2Fill,
icon: RiFlag2Line,
},
[generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
activeIcon: RiSearchFill,
icon: RiSearchLine,
},
[AppRoute.SETTINGS]: {
activeIcon: RiSettings2Fill,
icon: RiSettings2Line,
},
[AppRoute.NOW_PLAYING]: {
activeIcon: RiPlayFill,
icon: RiPlayLine,
},
};
export const CollapsedSidebar = () => {
const navigate = useNavigate();
const { windowBarStyle } = useWindowSettings();
const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
const sidebarItemsWithRoute: (SidebarItemType & {
activeIcon: IconType;
icon: IconType;
})[] = useMemo(() => {
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return [];
const items = sidebarItems
.filter((item) => !item.disabled)
.map((item) => ({
...item,
...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
}));
return items;
@ -157,9 +84,20 @@ export const CollapsedSidebar = () => {
{sidebarItemsWithRoute.map((item) => (
<CollapsedSidebarItem
key={item.id}
activeIcon={<item.activeIcon size="25" />}
activeIcon={
<SidebarIcon
active
route={item.route}
size="25"
/>
}
component={NavLink}
icon={<item.icon size="25" />}
icon={
<SidebarIcon
route={item.route}
size="25"
/>
}
label={item.label}
route={item.route}
to={item.route}