Merge pull request #5 from Chocolate1999/feat/new-nav

feat: add new nav

src/components/buttons/ThemeButton.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+
+import useLoaded from '@/hooks/useLoaded';
+
+type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>;
+
+export default function ThemeButton({ className, ...rest }: ThemeButtonProps) {
+  const { theme, setTheme } = useTheme();
+  const isLoaded = useLoaded();
+
+  return (
+    <button
+      className={clsx(className)}
+      {...rest}
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      {theme === 'light' && isLoaded ? <FiMoon /> : <FiSun />}
+    </button>
+  );
+}

src/components/layout/Footer.tsx

@@ -1,15 +1,31 @@
+import UnderlineLink from '@/components/links/UnderlineLink';
+
 export default function Footer() {
   return (
-    <footer className='relative bottom-2 flex w-full justify-center text-gray-700 dark:text-gray-200'>
-      © {new Date().getFullYear()} By{'  '}
-      <a
-        href='https://github.com/Chocolate1999'
-        target='_blank'
-        className='pl-1'
-        rel='noreferrer'
-      >
-        Chocolate
-      </a>
+    <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'>
+      <section className='flex flex-col items-end'>
+        <div>
+          <a
+            href='https://creativecommons.org/licenses/by-nc-sa/4.0/'
+            rel='noreferrer'
+            target='_blank'
+          >
+            CC BY-NC-SA 4.0
+          </a>{' '}
+          {new Date().getFullYear()}
+          <a
+            href='https://github.com/Chocolate1999'
+            target='_blank'
+            className='pl-1'
+            rel='noreferrer'
+          >
+            © Yang Chao Yi
+          </a>
+        </div>
+        <UnderlineLink href='https://beian.miit.gov.cn/'>
+          湘ICP备20002952号
+        </UnderlineLink>
+      </section>
     </footer>
   );
 }

src/components/layout/Header.tsx

@@ -3,8 +3,8 @@ import { useMemo } from 'react';
 
 import clsxm from '@/lib/clsxm';
 
-import HeaderNav from '@/components/layout/hader-nav';
-import HeaderButton from '@/components/layout/header-button';
+import HeaderNav from '@/components/layout/HeaderNav';
+import Icon from '@/components/layout/Icon';
 
 export default function Header() {
   const docScroll = useScroll();
@@ -16,16 +16,18 @@ export default function Header() {
   return (
     <header
       className={clsxm(
-        'fixed top-0 z-50 w-full bg-transparent',
+        'sticky top-0 z-50 w-full bg-transparent',
         isDocHover &&
           'solid border-b border-black border-opacity-[0.12] bg-white bg-opacity-[98] backdrop-blur-[40px]',
         'dark:border-b  dark:border-black dark:bg-[#060807]'
       )}
     >
-      <div className='layout flex h-[60px] items-center justify-between leading-[60px]'>
-        <HeaderNav />
-        <HeaderButton />
-      </div>
+      <section className='layout'>
+        <div className='mx-8 flex h-[60px] items-center justify-between leading-[60px]'>
+          <HeaderNav />
+          <Icon />
+        </div>
+      </section>
     </header>
   );
 }

src/components/layout/hader-nav/index.tsx → src/components/layout/HeaderNav.tsx

@@ -8,10 +8,10 @@ const HeaderNav = () => {
   const navVal = useRecoilValue(navAtom);
 
   return (
-    <div className='flex h-full w-auto flex-row items-center justify-center'>
+    <div className='flex h-full w-auto flex-row items-center justify-center gap-[24px]'>
       {navVal.map((item) => {
         return (
-          <div className='pr-[32px]' key={item.name}>
+          <div key={item.name}>
             <UnstyledLink href={item.link}>
               <span className='hover:text-[#0066ff] dark:text-gray-100'>
                 {item.name}

src/components/layout/Icon.tsx

@@ -0,0 +1,28 @@
+import { BsGithub } from 'react-icons/bs';
+import { SiBilibili } from 'react-icons/si';
+
+import ThemeButton from '@/components/buttons/ThemeButton';
+
+const Logo = () => {
+  return (
+    <div className='flex cursor-pointer gap-[24px] text-[22px]'>
+      <a
+        href='https://github.com/Chocolate1999'
+        rel='noreferrer'
+        target='_blank'
+      >
+        <BsGithub />
+      </a>
+      <a
+        href='https://space.bilibili.com/351534170'
+        rel='noreferrer'
+        target='_blank'
+      >
+        <SiBilibili />
+      </a>
+      <ThemeButton />
+    </div>
+  );
+};
+
+export default Logo;

src/components/layout/Layout.tsx

@@ -4,12 +4,15 @@ import Footer from '@/components/layout/Footer';
 import Header from '@/components/layout/Header';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  // Put Header or Footer Here
   return (
-    <div className='next-container'>
+    <>
       <Header />
-      {children}
-      <Footer />
-    </div>
+      <div className='layout'>
+        <div className='mx-8'>
+          {children}
+          <Footer />
+        </div>
+      </div>
+    </>
   );
 }

src/components/layout/style.module.css

@@ -0,0 +1,14 @@
+@keyframes fade-up-header {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.logo_name {
+}

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { AppProps } from 'next/app';
 import Router from 'next/router';
+import { ThemeProvider } from 'next-themes';
 import nProgress from 'nprogress';
 import { RecoilRoot } from 'recoil';
 
@@ -21,7 +22,9 @@ Router.events.on('routeChangeComplete', nProgress.done);
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <Component {...pageProps} />
+      <ThemeProvider attribute='class' enableSystem={false}>
+        <Component {...pageProps} />
+      </ThemeProvider>
     </RecoilRoot>
   );
 }