73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import "../styles/globals.css";
|
||
import "tailwindcss/tailwind.css";
|
||
import React, { useState } from "react";
|
||
import { GlobalSidebar } from "../components/layouts/global-sidebar";
|
||
import styles from "./_app.module.css";
|
||
import { ApolloProvider } from "@apollo/client";
|
||
import { useApollo } from "../commons/graphql/client";
|
||
import { ThemeProvider, useTheme } from "../commons/theme";
|
||
import { SwitchTheme } from "../components/switch-theme";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import {
|
||
faCross,
|
||
faHamburger,
|
||
faTimes,
|
||
} from "@fortawesome/free-solid-svg-icons";
|
||
import clsx from "clsx";
|
||
import Head from "next/head";
|
||
|
||
function MyApp({ Component, pageProps }) {
|
||
const apolloClient = useApollo(pageProps);
|
||
const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
|
||
return (
|
||
<ApolloProvider client={apolloClient}>
|
||
<Head>
|
||
<title>Ivan‘s 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>`}
|
||
</Head>
|
||
<ThemeProvider>
|
||
<div className={styles.page}>
|
||
<GlobalSidebar
|
||
className={styles.sidebar}
|
||
focusOpen={focusOpenSidebar}
|
||
onClick={() => setFocusOpenSidebar(false)}
|
||
/>
|
||
<div className={styles.primary}>
|
||
<header className={styles.pageHeader}>
|
||
<button
|
||
className={clsx(styles.headerBtn, {
|
||
[styles.opened]: focusOpenSidebar,
|
||
})}
|
||
onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
|
||
>
|
||
<FontAwesomeIcon
|
||
icon={focusOpenSidebar ? faTimes : faHamburger}
|
||
/>
|
||
</button>
|
||
<h1>{"Ivan Li 的个人博客"}</h1>
|
||
<div className={styles.actions}>
|
||
<SwitchTheme />
|
||
</div>
|
||
</header>
|
||
<div className={styles.wrapper}>
|
||
<Component {...pageProps} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ThemeProvider>
|
||
</ApolloProvider>
|
||
);
|
||
}
|
||
|
||
export default MyApp;
|