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

Optimize various pages

Browse source
This commit is contained in:
jeffvli 2023-06-01 20:08:43 -07:00
parent e7c7eb3ec0
commit 17b1acad9d
4 changed files with 101 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { createPolymorphicComponent, Flex } from '@mantine/core';
import { motion } from 'framer-motion';
import { forwardRef } from 'react';
import { useMatch } from 'react-router';
import styled from 'styled-components';
import { Text } from '/@/renderer/components';
@ -62,29 +63,32 @@ const ActiveTabIndicator = styled(motion.div)`
`;
interface CollapsedSidebarItemProps {
active?: boolean;
activeIcon: React.ReactNode;
disabled?: boolean;
icon: React.ReactNode;
label: string;
route?: string;
}
const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
({ active, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
const match = useMatch(route || '/null');
const isMatch = Boolean(match);
return (
<Container
ref={ref}
$active={active}
$active={Boolean(match)}
$disabled={disabled}
align="center"
direction="column"
{...props}
>
{active && <ActiveTabIndicator layoutId="active-tab-indicator" />}
{active ? activeIcon : icon}
{isMatch ? <ActiveTabIndicator /> : null}
{isMatch ? activeIcon : icon}
<TextWrapper>
<Text
$secondary={!active}
$secondary={!isMatch}
fw="600"
overflow="hidden"
size="xs"