From e9ccefd938ac80e454c85392d851dfe514451892 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Wed, 29 May 2024 18:10:17 +0200
Subject: [PATCH] fix: responsive

---
 app/controllers/favicons_controller.ts        |  10 +-
 inertia/app/app.tsx                           |   9 +-
 .../collection/collection_container.tsx       |  19 ++-
 .../header/collection_description.tsx         |   8 +-
 .../collection/header/collection_header.tsx   |  23 ++-
 .../collection/list/collection_list.tsx       |   2 +
 .../components/dashboard/link/link_item.tsx   |   2 +-
 .../dashboard/side_nav/nav_item.tsx           |   2 +-
 .../dashboard/side_nav/side_navigation.tsx    |   8 +-
 inertia/components/layouts/content_layout.tsx |   1 +
 .../components/layouts/dashboard_layout.tsx   |   2 +
 inertia/components/navbar/navbar.tsx          |   7 +-
 inertia/components/settings/modal.tsx         |   2 +-
 inertia/pages/dashboard.tsx                   | 132 +++++++++++++++---
 inertia/pages/login.tsx                       |   7 +-
 resources/views/inertia_layout.edge           |   1 +
 16 files changed, 183 insertions(+), 52 deletions(-)

diff --git a/app/controllers/favicons_controller.ts b/app/controllers/favicons_controller.ts
index af40025..95c990d 100644
--- a/app/controllers/favicons_controller.ts
+++ b/app/controllers/favicons_controller.ts
@@ -54,13 +54,21 @@ export default class FaviconsController {
       throw new FaviconNotFoundException(`No favicon path found in ${url}`);
     }
 
+    if (faviconPath.startsWith('http')) {
+      try {
+        return await this.fetchFavicon(faviconPath);
+      } catch {
+        logger.debug(`Unable to retrieve favicon from ${faviconPath}`);
+      }
+    }
+
     return this.fetchFaviconFromPath(url, faviconPath);
   }
 
   private async fetchFavicon(url: string): Promise<Favicon> {
     const response = await this.fetchWithUserAgent(url);
     if (!response.ok) {
-      throw new FaviconNotFoundException(`Request to ${url} failed`);
+      throw new FaviconNotFoundException(`Request to favicon ${url} failed`);
     }
 
     const blob = await response.blob();
diff --git a/inertia/app/app.tsx b/inertia/app/app.tsx
index 0f92cf2..0b79a22 100644
--- a/inertia/app/app.tsx
+++ b/inertia/app/app.tsx
@@ -1,12 +1,11 @@
 import { resolvePageComponent } from '@adonisjs/inertia/helpers';
 import { createInertiaApp } from '@inertiajs/react';
-import { hydrateRoot } from 'react-dom/client';
-import 'react-toggle/style.css';
-import { primaryColor } from '~/styles/theme';
-import '../i18n/index';
-
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
+import { hydrateRoot } from 'react-dom/client';
+import 'react-toggle/style.css';
+import { primaryColor } from '~/styles/common_colors';
+import '../i18n/index';
 
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
 
diff --git a/inertia/components/dashboard/collection/collection_container.tsx b/inertia/components/dashboard/collection/collection_container.tsx
index 48e7e7d..b2a80ff 100644
--- a/inertia/components/dashboard/collection/collection_container.tsx
+++ b/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>
diff --git a/inertia/components/dashboard/collection/header/collection_description.tsx b/inertia/components/dashboard/collection/header/collection_description.tsx
index d2bdf7b..dbe8088 100644
--- a/inertia/components/dashboard/collection/header/collection_description.tsx
+++ b/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>
   );
 }
diff --git a/inertia/components/dashboard/collection/header/collection_header.tsx b/inertia/components/dashboard/collection/header/collection_header.tsx
index 37e3eb7..14494fe 100644
--- a/inertia/components/dashboard/collection/header/collection_header.tsx
+++ b/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>
   );
 }
