From 6cef5ff2a0a60ffc5872de8fe15fd26ecf6060e0 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 6 Mar 2026 16:45:29 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20buttons=20closin?=
 =?UTF-8?q?g=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When clicking on the home button, the left panel was
collapsing, it is a behavior that we want only when
mobile. We improved the logic to only collapse the
panel when we are on mobile devices.
---
 CHANGELOG.md                                  |  1 +
 .../doc-tree/components/DocSubPageItem.tsx    |  4 +-
 .../src/features/header/components/Header.tsx |  4 +-
 .../src/features/header/components/index.ts   |  1 -
 .../features/home/components/HomeHeader.tsx   |  6 +--
 .../components/LefPanelTargetFilters.tsx      |  6 +--
 .../left-panel/components/LeftPanel.tsx       | 10 +---
 .../components/LeftPanelCollapseButton.tsx    |  2 +-
 .../left-panel/components/LeftPanelHeader.tsx |  2 +-
 .../components/LeftPanelHeaderButton.tsx      |  8 +--
 .../components/LeftPanelToggleMobile.tsx}     |  6 +--
 .../features/left-panel/components/index.tsx  |  1 +
 .../left-panel/stores/useLeftPanelStore.tsx   | 52 ++++++++++++++-----
 13 files changed, 56 insertions(+), 47 deletions(-)
 rename src/frontend/apps/impress/src/features/{header/components/ButtonTogglePanel.tsx => left-panel/components/LeftPanelToggleMobile.tsx} (82%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05838ae6..7c28763a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(frontend) analytic feature flags problem #1953
+- 🐛(frontend) fix home collapsing panel #1954
 - 🐛(frontend) fix disabled color on icon Dropdown #1950
 - 🐛(frontend) fix zIndex table of content #1949
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index 9d9856ff..bdd7fb63 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -71,7 +71,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             allChildren as TreeViewDataType<Doc>[],
           );
           treeContext?.treeData.setSelectedNode(createdDoc);
-          togglePanel();
+          togglePanel({ type: 'mobile' });
         })
         .catch(console.error);
     } else {
@@ -85,7 +85,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       node.open();
       router.push(`/docs/${createdDoc.id}`);
       treeContext?.treeData.setSelectedNode(newDoc);
-      togglePanel();
+      togglePanel({ type: 'mobile' });
     }
   };
 
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index d80bf536..93670884 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -7,11 +7,11 @@ import { useConfig } from '@/core/config';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
 import { LanguagePicker } from '@/features/language';
+import { LeftPanelToggleMobile } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
 import { HEADER_HEIGHT } from '../conf';
 
-import { ButtonTogglePanel } from './ButtonTogglePanel';
 import { Title } from './Title';
 import { Waffle } from './Waffle';
 
