feat: 适配小屏自适应

components/layouts/global-sidebar.module.css

@@ -1,8 +1,14 @@
 .wrapper {
   @apply bg-green-400 text-white min-h-screen;
+  @apply absolute top-0 left-0 right-0 bottom-0 sm:static;
+  @apply  -translate-x-full transform transition-transform sm:transition-none sm:translate-x-0;
   :global(.dark) & {
     @apply bg-gray-800 text-gray-400;
   }
+
+  &.focusOpen {
+    @apply translate-x-0;
+  }
 }
 .sidebar {
   @apply overflow-hidden flex flex-col fixed top-0;
@@ -11,8 +17,9 @@
 }
 
 .avatar {
-  @apply w-16 h-16;
+  @apply w-36 h-36 rounded-full;
-  @apply md:w-36 md:h-36 rounded-full;
+  @apply sm:w-16 sm:h-16;
+  @apply md:w-36 md:h-36;
   @apply mx-auto md:my-8 flex-none;
   
   :global(.dark) & {
@@ -21,14 +28,14 @@
 }
 
 .name {
-  @apply md:text-3xl md:tracking-wide font-mono;
+  @apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
   @apply md:my-8 my-4 flex-none select-all;
 }
 .nav {
   @apply my-auto text-left self-center;
 }
 .navItem {
-  @apply leading-8 md:text-lg cursor-pointer my-2;
+  @apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
   @apply tracking-widest;
   small {
     @apply text-xs md:inline hidden;

components/layouts/global-sidebar.tsx

@@ -1,19 +1,28 @@
-import React, { FC } from "react";
+import React, { FC, MouseEventHandler } from "react";
-import styles from "./global-layout.module.css";
+import styles from "./global-sidebar.module.css";
-import Image from "next/image";
 import Link from "next/link";
-import classnames from 'classnames';
+import classnames from "classnames";
 
 const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;
 
 interface Props {
   className: string;
+  focusOpen?: boolean;
+  onClick?: MouseEventHandler;
 }
 
-export const GlobalSidebar: FC<Props> = ({className}) => {
+export const GlobalSidebar: FC<Props> = ({
-
+  className,
+  focusOpen = false,
+  onClick,
+}) => {
   return (
-    <div className={classnames(className, styles.wrapper)}>
+    <div
+      className={classnames(className, styles.wrapper, {
+        [styles.focusOpen]: focusOpen,
+      })}
+      onClick={onClick}
+    >
       <aside className={classnames(className, styles.sidebar)}>
         <img className={styles.avatar} src="/images/avatar.png" />
         <h2 className={styles.name}>{fullName}</h2>

package-lock.json

@@ -8,9 +8,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.3.16",
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
         "apollo-link-scalars": "^2.1.3",
         "babel-plugin-superjson-next": "^0.3.0",
         "classnames": "^2.2.6",
+        "clsx": "^1.1.1",
         "date-fns": "^2.22.1",
         "graphql": "^15.5.0",
         "graphql-scalars": "^1.10.0",
@@ -1227,6 +1231,51 @@
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
       "dev": true
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -3499,6 +3548,14 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -10611,6 +10668,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -12531,6 +12617,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",

package.json

@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "apollo-link-scalars": "^2.1.3",
     "babel-plugin-superjson-next": "^0.3.0",
     "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
     "date-fns": "^2.22.1",
     "graphql": "^15.5.0",
     "graphql-scalars": "^1.10.0",

pages/_app.module.css

@@ -2,10 +2,10 @@
   @apply flex;
 }
 .sidebar {
-  @apply md:w-64 w-32 flex-none;
+  @apply w-full md:w-64 sm:w-32 flex-none;
 }
 .primary {
-  @apply flex-auto;
+  @apply flex-auto w-screen min-w-0;
   @apply bg-gray-100 text-gray-700;
   :global(.dark) & {
     @apply bg-gray-700 text-gray-300;
@@ -20,4 +20,16 @@
   :global(.dark) & {
     @apply bg-gray-800;
   }
+}
+.headerBtn {
+  @apply sm:hidden text-green-400;
+  @apply w-4 h-4 p-0 focus:outline-none;
+
+  &.opened {
+    @apply text-white;
+  }
+
+  & > * {
+    @apply absolute;
+  }
 }

pages/_app.tsx

@@ -1,22 +1,44 @@
 import "../styles/globals.css";
 import "tailwindcss/tailwind.css";
-import React from "react";
+import React, { useState } from "react";
 import { GlobalSidebar } from "../components/layouts/global-sidebar";
 import styles from "./_app.module.css";
 import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../commons/graphql/client";
-import { ThemeProvider, useTheme } from '../commons/theme';
+import { ThemeProvider, useTheme } from "../commons/theme";
 import { SwitchTheme } from "../components/switch-theme";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCross,
+  faHamburger,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
+import clsx from "clsx";
 
 function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps);
+  const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
   return (
     <ApolloProvider client={apolloClient}>
       <ThemeProvider>
         <div className={styles.page}>
-          <GlobalSidebar className={styles.sidebar} />
+          <GlobalSidebar
+            className={styles.sidebar}
+            focusOpen={focusOpenSidebar}
+            onClick={() => setFocusOpenSidebar(false)}
+          />
           <div className={styles.primary}>
             <header className={styles.pageHeader}>
+              <button
+                className={clsx(styles.headerBtn, {
+                  [styles.opened]: focusOpenSidebar,
+                })}
+                onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
+              >
+                <FontAwesomeIcon
+                  icon={focusOpenSidebar ? faTimes : faHamburger}
+                />
+              </button>
               <h1>{"Ivan Li 的个人博客"}</h1>
               <div className={styles.actions}>
                 <SwitchTheme />

pages/articles/article.module.css

@@ -1,7 +1,7 @@
 .articleDetail {
 }
 .article {
-  @apply bg-gray-50 m-2 overflow-hidden rounded-xl my-6;
+  @apply bg-gray-50 md:mx-2 overflow-hidden rounded-xl my-6;
 
   :global(.dark) & {
     @apply bg-gray-800;
@@ -9,7 +9,7 @@
   & > header {
     @apply my-8 mx-4;
     h1 {
-      @apply text-4xl font-medium mb-4;
+      @apply text-2xl md:text-4xl font-medium mb-4;
 
       :global(.dark) & {
         @apply text-gray-200;