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

Add navigation buttons to the collapsed sidebar (#203)

Browse source
This commit is contained in:
jeffvli 2023-09-22 15:33:28 -07:00
parent 45b80ac395
commit 0cba405b45
2 changed files with 91 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { UnstyledButton } from '@mantine/core';
import { Group, UnstyledButton } from '@mantine/core';
import { motion } from 'framer-motion';
import { useMemo } from 'react';
import { IconType } from 'react-icons';
@ -24,8 +24,10 @@ import {
RiSettings2Fill,
RiSettings2Line,
RiFlag2Line,
RiArrowLeftSLine,
RiArrowRightSLine,
} from 'react-icons/ri';
import { generatePath, NavLink } from 'react-router-dom';
import { generatePath, NavLink, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { LibraryItem } from '/@/renderer/api/types';
import { DropdownMenu, ScrollArea } from '/@/renderer/components';
@ -34,6 +36,7 @@ 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;
@ -90,6 +93,7 @@ const sidebarItemMap = {
};
export const CollapsedSidebar = () => {
const navigate = useNavigate();
const { windowBarStyle } = useWindowSettings();
const { sidebarItems } = useGeneralSettings();
@ -115,6 +119,26 @@ export const CollapsedSidebar = () => {
scrollHideDelay={0}
scrollbarSize={8}
>
<Group
grow
spacing={0}
style={{
borderRight: 'var(--sidebar-border)',
}}
>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="22" />
</CollapsedSidebarButton>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="22" />
</CollapsedSidebarButton>
</Group>
<DropdownMenu position="right-start">
<DropdownMenu.Target>
<CollapsedSidebarItem