refactor: remove layouts when mobile

app/(connected)/(with-sidebar)/(with-chat)/layout.tsx

@@ -4,25 +4,23 @@ import React, { ReactNode, useState } from 'react'
 
 import layout from 'app/(connected)/(with-sidebar)/(with-chat)/layout.module.css'
 import PageLayout from 'app/(connected)/(with-sidebar)/PageLayout'
-import sidebarLayout from 'app/(connected)/(with-sidebar)/sidebar.module.css'
 import ChatContainer from 'components/chat/ChatContainer'
 import ChatNav from 'components/chat/ChatNav'
 import { ID_CHAT } from 'components/globals'
-import Sidebar from 'components/Sidebar'
 import { utiliseChat } from 'interfaces/conseiller'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
+import { useMobileViewport } from 'utils/mobileViewportContext'
 
 export default function LayoutWithChat({ children }: { children: ReactNode }) {
   const [conseiller] = useConseiller()
   const [showChatNav, setShowChatNav] = useState<boolean>(false)
+  const isMobileViewport = useMobileViewport()
 
   return (
-    <div className='flex h-screen supports-[height:100dvh]:h-dvh w-screen'>
-      <div className={sidebarLayout.sidebar}>
-        <Sidebar />
-      </div>
-
-      <PageLayout fullWidth={true}>{children}</PageLayout>
+    <>
+      {!isMobileViewport && (
+        <PageLayout fullWidth={true}>{children}</PageLayout>
+      )}
 
       {utiliseChat(conseiller) && (
         <aside id={ID_CHAT} tabIndex={-1} className={layout.chatRoom}>
@@ -31,6 +29,6 @@ export default function LayoutWithChat({ children }: { children: ReactNode }) {
       )}
 
       {showChatNav && <ChatNav onClose={() => setShowChatNav(false)} />}
-    </div>
+    </>
   )
 }

app/(connected)/(with-sidebar)/(without-chat)/layout.tsx

@@ -1,21 +1,11 @@
 import { ReactNode } from 'react'
 
 import PageLayout from 'app/(connected)/(with-sidebar)/PageLayout'
-import sidebarLayout from 'app/(connected)/(with-sidebar)/sidebar.module.css'
-import Sidebar from 'components/Sidebar'
 
 export default async function LayoutWithoutChat({
   children,
 }: {
   children: ReactNode
 }) {
-  return (
-    <div className='flex h-screen supports-[height:100dvh]:h-dvh w-screen'>
-      <div className={sidebarLayout.sidebar}>
-        <Sidebar />
-      </div>
-
-      <PageLayout fullWidth={false}>{children}</PageLayout>
-    </div>
-  )
+  return <PageLayout fullWidth={false}>{children}</PageLayout>
 }

app/(connected)/(with-sidebar)/(without-chat-full-screen)/layout.tsx

@@ -1,21 +1,12 @@
 import { ReactNode } from 'react'
 
 import PageLayout from 'app/(connected)/(with-sidebar)/PageLayout'
-import sidebarLayout from 'app/(connected)/(with-sidebar)/sidebar.module.css'
 import Sidebar from 'components/Sidebar'
 
 export default async function LayoutWithoutChatFullScreen({
   children,
 }: {
   children: ReactNode
 }) {
-  return (
-    <div className='flex h-screen supports-[height:100dvh]:h-dvh w-screen'>
-      <div className={sidebarLayout.sidebar}>
-        <Sidebar />
-      </div>
-
-      <PageLayout fullWidth={true}>{children}</PageLayout>
-    </div>
-  )
+  return <PageLayout fullWidth={true}>{children}</PageLayout>
 }

app/(connected)/(with-sidebar)/layout.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { ReactNode } from 'react'
+
+import Sidebar from 'components/Sidebar'
+import { useMobileViewport } from 'utils/mobileViewportContext'
+
+export default function LayoutWithSidebar({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const isMobileViewport = useMobileViewport()
+
+  return (
+    <div className='flex h-screen supports-[height:100dvh]:h-dvh w-screen'>
+      {!isMobileViewport && <Sidebar />}
+
+      {children}
+    </div>
+  )
+}

app/(connected)/messagerie/layout.tsx

@@ -2,12 +2,10 @@
 
 import React, { ReactNode } from 'react'
 
-import sidebarLayout from 'app/(connected)/(with-sidebar)/sidebar.module.css'
 import layout from 'app/(connected)/messagerie/layout.module.css'
 import ChatContainer from 'components/chat/ChatContainer'
 import { ID_CONTENU } from 'components/globals'
 import Footer from 'components/layouts/Footer'
-import Sidebar from 'components/Sidebar'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
@@ -20,11 +18,7 @@ export default function LayoutPageMessagerie({
   const [portefeuille] = usePortefeuille()
 
   return (
-    <div className='flex h-screen supports-[height:100dvh]:h-dvh w-screen'>
-      <div className={sidebarLayout.sidebar}>
-        <Sidebar />
-      </div>
-
+    <>
       <div id={ID_CONTENU} className={layout.chatRoom} tabIndex={-1}>
         <ChatContainer onShowMenu={() => {}} messagerieFullScreen={true} />
       </div>
@@ -36,6 +30,6 @@ export default function LayoutPageMessagerie({
           aDesBeneficiaires={portefeuille.length > 0}
         />
       </div>
-    </div>
+    </>
   )
 }

components/Sidebar.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import React from 'react'
 
 import { ID_MENU } from 'components/globals'
@@ -8,6 +6,7 @@ import IllustrationComponent, {
   IllustrationName,
 } from 'components/ui/IllustrationComponent'
 import { estPassEmploi } from 'interfaces/conseiller'
+import styles from 'styles/components/Sidebar.module.css'
 import { useConseiller } from 'utils/conseiller/conseillerContext'
 
 export default function Sidebar() {
@@ -16,7 +15,7 @@ export default function Sidebar() {
   const aThemePassEmploi = estPassEmploi(conseiller)
 
   return (
-    <>
+    <div className={styles.sidebar}>
       {aThemePassEmploi && (
         <IllustrationComponent
           name={IllustrationName.LogoPassemploi}
@@ -62,6 +61,6 @@ export default function Sidebar() {
           ]}
         />
       </nav>
-    </>
+    </div>
   )
 }

components/chat/ChatNav.tsx

@@ -1,26 +1,21 @@
 import React, { useEffect, useRef } from 'react'
 
-import { ID_CONTENU, MIN_DESKTOP_WIDTH } from 'components/globals'
+import { ID_CONTENU } from 'components/globals'
 import ModalContainer, { ModalHandles } from 'components/ModalContainer'
 import NavLinks, { NavItem } from 'components/NavLinks'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
+import { useMobileViewport } from 'utils/mobileViewportContext'
 
 export default function ChatNav({ onClose }: { onClose: () => void }) {
   const modalContainerRef = useRef<ModalHandles>(null)
+  const isMobileViewport = useMobileViewport()
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= MIN_DESKTOP_WIDTH) {
-        onClose()
-        document.getElementById(ID_CONTENU)!.focus()
-      }
+    if (!isMobileViewport) {
+      onClose()
+      document.getElementById(ID_CONTENU)!.focus()
     }
-
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
+  }, [isMobileViewport])
 
   return (
     <ModalContainer

utils/AppContextProviders.tsx

@@ -17,6 +17,7 @@ import { CurrentConversationProvider } from 'utils/chat/currentConversationConte
 import { ListeDeDiffusionSelectionneeProvider } from 'utils/chat/listeDeDiffusionSelectionneeContext'
 import { ShowRubriqueListeDeDiffusionProvider } from 'utils/chat/showRubriqueListeDeDiffusionContext'
 import { ConseillerProvider } from 'utils/conseiller/conseillerContext'
+import { MobileViewportProvider } from 'utils/mobileViewportContext'
 import { PortefeuilleProvider } from 'utils/portefeuilleContext'
 
 export default function AppContextProviders({
@@ -49,13 +50,15 @@ export default function AppContextProviders({
               <ShowRubriqueListeDeDiffusionProvider>
                 <ListeDeDiffusionSelectionneeProvider>
                   <AlerteProvider>
-                    <ThemeProvider
-                      defaultTheme={'neutral'}
-                      themes={['neutral', 'darker']}
-                      forcedTheme={theme}
-                    >
-                      {children}
-                    </ThemeProvider>
+                    <MobileViewportProvider>
+                      <ThemeProvider
+                        defaultTheme={'neutral'}
+                        themes={['neutral', 'darker']}
+                        forcedTheme={theme}
+                      >
+                        {children}
+                      </ThemeProvider>
+                    </MobileViewportProvider>
                   </AlerteProvider>
                 </ListeDeDiffusionSelectionneeProvider>
               </ShowRubriqueListeDeDiffusionProvider>

utils/mobileViewportContext.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+import { MIN_DESKTOP_WIDTH } from 'components/globals'
+
+const MobileViewportContext = createContext<boolean | undefined>(undefined)
+
+export function MobileViewportProvider({ children }: { children: ReactNode }) {
+  const [isMobileViewport, setIsMobileViewport] = useState<boolean>(true)
+
+  useEffect(() => {
+    const handleResize = () =>
+      setIsMobileViewport(window.innerWidth < MIN_DESKTOP_WIDTH)
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return (
+    <MobileViewportContext.Provider value={isMobileViewport}>
+      {children}
+    </MobileViewportContext.Provider>
+  )
+}
+
+export function useMobileViewport(): boolean {
+  const mobileViewportContext = useContext(MobileViewportContext)
+  if (mobileViewportContext === undefined) {
+    throw new Error(
+      'useMobileViewport must be used within MobileViewportProvider'
+    )
+  }
+
+  return mobileViewportContext
+}