feat: mobile footer

config/footer-links.json

@@ -26,7 +26,7 @@
       ]
     },
     {
-      "title": "Developer Resources",
+      "title": "Developer",
       "items": [
         {
           "label": "Quick Start",

src/css/custom.css

@@ -60,4 +60,14 @@
   .mobile-hidden {
     display: none;
   }
+
+  .col.footer__col {
+    --ifm-col-width: 50%;
+  }
+}
+
+@media screen and (min-width: 996px) {
+  .mobile-only {
+    display: none;
+  }
 }

src/theme/Footer/Copyright/index.module.css

@@ -3,17 +3,6 @@
   justify-content: space-between;
 }
 
-span.icon {
-  width: 15px;
-  height: 15px;
-  margin: 0 10px;
-  padding: 3px;
-}
-
-.img {
-  margin: 0 0 0 10px;
-}
-
 .logo {
   display: none;
 }
@@ -24,13 +13,6 @@ span.icon {
     text-align: left;
   }
 
-  .social {
-    order: -1;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #ccc;
-  }
-
   .logo {
     display: block;
     width: 4rem;

src/theme/Footer/Copyright/index.tsx

@@ -3,38 +3,24 @@ import Copyright from "@theme-original/Footer/Copyright";
 import type CopyrightType from "@theme/Footer/Copyright";
 import type { WrapperProps } from "@docusaurus/types";
 import styles from "./index.module.css";
-import socialLinks from "@site/config/social-links.json";
 import Logo from "@site/src/theme/logo";
+import Social from "../Social";
 
 type Props = WrapperProps<typeof CopyrightType>;
 
 export default function CopyrightWrapper(props: Props): JSX.Element {
   return (
     <>
       <div className={styles.wrap}>
+        <div className="mobile-hidden">
+          <Social />
+        </div>
         <div className={styles.copyright}>
           <div className={styles.logo}>
             <Logo />
           </div>
           <Copyright {...props} />
         </div>
-        <div className={styles.social}>
-          {socialLinks.links.map((i, key) => (
-            <a
-              key={key}
-              href={i.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={i.label}
-            >
-              {i.icon ? (
-                <img src={i.icon} className={styles.img} />
-              ) : (
-                <span className={styles.icon}>?</span>
-              )}
-            </a>
-          ))}
-        </div>
       </div>
     </>
   );

src/theme/Footer/Links/MultiColumn/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import LinkItem from "@theme/Footer/LinkItem";
 import type { Props } from "@theme/Footer/Links/MultiColumn";
 import Logo from "@site/src/theme/logo";
+import Social from "../../Social";
 
 type ColumnType = Props["columns"][number];
 type ColumnItemType = ColumnType["items"][number];
@@ -30,6 +31,11 @@ function Column({ column }: { column: ColumnType }) {
           <ColumnLinkItem key={i} item={item} />
         ))}
       </ul>
+      {column.title === "Connect" ? (
+        <div className="mobile-only" style={{ marginTop: 10, marginLeft: -10 }}>
+          <Social />
+        </div>
+      ) : null}
     </div>
   );
 }

src/theme/Footer/Social/index.module.css

@@ -0,0 +1,17 @@
+span.icon {
+  width: 15px;
+  height: 15px;
+  margin: 0 10px;
+  padding: 3px;
+}
+
+.img {
+  margin: 0 0 0 10px;
+}
+
+@media screen and (max-width: 996px) {
+  .social {
+    order: -1;
+    padding-bottom: 0.5rem;
+  }
+}

src/theme/Footer/Social/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./index.module.css";
+import socialLinks from "@site/config/social-links.json";
+
+export default function Social(): JSX.Element {
+  return (
+    <div className={styles.social}>
+      {socialLinks.links.map((i, key) => (
+        <a
+          key={key}
+          href={i.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={i.label}
+        >
+          {i.icon ? (
+            <img src={i.icon} className={styles.img} />
+          ) : (
+            <span className={styles.icon}>?</span>
+          )}
+        </a>
+      ))}
+    </div>
+  );
+}