78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import styled from '@emotion/styled';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { IconBook } from '@/app/_components/ui/icons';
|
|
import mq from '@/app/_components/ui/theme/mq';
|
|
import { Theme } from '@/app/_components/ui/theme/theme';
|
|
import UserGuideSidebarSection from '@/app/_components/user-guide/UserGuideSidebarSection';
|
|
import { USER_GUIDE_INDEX } from '@/content/user-guide/constants/UserGuideIndex';
|
|
|
|
const StyledContainer = styled.div`
|
|
${mq({
|
|
width: ['20%', '30%', '20%'],
|
|
display: ['none', 'flex', 'flex'],
|
|
flexDirection: 'column',
|
|
background: `${Theme.background.secondary}`,
|
|
borderRight: `1px solid ${Theme.background.transparent.medium}`,
|
|
borderBottom: `1px solid ${Theme.background.transparent.medium}`,
|
|
padding: `${Theme.spacing(10)} ${Theme.spacing(3)}`,
|
|
gap: `${Theme.spacing(6)}`,
|
|
})};
|
|
`;
|
|
|
|
const StyledHeading = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: ${Theme.spacing(2)};
|
|
font-size: ${Theme.font.size.sm};
|
|
font-weight: ${Theme.font.weight.medium};
|
|
`;
|
|
|
|
const StyledIconContainer = styled.div`
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
font-size: ${Theme.font.size.sm};
|
|
font-weight: ${Theme.font.weight.medium};
|
|
color: ${Theme.text.color.secondary};
|
|
border: 1px solid ${Theme.text.color.secondary};
|
|
border-radius: ${Theme.border.radius.sm};
|
|
padding: ${Theme.spacing(1)};
|
|
`;
|
|
|
|
const StyledHeadingText = styled.div`
|
|
cursor: pointer;
|
|
font-size: ${Theme.font.size.sm};
|
|
font-weight: ${Theme.font.weight.medium};
|
|
`;
|
|
|
|
const UserGuideSidebar = () => {
|
|
const router = useRouter();
|
|
return (
|
|
<StyledContainer>
|
|
<StyledHeading>
|
|
<StyledIconContainer>
|
|
<IconBook size={Theme.icon.size.md} />
|
|
</StyledIconContainer>
|
|
<StyledHeadingText onClick={() => router.push('/user-guide')}>
|
|
User Guide
|
|
</StyledHeadingText>
|
|
</StyledHeading>
|
|
{Object.entries(USER_GUIDE_INDEX).map(([heading, subtopics]) => (
|
|
<UserGuideSidebarSection
|
|
key={heading}
|
|
title={heading}
|
|
subTopics={subtopics}
|
|
/>
|
|
))}
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
export default UserGuideSidebar;
|