restructure footer and header (github#24601)

fpehar · Jan 24, 2022 · a3b81bb · a3b81bb
1 parent 66d8e2b
commit a3b81bb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -85,21 +85,23 @@ export const DefaultLayout = (props: Props) => {
         Skip to main content
       </a>
       <SidebarNav />
-
-      <main id="main-content" className="flex-1 min-width-0">
+      <div className="flex-column">
         <Header />
-        <DeprecationBanner />
-        <RestRepoBanner />
-
-        {props.children}
+        <main id="main-content">
+          <DeprecationBanner />
+          <RestRepoBanner />
 
-        <SupportSection />
-        <SmallFooter />
-        <ScrollButton
-          className="position-fixed bottom-0 mb-4 right-0 mr-4"
-          ariaLabel={t('scroll_to_top')}
-        />
-      </main>
+          {props.children}
+        </main>
+        <footer>
+          <SupportSection />
+          <SmallFooter />
+          <ScrollButton
+            className="position-fixed bottom-0 mb-4 right-0 mr-4"
+            ariaLabel={t('scroll_to_top')}
+          />
+        </footer>
+      </div>
     </div>
   )
 }
diff --git a/components/page-footer/SmallFooter.tsx b/components/page-footer/SmallFooter.tsx
@@ -7,7 +7,7 @@ export const SmallFooter = () => {
   const router = useRouter()
   const { t } = useTranslation('footer')
   return (
-    <footer className="container-xl px-3 mt-6 mb-8 px-md-6 position-relative d-flex flex-row-reverse flex-xl-row flex-wrap flex-xl-nowrap flex-justify-center flex-xl-justify-between f6 color-fg-muted">
+    <div className="container-xl px-3 mt-6 mb-8 px-md-6 position-relative d-flex flex-row-reverse flex-xl-row flex-wrap flex-xl-nowrap flex-justify-center flex-xl-justify-between f6 color-fg-muted">
       <ul className="list-style-none d-flex flex-wrap col-12 flex-justify-center flex-xl-justify-between mb-2 mb-xl-0">
         <li className="mr-3 mr-xl-0">&copy; {new Date().getFullYear()} GitHub, Inc.</li>
         <li className="mr-3 mr-xl-0">
@@ -58,6 +58,6 @@ export const SmallFooter = () => {
           <a href="https://github.com/about">{t('company.links.about')}</a>
         </li>
       </ul>
-    </footer>
+    </div>
   )
 }
diff --git a/components/page-header/Header.tsx b/components/page-header/Header.tsx
@@ -86,7 +86,7 @@ export const Header = () => {
         {/* mobile header */}
         <div className="d-lg-none" data-testid="mobile-header">
           <div className="d-flex flex-justify-between">
-            <div className="d-flex flex-items-center" id="github-logo-mobile" role="banner">
+            <div className="d-flex flex-items-center" id="github-logo-mobile">
               <Link aria-hidden="true" tabIndex={-1} href={`/${router.locale}`}>
                 <MarkGithubIcon size={32} className="color-fg-default" />
               </Link>

diff --git a/components/sidebar/SidebarNav.tsx b/components/sidebar/SidebarNav.tsx
@@ -16,12 +16,12 @@ export const SidebarNav = () => {
     <div
       className="d-none d-lg-block bg-primary position-sticky top-0 overflow-y-auto flex-shrink-0 pb-5 border-right"
       style={{ width: 326, height: '100vh' }}
+      role="banner"
     >
       <div
         className="d-flex flex-items-center p-4 position-sticky top-0 color-bg-default"
         style={{ zIndex: 3 }}
         id="github-logo"
-        role="banner"
       >
         <Link
           href={`/${router.locale}`}