Update navbar, implement useNavbar hook, style updates

- Created a custom hook that returns an object with pages depending on user auth. This is a refactor of the logic found in the navbar component.
- Updated styles for card components
- Fix font size issues for mobile.
- Update theming to include a new pastel theme.

src/components/ui/Navbar.tsx

@@ -1,45 +1,63 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-
-import UserContext from '@/contexts/userContext';
+import useMediaQuery from '@/hooks/useMediaQuery';
+import useNavbar from '@/hooks/useNavbar';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useContext, useEffect, useState } from 'react';
+import { FC } from 'react';
+
+import { GiHamburgerMenu } from 'react-icons/gi';
+
+const DesktopLinks: FC = () => {
+  const { pages, currentURL } = useNavbar();
+
+  return (
+    <div className="block flex-none">
+      <ul className="menu menu-horizontal p-0">
+        {pages.map((page) => {
+          return (
+            <li key={page.slug}>
+              <Link tabIndex={0} href={page.slug}>
+                <span
+                  className={`text-lg uppercase ${
+                    currentURL === page.slug ? 'font-extrabold' : 'font-semibold'
+                  } text-primary-content`}
+                >
+                  {page.name}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const MobileLinks: FC = () => {
+  const { pages } = useNavbar();
+  return (
+    <div className="flex-none lg:hidden">
+      <div className="dropdown-end dropdown">
+        <label tabIndex={0} className="btn-ghost btn-circle btn">
+          <GiHamburgerMenu />
+        </label>
+        <ul
+          tabIndex={0}
+          className="dropdown-content menu rounded-box menu-compact mt-3 w-48 bg-base-100 p-2 shadow"
+        >
+          {pages.map((page) => (
+            <li key={page.slug}>
+              <Link href={page.slug}>
+                <span className="select-none text-primary-content">{page.name}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
 
-interface Page {
-  slug: string;
-  name: string;
-}
 const Navbar = () => {
-  const router = useRouter();
-  const [currentURL, setCurrentURL] = useState('/');
-
-  const { user } = useContext(UserContext);
-
-  useEffect(() => {
-    setCurrentURL(router.asPath);
-  }, [router.asPath]);
-
-  const authenticatedPages: readonly Page[] = [
-    { slug: '/account', name: 'Account' },
-    { slug: '/api/users/logout', name: 'Logout' },
-  ];
-
-  const unauthenticatedPages: readonly Page[] = [
-    { slug: '/login', name: 'Login' },
-    { slug: '/register', name: 'Register' },
-  ];
-
-  const otherPages: readonly Page[] = [
-    { slug: '/beers', name: 'Beers' },
-    { slug: '/breweries', name: 'Breweries' },
-  ];
-
-  const pages: readonly Page[] = [
-    ...otherPages,
-    ...(user ? authenticatedPages : unauthenticatedPages),
-  ];
+  const isDesktopView = useMediaQuery('(min-width: 1024px)');
 
   return (
     <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
@@ -48,58 +66,7 @@ const Navbar = () => {
           <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
         </Link>
       </div>
-      <div className="hidden flex-none lg:block">
-        <ul className="menu menu-horizontal p-0">
-          {pages.map((page) => {
-            return (
-              <li key={page.slug}>
-                <Link tabIndex={0} href={page.slug}>
-                  <span
-                    className={`text-lg uppercase ${
-                      currentURL === page.slug ? 'font-extrabold' : 'font-semibold'
-                    } text-primary-content`}
-                  >
-                    {page.name}
-                  </span>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-      <div className="flex-none lg:hidden">
-        <div className="dropdown dropdown-end">
-          <label tabIndex={0} className="btn-ghost btn-circle btn">
-            <span className="w-10 rounded-full">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                className="inline-block h-5 w-5 stroke-white"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </span>
-          </label>
-          <ul
-            tabIndex={0}
-            className="dropdown-content menu rounded-box menu-compact mt-3 w-48 bg-base-100 p-2 shadow"
-          >
-            {pages.map((page) => (
-              <li key={page.slug}>
-                <Link href={page.slug}>
-                  <span className="select-none text-primary-content">{page.name}</span>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
+      <div>{isDesktopView ? <DesktopLinks /> : <MobileLinks />}</div>
     </nav>
   );
 };