Move next js project to archive (#207)

archive/next-js-web-app/src/components/ui/Navbar.tsx

@@ -0,0 +1,138 @@
+import useMediaQuery from '@/hooks/utilities/useMediaQuery';
+import useNavbar from '@/hooks/utilities/useNavbar';
+// import useTheme from '@/hooks/utilities/useTheme';
+
+import Link from 'next/link';
+import { FC, useRef } from 'react';
+// import { MdDarkMode, MdLightMode } from 'react-icons/md';
+
+import { FaBars } from 'react-icons/fa';
+import classNames from 'classnames';
+
+const DesktopLinks: FC = () => {
+  const { pages, currentURL } = useNavbar();
+
+  return (
+    <div className="block flex-none">
+      <ul className="menu menu-horizontal menu-sm">
+        {pages.map((page) => {
+          return (
+            <li key={page.slug}>
+              <Link tabIndex={0} href={page.slug} className="hover:bg-primary-focus">
+                <span
+                  className={`text-lg uppercase ${
+                    currentURL === page.slug ? 'font-extrabold' : 'font-bold'
+                  } text-base-content`}
+                >
+                  {page.name}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const MobileLinks: FC = () => {
+  const { pages } = useNavbar();
+
+  const drawerRef = useRef<HTMLInputElement>(null);
+  return (
+    <div className="flex-none lg:hidden">
+      <div className="drawer drawer-end">
+        <input id="my-drawer" type="checkbox" className="drawer-toggle" ref={drawerRef} />
+        <div className="drawer-content">
+          <label htmlFor="my-drawer" className="btn btn-ghost drawer-button">
+            <FaBars />
+          </label>
+        </div>
+        <div className="drawer-side">
+          <label
+            htmlFor="my-drawer"
+            aria-label="close sidebar"
+            className="drawer-overlay"
+          />
+          <ul className="menu min-h-full bg-primary pr-16 text-base-content">
+            {pages.map((page) => {
+              return (
+                <li key={page.slug}>
+                  <Link
+                    href={page.slug}
+                    tabIndex={0}
+                    rel={page.slug === '/resume/main.pdf' ? 'noopener noreferrer' : ''}
+                    target={page.slug === '/resume/main.pdf' ? '_blank' : ''}
+                    onClick={() => {
+                      if (!drawerRef.current) return;
+                      drawerRef.current.checked = false;
+                    }}
+                  >
+                    <span className="text-lg font-bold uppercase">{page.name}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Navbar = () => {
+  const isDesktopView = useMediaQuery('(min-width: 1024px)');
+
+  const { currentURL } = useNavbar();
+
+  const backgroundIsTransparent = currentURL === '/';
+
+  const isOnHomePage = currentURL === '/';
+
+  // const { theme, setTheme } = useTheme();
+  return (
+    <div
+      className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
+        'bg-transparent': backgroundIsTransparent,
+        'bg-primary': !backgroundIsTransparent,
+      })}
+    >
+      <div className="flex-1">
+        {isOnHomePage ? null : (
+          <Link className="btn btn-ghost btn-sm" href="/">
+            <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
+          </Link>
+        )}
+      </div>
+
+      {/* <div
+        className="tooltip tooltip-left"
+        data-tip={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+      >
+        <div>
+          {theme === 'light' ? (
+            <button
+              className="btn btn-circle btn-ghost btn-md"
+              data-set-theme="dark"
+              data-act-class="ACTIVECLASS"
+              onClick={() => setTheme('dark')}
+            >
+              <MdLightMode className="text-xl" />
+            </button>
+          ) : (
+            <button
+              className="btn btn-circle btn-ghost btn-md"
+              data-set-theme="light"
+              data-act-class="ACTIVECLASS"
+              onClick={() => setTheme('light')}
+            >
+              <MdDarkMode className="text-xl" />
+            </button>
+          )}
+        </div>
+      </div> */}
+      <div>{isDesktopView ? <DesktopLinks /> : <MobileLinks />}</div>
+    </div>
+  );
+};
+export default Navbar;