Merge pull request #33 from acid-info/fix/footer-overflow

fix: footer content overflow and animation twitch.

src/theme/DocPage/Layout/Main/styles.module.scss

@@ -11,7 +11,8 @@
 
 @include utils.responsive('lg', 'up') {
   .sidebarSpace {
-    transition: 0.3s;
+    transition: var(--ifm-transition-fast) ease,
+      flex var(--ifm-transition-fast) ease;
     flex-shrink: 0;
     width: var(--doc-sidebar-width);
     max-width: var(--doc-sidebar-max-width);

src/theme/Footer/Layout/index.tsx

@@ -27,36 +27,39 @@ export default function FooterLayout(props: Props): JSX.Element {
 
   return (
     <footer className={clsx('footer', styles.footer)}>
-      <div className={'row'}>
+      <div
+        className={clsx(
+          'row',
+          'col',
+          'col--7',
+          styles.footerContentWrapper,
+          hiddenSidebar ? styles.withSidebarHide : '',
+        )}
+      >
         <div
           className={clsx(
-            'col',
-            hiddenSidebar ? 'col--7' : 'col--5',
-            styles.footerContentWrapper,
-            hiddenSidebar ? styles.withSidebarHide : '',
+            styles.sidebarSpace,
+            hiddenSidebar && styles.collapsed,
           )}
-        >
-          <div className={styles.footerContent}>
-            {(logo || copyright) && (
-              <div className={styles.lockup}>
-                {logo && <div className={styles.footerLogoWrapper}>{logo}</div>}
-                <span className={'sub5'}>{copyright}</span>
-              </div>
-            )}
-            <div className={styles.communityLinksWrapper}>
-              <div className={styles.communityLinks}>
-                {communityLinks.map(
-                  (link: FooterLinkItem, i) =>
-                    link.href && (
-                      <SocialMediaItem
-                        handler={link.href}
-                        provider={
-                          link.label.toLowerCase() as ECommunityProviders
-                        }
-                      />
-                    ),
-                )}
-              </div>
+        ></div>
+        <div className={styles.footerContent}>
+          {(logo || copyright) && (
+            <div className={styles.lockup}>
+              {logo && <div className={styles.footerLogoWrapper}>{logo}</div>}
+              <span className={'sub5'}>{copyright}</span>
+            </div>
+          )}
+          <div className={styles.communityLinksWrapper}>
+            <div className={styles.communityLinks}>
+              {communityLinks.map(
+                (link: FooterLinkItem, i) =>
+                  link.href && (
+                    <SocialMediaItem
+                      handler={link.href}
+                      provider={link.label.toLowerCase() as ECommunityProviders}
+                    />
+                  ),
+              )}
             </div>
           </div>
         </div>

src/theme/Footer/Layout/style.module.scss

@@ -1,3 +1,5 @@
+@use '@site/src/css/utils';
+
 .footer {
   display: flex;
 
@@ -5,23 +7,26 @@
     width: calc(100% - calc(2 * var(--ifm-spacing-horizontal)));
   }
 
+  .sidebarSpace {
+    width: var(--doc-sidebar-width);
+    max-width: var(--doc-sidebar-max-width);
+    transition: var(--ifm-transition-fast) ease,
+      flex var(--ifm-transition-fast) ease;
+    flex-grow: 0;
+    flex-shrink: 1;
+
+    &.collapsed {
+      width: 0;
+    }
+  }
+
   .footerContentWrapper {
     opacity: 0.3;
     margin: 0 !important;
     padding: 0 var(--ifm-spacing-horizontal);
-    --footer-left: calc(
-      min(var(--doc-sidebar-width), var(--doc-sidebar-max-width)) +
-        calc(1 * var(--ifm-spacing-horizontal))
-    );
-    transform: translateX(var(--footer-left));
+    flex-grow: 1;
 
     will-change: transform;
-    transition: transform var(--ifm-transition-fast) ease,
-      flex var(--ifm-transition-fast) ease;
-
-    &.withSidebarHide {
-      --footer-left: var(--ifm-spacing-horizontal);
-    }
 
     .footerContent {
       display: flex;
@@ -29,6 +34,7 @@
       flex-direction: row;
       justify-content: space-between;
       flex-grow: 1;
+      flex-shrink: 1;
 
       .communityLinks,
       .lockup {
@@ -52,6 +58,12 @@
   }
 }
 
+@include utils.responsive('lg', 'down') {
+  .sidebarSpace {
+    display: none;
+  }
+}
+
 @media (min-width: 997px) {
   .footerContentWrapper {
     //max-width: 75% !important;