@@ -46,7 +46,7 @@ export const Header = () => {
             var(--c--contextuals--border--surface--primary);
         `}
       >
-        {!isDesktop && <ButtonTogglePanel />}
+        {!isDesktop && <LeftPanelToggleMobile />}
         <StyledLink
           href="/"
           data-testid="header-logo-link"
diff --git a/src/frontend/apps/impress/src/features/header/components/index.ts b/src/frontend/apps/impress/src/features/header/components/index.ts
index 2db54232..88d63fdc 100644
--- a/src/frontend/apps/impress/src/features/header/components/index.ts
+++ b/src/frontend/apps/impress/src/features/header/components/index.ts
@@ -1,4 +1,3 @@
-export * from './ButtonTogglePanel';
 export * from './Header';
 export * from './Waffle';
 export * from './Title';
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
index 4f0d9e00..a95c9a67 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -3,9 +3,9 @@ import Image from 'next/image';
 import { Box } from '@/components';
 import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
-import { ButtonTogglePanel, Title } from '@/features/header/';
-import { Waffle } from '@/features/header/components/Waffle';
+import { Title, Waffle } from '@/features/header';
 import { LanguagePicker } from '@/features/language';
+import { LeftPanelToggleMobile } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
 export const HEADER_HEIGHT = 91;
@@ -42,7 +42,7 @@ export const HomeHeader = () => {
       >
         {isSmallMobile && (
           <Box $position="absolute" $css="left: 1rem;">
-            <ButtonTogglePanel />
+            <LeftPanelToggleMobile />
           </Box>
         )}
         {!isSmallMobile && logo?.src && (
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index f83afee8..2df90129 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -7,14 +7,12 @@ import { Box, Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocDefaultFilter } from '@/docs/doc-management';
 import { useLeftPanelStore } from '@/features/left-panel';
-import { useResponsiveStore } from '@/stores';
 
 export const LeftPanelTargetFilters = () => {
   const { t } = useTranslation();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const { isDesktop } = useResponsiveStore();
   const { closePanel } = useLeftPanelStore();
   const { colorsTokens, spacingsTokens } = useCunninghamTheme();
 
@@ -52,9 +50,7 @@ export const LeftPanelTargetFilters = () => {
   };
 
   const handleFilterClick = () => {
-    if (!isDesktop) {
-      closePanel();
-    }
+    closePanel({ type: 'mobile' });
   };
 
   return (
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 4ff92237..72c59633 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -1,5 +1,3 @@
-import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
 
@@ -26,15 +24,9 @@ export const LeftPanel = () => {
   const { t } = useTranslation();
 
   const { spacingsTokens } = useCunninghamTheme();
-  const { togglePanel, isPanelOpen, isPanelOpenMobile } = useLeftPanelStore();
+  const { isPanelOpen, isPanelOpenMobile } = useLeftPanelStore();
   const isPanelOpenState = isDesktop ? isPanelOpen : isPanelOpenMobile;
 
-  const pathname = usePathname();
-
-  useEffect(() => {
-    togglePanel(isDesktop);
-  }, [pathname, isDesktop, togglePanel]);
-
   return (
     <>
       {isDesktop && (
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
index 56b9d828..dc11f914 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx
@@ -71,7 +71,7 @@ export const LeftPanelCollapseButton = () => {
     >
       <Button
         size="small"
-        onClick={() => togglePanel()}
+        onClick={() => togglePanel({ type: 'desktop' })}
         aria-label={ariaLabel}
         aria-expanded={isPanelOpen}
         color="neutral"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index b135ed4b..a70e86e1 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -38,7 +38,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
 
   const goToHome = () => {
     void router.push('/');
-    togglePanel();
+    togglePanel({ type: 'mobile' });
   };
 
   return (
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
index 6c008ac6..5d0a58e2 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx
@@ -4,9 +4,8 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@/components';
-import { useCreateDoc } from '@/features/docs/doc-management';
+import { useCreateDoc } from '@/docs/doc-management';
 import { useSkeletonStore } from '@/features/skeletons';
-import { useResponsiveStore } from '@/stores';
 
 import { useLeftPanelStore } from '../stores';
 
@@ -14,7 +13,6 @@ export const LeftPanelHeaderButton = () => {
   const router = useRouter();
   const { t } = useTranslation();
   const { closePanel } = useLeftPanelStore();
-  const { isDesktop } = useResponsiveStore();
   const { setIsSkeletonVisible } = useSkeletonStore();
   const [isNavigating, setIsNavigating] = useState(false);
 
@@ -27,9 +25,7 @@ export const LeftPanelHeaderButton = () => {
         .then(() => {
           // The skeleton will be disabled by the [id] page once the data is loaded
           setIsNavigating(false);
-          if (!isDesktop) {
-            closePanel();
-          }
+          closePanel({ type: 'mobile' });
         })
         .catch(() => {
           // In case of navigation error, disable the skeleton
diff --git a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelToggleMobile.tsx
similarity index 82%
rename from src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
rename to src/frontend/apps/impress/src/features/left-panel/components/LeftPanelToggleMobile.tsx
index e7fa67db..2609e4fe 100644
--- a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelToggleMobile.tsx
@@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from '@/components/';
 import { useLeftPanelStore } from '@/features/left-panel';
 
-export const ButtonTogglePanel = () => {
+export const LeftPanelToggleMobile = () => {
   const { t } = useTranslation();
   const { isPanelOpenMobile, togglePanel } = useLeftPanelStore();
 
   return (
     <Button
       size="medium"
-      onClick={() => togglePanel()}
+      onClick={() => togglePanel({ type: 'mobile' })}
       aria-label={t(
         isPanelOpenMobile ? 'Close the header menu' : 'Open the header menu',
       )}
@@ -23,7 +23,7 @@ export const ButtonTogglePanel = () => {
           iconName={isPanelOpenMobile ? 'close' : 'menu'}
         />
       }
-      className="--docs--button-toggle-panel"
+      className="--docs--button-toggle-panel-mobile"
       data-testid="header-menu-toggle"
     />
   );
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/index.tsx b/src/frontend/apps/impress/src/features/left-panel/components/index.tsx
index ab07d3d4..23f2e313 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/index.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/index.tsx
@@ -1,3 +1,4 @@
 export * from './LeftPanel';
 export * from './LeftPanelCollapseButton';
+export * from './LeftPanelToggleMobile';
 export * from './ResizableLeftPanel';
diff --git a/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx b/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
index ad9246fb..b1feb70e 100644
--- a/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx
@@ -1,31 +1,55 @@
 import { create } from 'zustand';
 
+type TogglePanelType = { type: 'desktop' | 'mobile' };
+
+type TogglePanelArgs = {
+  value?: boolean;
+} & Partial<TogglePanelType>;
+
 interface LeftPanelState {
   isPanelOpen: boolean;
   isPanelOpenMobile: boolean;
-  togglePanel: (value?: boolean) => void;
-  closePanel: () => void;
+  togglePanel: (args?: TogglePanelArgs) => void;
+  closePanel: (args?: TogglePanelType) => void;
 }
 
 export const useLeftPanelStore = create<LeftPanelState>((set, get) => ({
   isPanelOpen: true,
   isPanelOpenMobile: false,
-  togglePanel: (value?: boolean) => {
-    if (value === true) {
-      set({ isPanelOpen: true });
-      return;
-    }
-    if (value === false) {
-      set({ isPanelOpen: false, isPanelOpenMobile: false });
+  togglePanel: ({ value, type }: TogglePanelArgs = {}) => {
+    if (typeof value === 'boolean') {
+      if (type === 'mobile') {
+        set({ isPanelOpenMobile: value });
+        return;
+      }
+      if (type === 'desktop') {
+        set({ isPanelOpen: value });
+        return;
+      }
+      set({ isPanelOpen: value, isPanelOpenMobile: value });
       return;
     }
+
     const { isPanelOpen, isPanelOpenMobile } = get();
-    set({
-      isPanelOpen: !isPanelOpen,
-      isPanelOpenMobile: !isPanelOpenMobile,
-    });
+    if (type === 'mobile') {
+      set({ isPanelOpenMobile: !isPanelOpenMobile });
+      return;
+    }
+    if (type === 'desktop') {
+      set({ isPanelOpen: !isPanelOpen });
+      return;
+    }
+    set({ isPanelOpen: !isPanelOpen, isPanelOpenMobile: !isPanelOpenMobile });
   },
-  closePanel: () => {
+  closePanel: ({ type }: Partial<TogglePanelType> = {}) => {
+    if (type === 'mobile') {
+      set({ isPanelOpenMobile: false });
+      return;
+    }
+    if (type === 'desktop') {
+      set({ isPanelOpen: false });
+      return;
+    }
     set({ isPanelOpen: false, isPanelOpenMobile: false });
   },
 }));