feat: sidebar.

components/layouts/global-layout.module.css

@@ -0,0 +1,31 @@
+.sidebar {
+  @apply bg-green-400 text-white;
+  @apply overflow-hidden flex flex-col;
+  @apply text-center;
+  height: 100vh;
+  padding-top: 10vh;
+}
+
+.avatar {
+  @apply md:w-36 md:h-36 rounded-full;
+  @apply w-16 h-16;
+  @apply mx-auto md:my-8 flex-none;
+}
+
+.name {
+  @apply md:text-3xl md:tracking-wide font-mono;
+  @apply md:my-8 my-4 flex-none select-all;
+}
+.nav {
+  @apply my-auto;
+}
+.navItem {
+  @apply leading-8 md:text-lg cursor-pointer my-1;
+  &:hover {
+    text-shadow: 0 0px 5px #abbf00;
+  }
+}
+.bio {
+  @apply text-sm text-opacity-70 text-white;
+  @apply my-4;
+}

components/layouts/global-sidebar.tsx

@@ -0,0 +1,41 @@
+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 (
+    <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}>文章</li>
+          </Link>
+          <Link href="/tags">
+            <li className={styles.navItem}>标签</li>
+          </Link>
+          <Link href="/about">
+            <li className={styles.navItem}>关于</li>
+          </Link>
+        </ul>
+      </nav>
+      <footer className={classnames(styles.bio, "md:block hidden")}>
+        {"“人造的身体，借来的心”"}
+      </footer>
+      <footer className={classnames(styles.bio, "md:hidden block")}>
+        {"好挤 (#`O′)"}
+      </footer>
+    </aside>
+  );
+};