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}`,

inertia/components/dashboard/link/link_item.tsx

@@ -81,7 +81,7 @@ export default function LinkItem({
 }) {
   const { id, name, url, description, favorite } = link;
   return (
-    <LinkWrapper key={id}>
+    <LinkWrapper key={id} title={name}>
       <LinkHeader>
         <LinkFavicon url={url} />
         <ExternalLink href={url} className="reset">

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -5,7 +5,7 @@ import { rgba } from '~/lib/color';
 export const Item = styled.div(({ theme }) => ({
   userSelect: 'none',
   height: '40px',
-  width: '250px',
+  width: '100%',
   color: theme.colors.font,
   backgroundColor: theme.colors.background,
   padding: '8px 12px',

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -13,12 +13,16 @@ import useUser from '~/hooks/use_user';
 import { rgba } from '~/lib/color';
 import { appendCollectionId } from '~/lib/navigation';
 
-const SideMenu = styled.nav({
+const SideMenu = styled.nav(({ theme }) => ({
   height: '100%',
+  width: '300px',
+  backgroundColor: theme.colors.background,
+  borderRight: `1px solid ${theme.colors.lightGrey}`,
+  marginRight: '5px',
   display: 'flex',
   gap: '.35em',
   flexDirection: 'column',
-});
+}));
 
 const AdminButton = styled(ItemLink)(({ theme }) => ({
   color: theme.colors.lightRed,

inertia/components/layouts/content_layout.tsx

@@ -14,6 +14,7 @@ const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
   flexDirection: 'column',
 
   '& main': {
+    width: '100%',
     flex: 1,
   },
 }));

inertia/components/layouts/dashboard_layout.tsx

@@ -4,10 +4,12 @@ import TransitionLayout from '~/components/layouts/_transition_layout';
 import BaseLayout from './_base_layout';
 
 const DashboardLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
+  position: 'relative',
   height: '100%',
   width: theme.media.medium_desktop,
   maxWidth: '100%',
   padding: '0.75em 1em',
+  overflow: 'hidden',
 }));
 
 const DashboardLayout = ({ children }: { children: ReactNode }) => (

inertia/components/navbar/navbar.tsx

@@ -53,6 +53,11 @@ const UserCard = styled.div({
   justifyContent: 'center',
 });
 
+const DropdownItemButtonWithPadding = styled(DropdownItemButton)({
+  cursor: 'pointer',
+  padding: 0,
+});
+
 export default function Navbar() {
   const { t } = useTranslation('common');
   const { isAuthenticated, user } = useUser();
@@ -89,7 +94,7 @@ export default function Navbar() {
         ) : (
           <>
             <li>
-              <ModalSettings openItem={DropdownItemButton} />
+              <ModalSettings openItem={DropdownItemButtonWithPadding} />
             </li>
             <li>
               <Link href={route('auth.login').url}>{t('login')}</Link>

inertia/components/settings/modal.tsx

@@ -20,7 +20,7 @@ export default function ModalSettings({
   return (
     <>
       <OpenItem onClick={open}>
-        <PiGearLight />
+        <PiGearLight size={20} />
         {t('settings')}
       </OpenItem>
       <Modal title={t('settings')} opened={isShowing} close={close}>