53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
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>
|
||
);
|
||
};
|