Add navigation buttons to the collapsed sidebar (#203)

src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, ReactNode } from 'react';
+import { createPolymorphicComponent, Flex } from '@mantine/core';
+import styled from 'styled-components';
+
+const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 65px;
+    pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
+    cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
+    user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
+    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);
+          }
+        }
+    `}
+`;
+
+interface CollapsedSidebarButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+}
+
+const _CollapsedSidebarButton = forwardRef<HTMLDivElement, CollapsedSidebarButtonProps>(
+    ({ children, ...props }: CollapsedSidebarButtonProps, ref) => {
+        return (
+            <Container
+                ref={ref}
+                align="center"
+                direction="column"
+                {...props}
+            >
+                {children}
+            </Container>
+        );
+    },
+);
+
+export const CollapsedSidebarButton = createPolymorphicComponent<
+    'button',
+    CollapsedSidebarButtonProps
+>(_CollapsedSidebarButton);

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -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