blog-fs/components/layouts/global-sidebar.tsx

import React, { FC, MouseEventHandler } from "react";
import styles from "./global-sidebar.module.css";
import Link from "next/link";
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,
  focusOpen = false,
  onClick,
}) => {
  return (
    <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>

        <nav className={styles.nav}>
          <ul>
            <Link href="/">
              <li className={styles.navItem}>
                文章
                <small> / ARTICLES</small>
              </li>
            </Link>
            <Link href="/tags">
              <li className={styles.navItem}>
                标签
                <small> / TAGS</small>
              </li>
            </Link>
            <Link href="/about">
              <li className={styles.navItem}>
                关于
                <small> / ABOUT</small>
              </li>
            </Link>
          </ul>
        </nav>
        <footer className={classnames(styles.bio, "md:block hidden")}>
          {"“人造的身体，借来的心”"}
        </footer>
        <footer className={classnames(styles.bio, "md:hidden block")}>
          {"好挤 (#`O′)"}
        </footer>
      </aside>
    </div>
  );
};