diff --git a/inertia/components/dashboard/collection/list/collection_list.tsx b/inertia/components/dashboard/collection/list/collection_list.tsx
index fec5897..525b48c 100644
--- a/inertia/components/dashboard/collection/list/collection_list.tsx
+++ b/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}`,
diff --git a/inertia/components/dashboard/link/link_item.tsx b/inertia/components/dashboard/link/link_item.tsx
index f7c5b3d..62f8e25 100644
--- a/inertia/components/dashboard/link/link_item.tsx
+++ b/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">
diff --git a/inertia/components/dashboard/side_nav/nav_item.tsx b/inertia/components/dashboard/side_nav/nav_item.tsx
index 46797ab..f4750fe 100644
--- a/inertia/components/dashboard/side_nav/nav_item.tsx
+++ b/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',
diff --git a/inertia/components/dashboard/side_nav/side_navigation.tsx b/inertia/components/dashboard/side_nav/side_navigation.tsx
index 3155c32..5591e2f 100644
--- a/inertia/components/dashboard/side_nav/side_navigation.tsx
+++ b/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,
diff --git a/inertia/components/layouts/content_layout.tsx b/inertia/components/layouts/content_layout.tsx
index d1f9cf6..709677d 100644
--- a/inertia/components/layouts/content_layout.tsx
+++ b/inertia/components/layouts/content_layout.tsx
@@ -14,6 +14,7 @@ const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
   flexDirection: 'column',
 
   '& main': {
+    width: '100%',
     flex: 1,
   },
 }));
diff --git a/inertia/components/layouts/dashboard_layout.tsx b/inertia/components/layouts/dashboard_layout.tsx
index 055ba19..0f93b20 100644
--- a/inertia/components/layouts/dashboard_layout.tsx
+++ b/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 }) => (
diff --git a/inertia/components/navbar/navbar.tsx b/inertia/components/navbar/navbar.tsx
index 79769a1..8172e01 100644
--- a/inertia/components/navbar/navbar.tsx
+++ b/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>
diff --git a/inertia/components/settings/modal.tsx b/inertia/components/settings/modal.tsx
index 76f809a..d386335 100644
--- a/inertia/components/settings/modal.tsx
+++ b/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}>
diff --git a/inertia/pages/dashboard.tsx b/inertia/pages/dashboard.tsx
index e4ed5fd..b65f8f3 100644
--- a/inertia/pages/dashboard.tsx
+++ b/inertia/pages/dashboard.tsx
@@ -1,5 +1,7 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactNode, useEffect } from 'react';
+import { CiMenuBurger } from 'react-icons/ci';
 import { useSwipeable } from 'react-swipeable';
 import CollectionContainer from '~/components/dashboard/collection/collection_container';
 import CollectionList from '~/components/dashboard/collection/list/collection_list';
@@ -9,6 +11,7 @@ import SwiperHandler from '~/components/dashboard/swiper_handler';
 import DashboardLayout from '~/components/layouts/dashboard_layout';
 import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
+import { rgba } from '~/lib/color';
 import { CollectionWithLinks } from '~/types/app';
 
 interface DashboardPageProps {
@@ -16,38 +19,135 @@ interface DashboardPageProps {
   activeCollection: CollectionWithLinks;
 }
 
-const SideBar = styled.div(({ theme }) => ({
-  borderRight: `1px solid ${theme.colors.lightGrey}`,
-  marginRight: '5px',
+const SideBar = styled.div<{
+  floating?: boolean;
+  opened: boolean;
+}>(({ theme, opened, floating = false }) => ({
+  zIndex: 9,
+  position: floating ? 'absolute' : 'unset',
+  top: 0,
+  height: '100%',
+  width: opened ? '100%' : 'fit-content',
+  display: 'flex',
+  flexDirection: 'column',
+  transition: 'left 0.15s, right 0.15s',
+
+  '&::before': {
+    zIndex: -1,
+    position: floating ? 'absolute' : 'unset',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    background: rgba(theme.colors.black, 0.35),
+    backdropFilter: 'blur(0.1em)',
+    content: '""',
+    display: opened ? 'block' : 'none',
+  },
+}));
+
+const LeftSideBar = styled(SideBar)(({ opened }) => ({
+  left: opened ? 0 : '-100%',
+}));
+
+const RightSideBar = styled(SideBar)(({ opened }) => ({
+  right: opened ? 0 : '-100%',
+  alignItems: 'flex-end',
 }));
 
 function DashboardPage(props: Readonly<DashboardPageProps>) {
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const { isShowing, open, close } = useToggle();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.media.mobile})`);
+  const isTablet = useMediaQuery(`(max-width: ${theme.media.tablet})`);
+
+  const {
+    isShowing: isNavigationOpen,
+    open: openNavigation,
+    close: closeNavigation,
+  } = useToggle();
+  const {
+    isShowing: isCollectionListOpen,
+    open: openCollectionList,
+    close: closeCollectionList,
+  } = useToggle();
+
+  const handleSwipeLeft = () => {
+    if (!isMobile && !isTablet) return;
+    if (isNavigationOpen) {
+      closeNavigation();
+    } else {
+      openCollectionList();
+    }
+  };
+
+  const handleSwipeRight = () => {
+    if (!isMobile && !isTablet) return;
+    if (isCollectionListOpen) {
+      closeCollectionList();
+    } else {
+      openNavigation();
+    }
+  };
+
   const handlers = useSwipeable({
     trackMouse: true,
-    onSwipedRight: open,
+    onSwipedLeft: handleSwipeLeft,
+    onSwipedRight: handleSwipeRight,
   });
 
   useEffect(() => {
-    if (!isMobile && isShowing) {
-      close();
+    if (!isMobile && !isTablet) {
+      closeCollectionList();
+      closeNavigation();
     }
-  }, [close, isMobile, isShowing]);
+  }, [isMobile, isTablet, closeCollectionList, closeNavigation]);
 
