🐛(frontend) fix buttons closing panel

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

@@ -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
 

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' });
     }
   };
 

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"

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';

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 && (

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 (

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 && (

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"

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 (

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

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"
     />
   );

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';

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 });
   },
 }));