feat: 适配小屏自适应

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;