62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
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>
|
||
);
|
||
};
|