chore(footer): Restructure new homepage footer

packages/documentation-framework/app.js

@@ -3,7 +3,6 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router, useLocation } from '@reach/router';
 import 'client-styles'; // Webpack replaces this import: patternfly-docs.css.js
 import { SideNavLayout } from '@patternfly/documentation-framework/layouts';
-import { Footer } from '@patternfly/documentation-framework/components';
 import { MDXTemplate } from '@patternfly/documentation-framework/templates/mdx';
 import { routes, groupedRoutes, fullscreenRoutes, getAsyncComponent } from './routes';
 import { trackEvent } from './helpers';
@@ -37,7 +36,6 @@ const AppRoute = ({ child, title, path }) => {
   return (
     <React.Fragment>
       {child}
-      {process.env.hasFooter && <Footer />}
     </React.Fragment>
   );
 }
@@ -46,7 +44,7 @@ const SideNavRouter = () => {
   const componentsData = process?.env?.componentsData;
   return (
     <SideNavLayout groupedRoutes={groupedRoutes} navOpen={true} >
-      <Router id="ws-page-content-router">
+      <Router id="ws-page-content-router" component="main">
         {Object.entries(routes)
           .map(([path, { Component, title, sources, id }]) => Component
             ? <AppRoute

packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js

@@ -35,6 +35,7 @@ import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
+import { Footer } from '@patternfly/documentation-framework/components';
 
 export const RtlContext = createContext(false);
 
@@ -301,13 +302,15 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         <Page
           id="ws-page"
           mainContainerId="ws-page-main"
+          mainComponent="div"
           header={Header}
           sidebar={SideBar}
           skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
           isManagedSidebar
           defaultManagedSidebarIsOpen={navOpenProp}
         >
           {children}
+          {process.env.hasFooter && <Footer />}
         </Page>
         <div id="ws-page-banners">
           {hasGdprBanner && <GdprBanner />}

packages/documentation-framework/templates/mdx.css

@@ -1,6 +1,7 @@
 #ws-page-content-router {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   flex-shrink: 0;
 }