Fixed layout problems after conflicts

Author: Mil4n0r

packages/lib/src/layout/ApplicationLayout.tsx

@@ -34,7 +34,7 @@ const BodyContainer = styled.div<{ hasSidenav?: boolean }>`
   }
 `;
 
-const SidenavContainer = styled.div<{ headerHeight: string }>`
+const SidenavContainer = styled.div<{ headerHeight: string; footerHeight: string }>`
   width: fit-content;
   height: 100%;
   z-index: var(--z-app-layout-sidenav);
@@ -44,6 +44,7 @@ const SidenavContainer = styled.div<{ headerHeight: 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"})`};
   }
 `;
 
@@ -63,7 +64,8 @@ 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) => {
       if (headerElement) {
@@ -74,10 +76,21 @@ 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,
       headerExists: !!header,
+      setHideMainContent,
     };
   }, [header, logo]);
   const ref = useRef(null);
@@ -87,10 +100,14 @@ 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}>{sidenav}</SidenavContainer>}
-          <MainContainer>{findChildType(children, Main)}</MainContainer>
+          {sidenav && (
+            <SidenavContainer headerHeight={headerHeight} footerHeight={footerHeight}>
+              {sidenav}
+            </SidenavContainer>
+          )}
+          {!hideMainContent && <MainContainer>{findChildType(children, Main)}</MainContainer>}
         </BodyContainer>
-        <FooterContainer>
+        <FooterContainer ref={handleFooterHeight}>
           {footer ?? (
             <DxcFooter
               copyright={`© DXC Technology ${year}. All rights reserved.`}

packages/lib/src/layout/ApplicationLayoutContext.tsx

@@ -4,4 +4,5 @@ import { ApplicationLayoutContextType } from "./types";
 export default createContext<ApplicationLayoutContextType>({
   logo: undefined,
   headerExists: false,
+  setHideMainContent: () => {},
 });

packages/lib/src/layout/types.ts

@@ -47,6 +47,10 @@ export type ApplicationLayoutContextType = {
    * Indicates if the header exists.
    */
   headerExists: boolean;
+  /**
+   * Allows the sidenav to hide the main content when needed
+   */
+  setHideMainContent: (hide: boolean) => void;
 };
 
 type ApplicationLayoutPropsType = {

packages/lib/src/sidenav/Sidenav.tsx

@@ -24,7 +24,6 @@ const SidenavContainer = styled.div<{
   width: number;
   showBorder?: boolean;
   side?: "left" | "right";
-  hasHeader?: boolean;
 }>`
   position: relative;
   box-sizing: border-box;
@@ -39,8 +38,6 @@ const SidenavContainer = styled.div<{
   background-color: var(--color-bg-neutral-lightest);
   @media (max-width: ${responsiveSizes.medium}rem) {
     width: 100%;
-    ${({ expanded, hasHeader }) =>
-      expanded && (hasHeader ? "height: calc(100vh - var(--height-xxxl));" : "height: 100vh;")}
   }
 `;
 
@@ -108,7 +105,7 @@ const DxcSidenav = ({
 }: SidenavPropsType): JSX.Element => {
   const isBelowLarge = useBreakpoint("large");
   const isBelowMedium = useBreakpoint("medium");
-  const { logo, headerExists } = useContext(ApplicationLayoutContext);
+  const { logo, headerExists, setHideMainContent } = useContext(ApplicationLayoutContext);
   const isControlled = expanded !== undefined;
   const { width, sidenavRef, isResizing, startResize } = useResize({
     minWidth: MIN_WIDTH,
@@ -127,6 +124,14 @@ const DxcSidenav = ({
   const isExpanded = isControlled ? !!expanded : internalExpanded;
   const shouldFocusSearchBar = useRef(false);
 
+  useEffect(() => {
+    if (isBelowMedium && isExpanded) {
+      setHideMainContent(true);
+    } else {
+      setHideMainContent(false);
+    }
+  }, [isBelowMedium, isExpanded]);
+
   const handleToggle = () => {
     const nextState = !isExpanded;
     if (!isControlled) setInternalExpanded(nextState);
@@ -148,7 +153,6 @@ const DxcSidenav = ({
       showBorder={!(isBelowMedium && !isExpanded)}
       ref={sidenavRef}
       side="left"
-      hasHeader={headerExists}
     >
       <SidenavContent>
         <DxcFlex