feat: update navbar, add quick center menu, & dark theme

.vscode/settings.json

@@ -2,7 +2,11 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.wordWrap": "on",
+  "editor.formatOnSaveMode": "file",
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

package.json

@@ -12,9 +12,13 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
+    "clsx": "^2.0.0",
+    "framer-motion": "^10.16.4",
     "next": "13.4.13",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^4.10.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",

src/components/Navigation/NavigationBar/NavigationBar.component.tsx

@@ -0,0 +1,106 @@
+import { Portal } from "@/components/Portal";
+import clsx from "clsx";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { FiChevronRight, FiGrid } from "react-icons/fi";
+import { QuickCenter } from "../QuickCenter";
+import type { NavigationBarParams } from "./NavigationBar";
+
+import AnfaLogoSVG from "@/assets/anfa-logo.svg";
+
+const NavigationBar = ({ testId }: NavigationBarParams) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [openQuickCenter, setOpenQuickCenter] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    window.addEventListener("keydown", (event) => {
+      const { key, code } = event;
+
+      if (openQuickCenter && (key === "Escape" || code === "Escape")) {
+        setOpenQuickCenter(false);
+      }
+    });
+  }, [openQuickCenter]);
+
+  return (
+    <>
+      <Portal>
+        <QuickCenter isOpen={openQuickCenter} onClickClose={() => setOpenQuickCenter(false)} />
+      </Portal>
+
+      <div
+        className={clsx("border-b border-b-slate-200 dark:border-slate-900", "fixed top-0 left-0 z-30", "w-full")}
+        data-testid={testId?.parent}
+      >
+        <div className={clsx("container", "p-4 mx-auto lg:p-6", "flex flex-row items-center justify-between")}>
+          <div className={clsx("flex flex-row items-center gap-x-6")}>
+            <a href="" className={clsx("flex flex-row items-center justify-start")}>
+              <Image
+                data-testid={testId?.logo}
+                src={AnfaLogoSVG}
+                alt="Anfa Logo"
+                className={clsx("w-10 h-10 lg:w-12 lg:h-12")}
+                width={32}
+                height={32}
+              />
+            </a>
+
+            <button
+              type="button"
+              accessKey="q"
+              className={clsx(
+                "text-sm font-semibold",
+                "button button-primary",
+                "px-4 py-2.5",
+                "flex flex-row items-center gap-x-2",
+                "rounded-md"
+              )}
+              title="Open quick center"
+              onClick={() => {
+                setOpenQuickCenter((state) => !state);
+              }}
+            >
+              <FiGrid className={clsx("h-4 w-4")} />
+              <span>Quick center</span>
+
+              <FiChevronRight className={clsx("h-4 w-4", "lg:hidden")} />
+              <span
+                className={clsx(
+                  "text-xs leading-none text-white font-normal",
+                  "bg-primary rounded-md",
+                  "px-1.5 py-1",
+                  "hidden lg:flex"
+                )}
+              >
+                alt+Q
+              </span>
+            </button>
+          </div>
+
+          <button
+            type="button"
+            className={clsx("navigation-toggler", "lg:hidden", isOpen ? "" : "")}
+            data-testid={testId?.toggler}
+            onClick={() => setIsOpen((state) => !state)}
+          >
+            <span className="icon"></span>
+            <span className="icon"></span>
+            <span className="icon"></span>
+          </button>
+
+          {/* <nav data-testid={testId?.navigation}>
+            <ul>
+              <li>
+                <a href="">About</a>
+              </li>
+            </ul>
+          </nav> */}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NavigationBar;

src/components/Navigation/NavigationBar/NavigationBar.d.ts

@@ -0,0 +1,12 @@
+export interface NavigationBarParams {
+  /**
+   * Jest Testing ID
+   */
+  testId?: {
+    parent?: string;
+    title?: string;
+    logo?: string;
+    navigation?: string;
+    toggler?: string;
+  };
+}

src/components/Navigation/NavigationBar/NavigationBar.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import NavigationBar from "./NavigationBar.component";
+
+describe("test `<Navigation />` component", () => {
+  it("should be rendered", () => {
+    render(
+      <NavigationBar
+        testId={{
+          parent: "navigation-parent"
+        }}
+      />
+    );
+
+    const text = screen.getByTestId("navigation-parent");
+
+    expect(text).toBeVisible();
+  });
+
+  it("should render navigation toggler", () => {
+    render(
+      <NavigationBar
+        testId={{
+          toggler: "navigation-toggler"
+        }}
+      />
+    );
+
+    const navigationToggler = screen.getByTestId("navigation-toggler");
+
+    expect(navigationToggler).toBeVisible();
+    expect(navigationToggler).toBeValid();
+  });
+});

src/components/Navigation/NavigationBar/index.ts

@@ -0,0 +1 @@
+export { default as NavigationBar } from "./NavigationBar.component";