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 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;

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>