feat: recreate dashboard page from previous version

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -0,0 +1,70 @@
+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;