fix: responsive

inertia/components/dashboard/collection/collection_container.tsx

@@ -1,10 +1,17 @@
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 import CollectionHeader from '~/components/dashboard/collection/header/collection_header';
 import LinkList from '~/components/dashboard/link/link_list';
 import { NoCollection } from '~/components/dashboard/link/no_item';
 import Footer from '~/components/footer/footer';
 import useActiveCollection from '~/hooks/use_active_collection';
 
+export interface CollectionHeaderProps {
+  openNavigationItem: ReactNode;
+  openCollectionItem: ReactNode;
+  showButtons: boolean;
+}
+
 const CollectionContainerStyle = styled.div({
   height: '100%',
   minWidth: 0,
@@ -14,15 +21,7 @@ const CollectionContainerStyle = styled.div({
   flexDirection: 'column',
 });
 
-interface CollectionContainerProps {
-  isMobile: boolean;
-  openSideMenu: () => void;
-}
-
-export default function CollectionContainer({
-  isMobile: _,
-  openSideMenu: __,
-}: Readonly<CollectionContainerProps>) {
+export default function CollectionContainer(props: CollectionHeaderProps) {
   const { activeCollection } = useActiveCollection();
 
   if (activeCollection === null) {
@@ -31,7 +30,7 @@ export default function CollectionContainer({
 
   return (
     <CollectionContainerStyle>
-      <CollectionHeader />
+      <CollectionHeader {...props} />
       <LinkList links={activeCollection.links} />
       <Footer css={{ paddingBottom: 0 }} />
     </CollectionContainerStyle>

inertia/components/dashboard/collection/header/collection_description.tsx

@@ -11,10 +11,8 @@ const CollectionDescriptionStyle = styled.div({
 export default function CollectionDescription() {
   const { activeCollection } = useActiveCollection();
   return (
-    activeCollection && (
-      <CollectionDescriptionStyle>
-        <TextEllipsis lines={3}>{activeCollection?.description}</TextEllipsis>
-      </CollectionDescriptionStyle>
-    )
+    <CollectionDescriptionStyle>
+      <TextEllipsis lines={3}>{activeCollection!.description}</TextEllipsis>
+    </CollectionDescriptionStyle>
   );
 }

inertia/components/dashboard/collection/header/collection_header.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import TextEllipsis from '~/components/common/text_ellipsis';
+import { CollectionHeaderProps } from '~/components/dashboard/collection/collection_container';
 import CollectionControls from '~/components/dashboard/collection/header/collection_controls';
 import CollectionDescription from '~/components/dashboard/collection/header/collection_description';
 import VisibilityBadge from '~/components/visibilty/visibilty';
@@ -10,11 +11,13 @@ import useActiveCollection from '~/hooks/use_active_collection';
 const paddingLeft = '1.25em';
 const paddingRight = '1.65em';
 
-const CollectionHeaderWrapper = styled.div({
-  minWidth: 0,
-  width: '100%',
-  paddingInline: `${paddingLeft} ${paddingRight}`,
-});
+const CollectionHeaderWrapper = styled.div<{ padding?: boolean }>(
+  ({ padding }) => ({
+    minWidth: 0,
+    width: '100%',
+    paddingInline: padding ? `${paddingLeft} ${paddingRight}` : 0,
+  })
+);
 
 const CollectionHeaderStyle = styled.div({
   display: 'flex',
@@ -41,7 +44,11 @@ const LinksCount = styled.div(({ theme }) => ({
   color: theme.colors.grey,
 }));
 
-export default function CollectionHeader() {
+export default function CollectionHeader({
+  openNavigationItem,
+  openCollectionItem,
+  showButtons,
+}: CollectionHeaderProps) {
   const { t } = useTranslation('common');
   const { activeCollection } = useActiveCollection();
 
@@ -51,6 +58,7 @@ export default function CollectionHeader() {
   return (
     <CollectionHeaderWrapper>
       <CollectionHeaderStyle>
+        {showButtons && openNavigationItem && openNavigationItem}
         <CollectionName title={name}>
           <TextEllipsis>{name}</TextEllipsis>
           {links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
@@ -60,8 +68,9 @@ export default function CollectionHeader() {
           />
         </CollectionName>
         <CollectionControls collectionId={activeCollection.id} />
+        {showButtons && openCollectionItem && openCollectionItem}
       </CollectionHeaderStyle>
-      <CollectionDescription />
+      {activeCollection.description && <CollectionDescription />}
     </CollectionHeaderWrapper>
   );
 }

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -8,6 +8,8 @@ import useShortcut from '~/hooks/use_shortcut';
 
 const SideMenu = styled.nav(({ theme }) => ({
   height: '100%',
+  width: '300px',
+  backgroundColor: theme.colors.background,
   paddingLeft: '10px',
   marginLeft: '5px',
   borderLeft: `1px solid ${theme.colors.lightGrey}`,