Refactor navigation (#18)

* Scroll to top component
* Refactor navigation

components/header.js

@@ -1,9 +1,18 @@
 import Navigation from '@comp/navigation';
 import Email from '@comp/email';
+import cx from 'classnames';
+import useScrollPosition from '@react-hook/window-scroll';
 
 export default function Header() {
+  const scrollPosition = useScrollPosition();
+
   return (
-    <header className="py-8 absolute w-full top-0 left-0 hidden lg:block">
+    <header
+      className={cx(
+        'bg-white dark:bg-black fixed w-full top-0 left-0 z-40 transition duration-300 hidden lg:block',
+        scrollPosition > 100 ? 'py-4 shadow-sm' : 'py-8',
+      )}
+    >
       <div className="container-fluid">
         <div className="flex flex-col justify-between items-center md:flex-row">
           <Email href="/">[email protected]</Email>

components/navigation.js

@@ -1,11 +1,23 @@
-import { meta } from 'site.config';
-import { FiArrowUpRight } from 'react-icons/fi';
+// import { meta } from 'site.config';
+// import { FiArrowUpRight } from 'react-icons/fi';
 
 export default function Navigation() {
   const links = [
-    meta.socials.github,
-    meta.socials.linkedin,
-    meta.socials.dribbble,
+    {
+      href: '#hero',
+      label: 'Home',
+    },
+    {
+      href: '#github',
+      label: 'Github',
+    },
+    {
+      href: '#dribbble',
+      label: 'Dribbble',
+    },
+    // meta.socials.github
+    // meta.socials.linkedin,
+    // meta.socials.dribbble,
   ];
 
   function onClick(label) {
@@ -21,18 +33,18 @@ export default function Navigation() {
 
   return (
     <nav>
-      <ul className="flex space-x-10">
+      <ul className="flex space-x-16">
         {links.map(({ href, label }) => (
           <li key={href}>
             <a
               href={href}
               className="inline-flex items-center space-x-4 font-medium"
-              target="_blank"
-              rel="noreferrer"
+              // target="_blank"
+              // rel="noreferrer"
               onClick={() => onClick(label)}
             >
               <span>{label}</span>
-              <FiArrowUpRight />
+              {/* <FiArrowUpRight /> */}
             </a>
           </li>
         ))}

components/scroll-top.js

@@ -0,0 +1,20 @@
+import cx from 'classnames';
+import useScrollPosition from '@react-hook/window-scroll';
+import { FiArrowUp } from 'react-icons/fi';
+
+export default function ScrollTop() {
+  const scrollPosition = useScrollPosition();
+
+  return (
+    <button
+      className={cx(
+        'bg-white hover:bg-gray-100 active:bg-gray-50 text-zinc-800 shadow-md fixed bottom-8 right-8 text-xl p-4 rounded transition',
+        scrollPosition < 200 && 'opacity-0 pointer-events-none',
+      )}
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+    >
+      <span className="sr-only">Scroll to top</span>
+      <FiArrowUp />
+    </button>
+  );
+}

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource/plus-jakarta-sans": "^4.5.8",
+    "@react-hook/window-scroll": "^1.3.0",
     "classnames": "^2.3.1",
     "graphql": "^16.5.0",
     "graphql-request": "^4.3.0",

pages/index.js

@@ -6,6 +6,7 @@ import Avatar from '@comp/avatar';
 import RepoCard from '@comp/repo-card';
 import ShotCard from '@comp/shot-card';
 import Button from '@comp/button';
+import ScrollTop from '@comp/scroll-top';
 import { fetchRepos, fetchShots, request } from '@lib/data';
 import { meta } from 'site.config';
 import { FiArrowUpRight, FiMail } from 'react-icons/fi';
@@ -117,7 +118,7 @@ export default function Home({ repos, shots, homepage, seo }) {
           </div>
         </section>
 
-        <section id="github" className="container-2xl md:grid md:grid-cols-12">
+        <section id="github" className="container-2xl md:grid md:grid-cols-12 scroll-m-36">
           <div className="flex items-center md:block md:col-span-2">
             <figure>
               <BsGithub className="text-3xl md:text-5xl" />
@@ -138,7 +139,7 @@ export default function Home({ repos, shots, homepage, seo }) {
 
         <section
           id="dribbble"
-          className="container-2xl md:grid md:grid-cols-12"
+          className="container-2xl md:grid md:grid-cols-12 scroll-m-36"
         >
           <div className="flex items-center md:block md:col-span-2">
             <figure>
@@ -158,6 +159,7 @@ export default function Home({ repos, shots, homepage, seo }) {
       </main>
 
       <Footer />
+      <ScrollTop />
     </div>
   );
 }