From 91d99cb0ad4354540beaea34eabd1d1978e7cb8a Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Mon, 2 Feb 2026 13:22:56 +0100
Subject: [PATCH] Remove footer from expanded sidenav on small devices

---
 packages/lib/src/layout/ApplicationLayout.tsx | 41 +++++++------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index c857dfb3b..18fb4dc42 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -35,7 +35,7 @@ const BodyContainer = styled.div<{ hasSidenav?: boolean }>`
   }
 `;
 
-const SidenavContainer = styled.div<{ headerHeight: string; footerHeight: string }>`
+const SidenavContainer = styled.div<{ headerHeight: string }>`
   width: fit-content;
   height: 100%;
   z-index: var(--z-app-layout-sidenav);
@@ -45,7 +45,7 @@ const SidenavContainer = styled.div<{ headerHeight: string; footerHeight: string
   max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight || "0"})`};
   @media (max-width: ${responsiveSizes.medium}rem) {
     width: 100%;
-    max-height: ${({ headerHeight, footerHeight }) => `calc(100vh - ${headerHeight || "0"} - ${footerHeight || "0"})`};
+    max-height: ${({ headerHeight }) => `calc(100vh - ${headerHeight || "0"})`};
   }
 `;
 
@@ -65,7 +65,6 @@ const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => <div>{childr
 
 const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element => {
   const [headerHeight, setHeaderHeight] = useState("0px");
-  const [footerHeight, setFooterHeight] = useState("0px");
   const [hideMainContent, setHideMainContent] = useState(false);
   const handleHeaderHeight = useCallback(
     (headerElement: HTMLDivElement | null) => {
@@ -77,16 +76,6 @@ const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: Appli
     [header]
   );
 
-  const handleFooterHeight = useCallback(
-    (footerElement: HTMLDivElement | null) => {
-      if (footerElement) {
-        const height = footerElement.offsetHeight;
-        setFooterHeight(`${height}px`);
-      }
-    },
-    [footer]
-  );
-
   const contextValue = useMemo(() => {
     return {
       logo,
@@ -101,22 +90,20 @@ const DxcApplicationLayout = ({ logo, header, sidenav, footer, children }: Appli
       <ApplicationLayoutContext.Provider value={contextValue}>
         {header && <HeaderContainer ref={handleHeaderHeight}>{header}</HeaderContainer>}
         <BodyContainer hasSidenav={!!sidenav}>
-          {sidenav && (
-            <SidenavContainer headerHeight={headerHeight} footerHeight={footerHeight}>
-              {sidenav}
-            </SidenavContainer>
-          )}
+          {sidenav && <SidenavContainer headerHeight={headerHeight}>{sidenav}</SidenavContainer>}
           {!hideMainContent && <MainContainer>{findChildType(children, Main)}</MainContainer>}
         </BodyContainer>
-        <FooterContainer ref={handleFooterHeight}>
-          {footer ?? (
-            <DxcFooter
-              copyright={`© DXC Technology ${year}. All rights reserved.`}
-              bottomLinks={bottomLinks}
-              socialLinks={socialLinks}
-            />
-          )}
-        </FooterContainer>
+        {!hideMainContent && (
+          <FooterContainer>
+            {footer ?? (
+              <DxcFooter
+                copyright={`© DXC Technology ${year}. All rights reserved.`}
+                bottomLinks={bottomLinks}
+                socialLinks={socialLinks}
+              />
+            )}
+          </FooterContainer>
+        )}
       </ApplicationLayoutContext.Provider>
     </ApplicationLayoutContainer>
   );