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

import React, { FC } from "react";
import styles from "./global-layout.module.css";
import Image from "next/image";
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;
}

export const GlobalSidebar: FC<Props> = ({className}) => {

  return (
    <div className={classnames(className, styles.wrapper)}>
      <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>
  );
};