feat(routing): implement basic navigation; implement basic router & h…

…eader

.eslintrc

@@ -7,6 +7,8 @@
     "plugin:jsx-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
     "eslint-config-prettier",
+    "prettier",
+    "prettier/react"
   ],
   "settings": {
     "react": {

package.json

@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "gestalt": "^166.2.1",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.1",
     "tailwindcss-children": "^2.1.0"
   },

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/Footer.tsx

@@ -1,5 +1,29 @@
-export const Footer = () => (
-    <footer>
-      <h1>Footer</h1>
+import { SocialMediaContactRow, getNavLinkCollection } from '.';
+import { footerAndHeaderSharedClassName } from './utils';
+
+export const Footer = () => {
+  const footerNavLinkCollection = getNavLinkCollection({
+    id: 'footer',
+    className: 'inline-block',
+  });
+
+  return (
+    <footer className={footerAndHeaderSharedClassName}>
+      <div className="grid w-full max-w-screen-xl grid-cols-1 gap-10 md:grid-cols-3">
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Contact</h3>
+          <p>Email: [email protected]</p>
+          <p>Phone: +1 234 567 890</p>
+        </div>
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Quick Links</h3>
+          {footerNavLinkCollection.map((navLink) => navLink)}
+        </div>
+        <div>
+          <h3 className="mb-2 text-xl font-semibold">Follow</h3>
+          <SocialMediaContactRow baseId="footer" />
+        </div>
+      </div>
     </footer>
-  )
+  );
+};

src/components/Header.tsx

@@ -1,6 +1,103 @@
-export const Header = () => (
-    <header>
-      <h1>Header</h1>
+import clsx from 'clsx';
+import { Link } from 'gestalt';
+import { useState } from 'react';
+import { GiHamburgerMenu } from 'react-icons/gi';
+import { GrClose } from 'react-icons/gr';
+import { Logo } from './Logo';
+import { footerAndHeaderSharedClassName } from './utils';
+
+const basePath = '/ji-yun';
+const baseNavItemId = 'nav-menu-item';
+
+type GetNavLinkCollectionParams = {
+  id?: string;
+  className?: string;
+};
+export const getNavLinkCollection = ({
+  id = 'base',
+  className = 'block px-4 py- text-black',
+}: GetNavLinkCollectionParams = {}) => [
+  <li key={`${id}-${baseNavItemId}-home`}>
+    <Link
+      href="/"
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to home page."
+      dataTestId={`${id}-${baseNavItemId}-home`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Home</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-projects`}>
+    <Link
+      href={`${basePath}/projects`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to project list page."
+      dataTestId={`${id}-${baseNavItemId}-projects`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Projects</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-about`}>
+    <Link
+      href={`${basePath}/about`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to 'about me' page and find out more details about me."
+      dataTestId={`${id}-${baseNavItemId}-about`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>About</p>
+    </Link>
+  </li>,
+  <li key={`${id}-${baseNavItemId}-contact`}>
+    <Link
+      href={`${basePath}/contact`}
+      tapStyle="compress"
+      underline="hover"
+      accessibilityLabel="Navigate to contact page and send me an email."
+      dataTestId={`${id}-${baseNavItemId}-contact`}
+    >
+      <p className={clsx(className, 'hover:text-blue-600')}>Contact</p>
+    </Link>
+  </li>,
+];
+
+export const Header = () => {
+  const [showMenu, setShowMenu] = useState(false);
+  const headerNavLinkCollection = getNavLinkCollection();
+
+  return (
+    <header className={footerAndHeaderSharedClassName}>
+      <nav className="flex w-full max-w-screen-lg justify-between">
+        <div className="flex w-full items-center justify-between">
+          <Logo />
+          {/* Mobile Hamburger Menu */}
+          <button
+            className="m-0 md:hidden"
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            {showMenu ? <GrClose /> : <GiHamburgerMenu />}
+          </button>
+        </div>
+        <ul
+          className={clsx(
+            'absolute w-10/12 bg-white p-4 text-black shadow-md transition-all md:hidden md:w-auto md:gap-6 md:bg-transparent md:p-0',
+            showMenu ? 'top-16' : 'top-[-400px]'
+          )}
+        >
+          {headerNavLinkCollection.map((link) => link)}
+        </ul>
+
+        <ul
+          className={clsx(
+            'hidden w-full bg-white p-4 transition-all md:relative md:flex md:w-auto md:gap-6 md:bg-transparent md:p-0 md:shadow-none',
+            showMenu ? 'top-16' : 'top-0'
+          )}
+        >
+          {headerNavLinkCollection.map((link) => link)}
+        </ul>
+      </nav>
     </header>
-  )
-  
+  );
+};

src/components/Logo.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'gestalt';
+
+export const Logo = () => (
+  <Link
+    href="/"
+    tapStyle="compress"
+    underline="hover"
+    accessibilityLabel="Navigate to home page."
+  >
+    <p className="text-2xl font-bold text-gray-800">
+      {/* <p className="flex h-10 items-center px-10 font-bold uppercase italic text-black hover:opacity-90"> */}
+      Ji Yun Pahk
+    </p>
+  </Link>
+);