feat: responsive home nav

src/hooks/useTailWindResponsive.ts

@@ -0,0 +1,30 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../tailwind.config.cjs';
+import { useEffect, useState } from 'react';
+type defaultScreenSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type Screens = {
+  [key in defaultScreenSize]: string;
+};
+const tailwindConfigResolved = resolveConfig(tailwindConfig);
+const screenSizes = tailwindConfigResolved.theme?.screens as unknown as Screens;
+
+// Inspired by https://juhanajauhiainen.com/posts/how-to-implement-usemediaquery-hook-in-react
+export function useTailWindResponsive(query: defaultScreenSize): boolean {
+  const inputQueryMapped = screenSizes[query];
+  const inputMediaQuery = `(min-width: ${inputQueryMapped})`;
+  const [matches, setMatches] = useState<boolean>(false);
+  useEffect(() => {
+    function handleChange(e: MediaQueryListEvent) {
+      setMatches(e.matches);
+    }
+    const matchQueryList = window.matchMedia(inputMediaQuery);
+    setMatches(matchQueryList.matches);
+
+    matchQueryList.addEventListener('change', handleChange);
+
+    return () => {
+      matchQueryList.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+  return matches;
+}

src/pages/index.tsx

@@ -1,14 +1,16 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { Icon } from '../components/atoms/Icon';
 import { PageWithLayout } from '../types/NextExtensions';
 import { Button } from '../components/atoms/Button';
 import { useSession, signIn, signOut } from 'next-auth/react';
-
+import { useTailWindResponsive } from '../hooks/useTailWindResponsive';
 const Home: PageWithLayout = () => {
-  // const hello = trpc.useQuery(["example.hello", { text: "from tRPC" }]);
   const { data: session } = useSession();
+  const isLarge = useTailWindResponsive('lg');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   const navItems = [
     {
       name: 'Docs',
@@ -28,54 +30,76 @@ const Home: PageWithLayout = () => {
     },
   ];
 
+  useEffect(() => {
+    isLarge ? setIsOpen(true) : setIsOpen(false);
+  }, [isLarge]);
+
   return (
     <>
       <main className="container mx-auto flex flex-col items-center min-h-screen p-4">
-        <nav className="flex flex-row w-full text-2xl justify-between">
-          <div className="flex flex-row">
-            <Icon icon="SHOUTIFY_LOGO" p={0} size={26} className="mx-2" />
-            <h1 className="font-bold">Shoutify</h1>
+        <nav className="flex flex-col w-full justify-between text-2xl lg:flex-row">
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-row">
+              <Icon icon="SHOUTIFY_LOGO" p={0} size={26} className="mx-2" />
+              <h1 className="font-bold">Shoutify</h1>
+            </div>
+            <div className="lg:hidden">
+              <Button
+                aria-label="toggle menu"
+                title="toggle menu"
+                className="rounded-md h-10 hover:bg-gray-700"
+                onClick={() => setIsOpen(!isOpen)}
+              >
+                <Icon icon="MENU" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex">
+            <ul
+              className={`${
+                isOpen ? '' : 'hidden'
+              } flex flex-col lg:flex-row lg:items-center lg:space-x-8`}
+            >
+              {navItems.map((item, i) => {
+                return (
+                  <Link href={item.href} key={i}>
+                    <a>{item.name}</a>
+                  </Link>
+                );
+              })}
+              <li className="text-sm">
+                {!session && (
+                  <>
+                    <Button
+                      onClick={() => {
+                        signIn('twitter');
+                      }}
+                      title={'sign in'}
+                      variant="primary"
+                      className="mx-2 my-2 lg:my-0"
+                    >
+                      Sign in
+                    </Button>
+                  </>
+                )}
+                {session && (
+                  <>
+                    <Button href="/app" title="App" variant="primary">
+                      App
+                    </Button>
+                    <Button
+                      onClick={() => signOut()}
+                      title={'sign in'}
+                      variant="primary"
+                      className="mx-2"
+                    >
+                      Sign out
+                    </Button>
+                  </>
+                )}
+              </li>
+            </ul>
           </div>
-          <ul className="flex items-center space-x-8">
-            {navItems.map((item, i) => {
-              return (
-                <Link href={item.href} key={i}>
-                  <a>{item.name}</a>
-                </Link>
-              );
-            })}
-            <li className="text-sm">
-              {!session && (
-                <>
-                  <Button
-                    onClick={() => {
-                      signIn('twitter');
-                    }}
-                    title={'sign in'}
-                    variant="primary"
-                    className="mx-2"
-                  >
-                    Sign in
-                  </Button>
-                </>
-              )}
-              {session && (
-                <>
-                  <Button href="/app" title="App" variant="primary">
-                    App
-                  </Button>
-                  <Button
-                    onClick={() => signOut()}
-                    title={'sign in'}
-                    variant="primary"
-                    className="mx-2"
-                  >
-                    Sign out
-                  </Button>
-                </>
-              )}
-            </li>
-          </ul>
         </nav>
         <section className="w-full my-4">
           <div className="flex flex-row">