mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-10 07:25:35 +00:00
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import CollectionList from '~/components/dashboard/side_nav/collection/collection_list';
|
|
import FavoriteList from '~/components/dashboard/side_nav/favorites/favorite_list';
|
|
import NavigationLinks from '~/components/dashboard/side_nav/navigation_links/navigation_links';
|
|
import UserCard from '~/components/dashboard/side_nav/user_card/user_card';
|
|
|
|
const SideMenu = styled.nav({
|
|
height: '100%',
|
|
width: '325px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
const BlockWrapper = styled.section(({ theme }) => ({
|
|
height: 'auto',
|
|
width: '100%',
|
|
|
|
'& h4': {
|
|
userSelect: 'none',
|
|
textTransform: 'uppercase',
|
|
fontSize: '0.85em',
|
|
fontWeight: 500,
|
|
color: theme.colors.grey,
|
|
marginBottom: '5px',
|
|
},
|
|
|
|
'& ul': {
|
|
flex: 1,
|
|
animation: 'fadein 0.3s both',
|
|
},
|
|
|
|
'& ul li': {
|
|
position: 'relative',
|
|
userSelect: 'none',
|
|
cursor: 'pointer',
|
|
height: 'fit-content',
|
|
width: '100%',
|
|
fontSize: '0.9em',
|
|
backgroundColor: theme.colors.white,
|
|
padding: '0.5em 1em',
|
|
borderBottom: `2px solid ${theme.colors.lightestGrey}`,
|
|
borderRadius: theme.border.radius,
|
|
transition: theme.transition.delay,
|
|
|
|
'&:not(:last-child)': {
|
|
marginBottom: '5px',
|
|
},
|
|
},
|
|
}));
|
|
|
|
const SideNavigation = () => (
|
|
<SideMenu>
|
|
<BlockWrapper>
|
|
<FavoriteList />
|
|
</BlockWrapper>
|
|
<BlockWrapper css={{ minHeight: '0', flex: '1' }}>
|
|
<CollectionList />
|
|
</BlockWrapper>
|
|
<BlockWrapper>
|
|
<NavigationLinks />
|
|
</BlockWrapper>
|
|
<BlockWrapper>
|
|
<UserCard />
|
|
</BlockWrapper>
|
|
</SideMenu>
|
|
);
|
|
|
|
export default SideNavigation;
|