Add menu panel for mobile + more

spotlightify · Aug 14, 2024 · 8290b88 · 8290b88
1 parent f7552ec
commit 8290b88
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 42 deletions.
diff --git a/public/menu.svg b/public/menu.svg
diff --git a/src/app/commands/page.tsx b/src/app/commands/page.tsx
@@ -4,10 +4,10 @@ import features from "../data/features";
 export default function Page() {
     return (
         <div className="flex items-center flex-col gap-16">
-            <h3 className="text-5xl">
+            <h3 className="text-4xl">
                 Commands
             </h3>
-            <div className='inline-grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full'>
+            <div className='inline-grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full pl-4 pr-4'>
                 {
                     features.map((feature, index) => (
                         <FeatureCard key={index} title={feature.Name} description={feature.Description} keyword={feature.Keyword} icon={feature.Icon} />

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/favicon1.ico b/src/app/favicon1.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,35 +11,14 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const [mobileView, setMobileView] = useState(false);
-
-  const isMobile = mobileView || window.innerWidth < 640;
-
-  useEffect(() => {
-    if (window.innerWidth >= 640) {
-      setMobileView(false);
-    }
-
-    const handleResize = () => {
-      if (window.innerWidth < 640) {
-        setMobileView(true);
-      } else {
-        setMobileView(false);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <html lang="en" className="h-auto w-full">
+      <head>
+        <title>Spotlightify</title>
+      </head>
       <body className={`${GeistSans.className} h-auto w-full overflow-auto flex flex-col items-center`}>
-        {!isMobile && <NavBar />}
-        <main style={{ backgroundColor: "#fefefe" }} className="max-w-4xl ml-4 mr-4 w-full mt-28 sm:mt-24 sm:mb-24">
+        <NavBar />
+        <main style={{ backgroundColor: "#fefefe" }} className="max-w-4xl ml-4 mr-4 w-full mt-28 sm:mt-24 sm:mb-10 pb-10">
           {children}
         </main>
       </body>

diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
@@ -16,7 +16,7 @@ export default function Page() {
         <div className="flex flex-col ml-6 mr-6 ">
 
             <div className="">
-                <h2 className="text-3xl font-bold">Spotify Authentication Instructions</h2>
+                <h2 className="text-4xl">Spotify Authentication Instructions</h2>
                 <p className="mt-12">
                     To authenticate your Spotify Web API app with Spotlightify, follow these
                     simple steps:

diff --git a/src/components/ui/navbar.tsx b/src/components/ui/navbar.tsx
@@ -5,31 +5,74 @@ import LogoSVG from "/public/logo.svg";
 import MenuSVG from "/public/menu.svg";
 import Image from "next/image";
 import Link from "next/link";
+import { Button } from "./button";
+
+interface MobileMenuProps {
+    onClose: () => void;
+    isOpen: boolean;
+}
+
+function MobileMenu({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+    return (
+        <>
+            <div
+                style={{ background: "#191414" }}
+                className={`
+                    w-80 h-screen fixed right-0 top-0 z-50 
+                    transform transition-transform duration-300 ease-in-out
+                    ${isOpen ? 'translate-x-0' : 'translate-x-full'}
+                `}
+            >
+                <div className="pl-5 pt-5 flex flex-col text-3xl gap-2">
+                    <Image className="size-10" src={LogoSVG} alt="Spotlightify logo" />
+                    <Link onClick={onClose} href="/">
+                        Home
+                    </Link>
+                    <Link onClick={onClose} href="/commands">
+                        Commands
+                    </Link>
+                    <Link onClick={onClose} href="/setup">
+                        Setup
+                    </Link>
+                </div>
+            </div>
+            {isOpen && (
+                <div
+                    className="h-screen w-screen opacity-50 bg-black z-40 fixed left-0 top-0"
+                    onClick={onClose}
+                />
+            )}
+        </>
+    );
+}
 
 export default function NavBar() {
+    const [openNavMenu, setOpenNavMenu] = useState(false);
 
     return (
-        <nav style={{ background: "#191414", color: "#b3b3b3" }} className="fixed w-screen top-0 left-0 h-20 sm:h-14 border-b-2 border-b-gray-600 z-50">
-            <div className="flex justify-center sm:justify-between items-center h-full pl-4 pr-4">
-                <Link href={"/"} className="flex justify-center h-full items-center gap-2">
-                    <Image className="size-10" src={LogoSVG} alt={"Spotlightify logo"} />
+        <nav style={{ background: "#191414", color: "#b3b3b3" }} className="fixed w-screen top-0 left-0 h-16 sm:h-14 border-b-2 border-b-gray-600 z-50">
+            <div className="flex justify-between sm:justify-between items-center h-full sm:pl-4 sm:pr-4 pl-6 pr-6">
+                <div className="inline-block sm:hidden w-8">
+                </div>
+                <Link href="/" className="flex justify-center h-full items-center gap-2">
+                    <Image className="size-10" src={LogoSVG} alt="Spotlightify logo" />
                     <div className="text-2xl">
                         Spotlightify
                     </div>
                 </Link>
-                <div className="flex gap-4 invisible sm:visible">
-                    <Link href={"/commands"}>
+                <div className="sm:flex gap-4 hidden sm:visible">
+                    <Link href="/commands">
                         Commands
                     </Link>
-                    <Link href={"/setup"}>
+                    <Link href="/setup">
                         Setup
                     </Link>
                 </div>
-                {/* TODO, make mobile friendly */}
-                {/* <button onClick={() => setOpenNavMenu(!openNavMenu)}>
-                    <Image className="size-10" src={MenuSVG} alt={"Menu"} />
-                </button> */}
+                <button onClick={() => setOpenNavMenu(!openNavMenu)} className='sm:hidden h-8 w-8 flex justify-center items-center'>
+                    <Image alt="Mobile menu button" src={MenuSVG} />
+                </button>
+                <MobileMenu isOpen={openNavMenu} onClose={() => setOpenNavMenu(false)} />
             </div>
         </nav>
-    )
+    );
 }