+  console.log(isMobile, isTablet, isNavigationOpen, isCollectionListOpen);
   return (
     <DashboardProviders
       collections={props.collections}
       activeCollection={props.activeCollection}
     >
       <SwiperHandler {...handlers}>
-        {!isMobile && (
-          <SideBar>
-            <SideNavigation />
-          </SideBar>
-        )}
-        <CollectionContainer isMobile={isMobile} openSideMenu={open} />
-        <CollectionList />
+        <LeftSideBar
+          opened={isNavigationOpen}
+          floating={isMobile || isTablet}
+          onClick={closeNavigation}
+        >
+          <SideNavigation />
+        </LeftSideBar>
+        <CollectionContainer
+          openNavigationItem={
+            <CiMenuBurger
+              size={24}
+              onClick={openNavigation}
+              css={{
+                cursor: 'pointer',
+                marginRight: '1em',
+                color: theme.colors.primary,
+              }}
+            />
+          }
+          openCollectionItem={
+            <CiMenuBurger
+              size={24}
+              onClick={openCollectionList}
+              css={{
+                cursor: 'pointer',
+                marginLeft: '1em',
+                color: theme.colors.primary,
+              }}
+            />
+          }
+          showButtons={isMobile || isTablet}
+        />
+        <RightSideBar
+          opened={isCollectionListOpen}
+          floating={isMobile || isTablet}
+          onClick={closeCollectionList}
+        >
+          <CollectionList />
+        </RightSideBar>
       </SwiperHandler>
     </DashboardProviders>
   );
diff --git a/inertia/pages/login.tsx b/inertia/pages/login.tsx
index 4df5a6f..d25a4d2 100644
--- a/inertia/pages/login.tsx
+++ b/inertia/pages/login.tsx
@@ -12,6 +12,8 @@ const LoginContainer = styled.div({
   width: '100%',
   maxWidth: '100%',
   whiteSpace: 'nowrap',
+  marginTop: '50px',
+  paddingInline: '1rem',
   display: 'flex',
   alignItems: 'center',
   gap: '1.5em',
@@ -19,7 +21,8 @@ const LoginContainer = styled.div({
 });
 
 const FormWrapper = styled.div(({ theme }) => ({
-  width: '100%',
+  width: '500px',
+  maxWidth: '100%',
   backgroundColor: theme.colors.secondary,
   padding: '2em',
   borderRadius: theme.border.radius,
@@ -55,7 +58,7 @@ const ButtonLink = styled(Button.withComponent('a'))({
 function LoginPage() {
   const { t } = useTranslation();
   return (
-    <LoginContainer css={{ width: '500px', marginTop: '50px' }}>
+    <LoginContainer>
       <Head title={t('login:title')} />
       <img
         src={'/logo-light.png'}
diff --git a/resources/views/inertia_layout.edge b/resources/views/inertia_layout.edge
index c8ce198..aa2684d 100644
--- a/resources/views/inertia_layout.edge
+++ b/resources/views/inertia_layout.edge
@@ -10,6 +10,7 @@
     href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap'
     rel='stylesheet'
   />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charSet='UTF-8' />
   <link
     rel='shortcut icon'