blog-fs/pages/_app.tsx

73 lines
2.3 KiB
TypeScript
Raw Normal View History

2021-05-02 10:42:38 +08:00
import "../styles/globals.css";
2021-05-01 18:34:45 +08:00
import "tailwindcss/tailwind.css";
2021-07-15 21:08:33 +08:00
import React, { useState } from "react";
2021-05-02 10:42:38 +08:00
import { GlobalSidebar } from "../components/layouts/global-sidebar";
import styles from "./_app.module.css";
import { ApolloProvider } from "@apollo/client";
2021-05-02 20:04:54 +08:00
import { useApollo } from "../commons/graphql/client";
2021-07-15 21:08:33 +08:00
import { ThemeProvider, useTheme } from "../commons/theme";
2021-07-03 11:25:14 +08:00
import { SwitchTheme } from "../components/switch-theme";
2021-07-15 21:08:33 +08:00
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCross,
faHamburger,
faTimes,
} from "@fortawesome/free-solid-svg-icons";
import clsx from "clsx";
2021-07-25 21:52:09 +08:00
import Head from "next/head";
2021-05-01 17:33:49 +08:00
function MyApp({ Component, pageProps }) {
2021-05-02 20:04:54 +08:00
const apolloClient = useApollo(pageProps);
2021-07-15 21:08:33 +08:00
const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
2021-05-01 23:10:28 +08:00
return (
2021-05-02 20:04:54 +08:00
<ApolloProvider client={apolloClient}>
2021-07-25 21:52:09 +08:00
<Head>
<title>Ivans Blog</title>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-120892498-1"
></script>
{`<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-120892498-1');
</script>`}
2021-07-25 21:52:09 +08:00
</Head>
2021-05-02 20:04:54 +08:00
<ThemeProvider>
<div className={styles.page}>
2021-07-15 21:08:33 +08:00
<GlobalSidebar
className={styles.sidebar}
focusOpen={focusOpenSidebar}
onClick={() => setFocusOpenSidebar(false)}
/>
2021-05-02 20:04:54 +08:00
<div className={styles.primary}>
<header className={styles.pageHeader}>
2021-07-15 21:08:33 +08:00
<button
className={clsx(styles.headerBtn, {
[styles.opened]: focusOpenSidebar,
})}
onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
>
<FontAwesomeIcon
icon={focusOpenSidebar ? faTimes : faHamburger}
/>
</button>
2021-05-02 20:04:54 +08:00
<h1>{"Ivan Li 的个人博客"}</h1>
<div className={styles.actions}>
<SwitchTheme />
</div>
</header>
<div className={styles.wrapper}>
<Component {...pageProps} />
2021-05-02 10:42:38 +08:00
</div>
</div>
</div>
2021-05-02 20:04:54 +08:00
</ThemeProvider>
2021-05-02 10:42:38 +08:00
</ApolloProvider>
2021-05-01 23:10:28 +08:00
);
2021-05-01 17:33:49 +08:00
}
2021-05-02 10:42:38 +08:00
export default MyApp;