feat: 适配小屏自适应

2021-07-15 21:08:33 +08:00 · 2021-07-15 21:08:33 +08:00 · 6f959b1d30
commit 6f959b1d30
parent ad881bde93
8 changed files with 163 additions and 18 deletions
--- a/components/layouts/global-sidebar.module.css
+++ b/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 md:w-36 md:h-36 rounded-full;
+  @apply w-36 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;
--- a/components/layouts/global-sidebar.tsx
+++ b/components/layouts/global-sidebar.tsx
@ -1,19 +1,28 @@
-import React, { FC } from "react";
-import styles from "./global-layout.module.css";
-import Image from "next/image";
+import React, { FC, MouseEventHandler } from "react";
+import styles from "./global-sidebar.module.css";
 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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pages/_app.module.css
+++ b/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;
+  }
 }
--- a/pages/_app.tsx
+++ b/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 />
--- a/pages/articles/article.css
+++ b/pages/articles/article.css
--- a/pages/articles/article.module.css
+++ b/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;