Merge pull request #87 from Mr-Ben-Merch-Store/RedCat888-patch-3

Add mobile fixes
Mr-Ben-Merch-Store · Aug 30, 2024 · 30795e2 · 30795e2
2 parents 96fdff8 + fa6aed3
commit 30795e2
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 17 deletions.
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
@@ -1,32 +1,73 @@
-import Link from 'next/link';
-import React from 'react';
+"use client";
 
-import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { ShoppingCartIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 
 export default function Navbar() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleMenu = () => setIsOpen(!isOpen);
+
     return (
-        <nav className="bg-zinc-950 p-4">
-            <ul className="flex justify-between text-textLight mx-10">
-                <div className="flex items-center space-x-12 text-2xl">
-                    <li>
+        <nav className="bg-zinc-950 p-4 relative">
+            <div className="flex items-center justify-between mx-10">
+                {/* Hamburger Menu */}
+                <button
+                    onClick={toggleMenu}
+                    className="lg:hidden absolute left-0 top-1/2 transform -translate-y-1/2 p-2 z-20"
+                >
+                    {isOpen ? (
+                        <XMarkIcon className="w-10 h-10 text-textLight" />
+                    ) : (
+                        <Bars3Icon className="w-10 h-10 text-textLight" />
+                    )}
+                </button>
+
+                {/* Desktop Links */}
+                <div className="flex items-center space-x-12 text-2xl text-textLight">
+                    <li className="list-none">
                         <Link href=".">Home</Link>
                     </li>
-                    <li>
+                    <li className="lg:flex hidden">
                         <Link href="/about">About</Link>
                     </li>
-                    <li>
+                    <li className="lg:flex hidden">
                         <Link href="/store">Store</Link>
                     </li>
                 </div>
 
-                <li>
+                {/* Mobile Cart Icon */}
+                <div className="flex items-center lg:hidden absolute right-0 top-1/2 transform -translate-y-1/2 pr-4">
                     <Link href="/cart">
-                        <ShoppingCartIcon className="w-10 h-10" />
+                        <ShoppingCartIcon className="w-10 h-10 text-textLight" />
                     </Link>
-                </li>
+                </div>
 
-
+                {/* Desktop Cart Icon */}
+                <div className="hidden lg:flex items-center">
+                    <Link href="/cart">
+                        <ShoppingCartIcon className="w-10 h-10 text-textLight" />
+                    </Link>
+                </div>
+            </div>
+
+            {/* Mobile Menu */}
+            <ul
+                className={`absolute top-16 left-0 bg-zinc-950 ${
+                    isOpen ? 'animate-slide-in-left' : 'hidden'
+                } text-textLight transition-all duration-300 ease-in-out z-10 w-auto max-w-xs p-4`}
+            >
+                <li className="py-4 border-b border-gray-700">
+                    <Link href="/">Home</Link>
+                </li>
+                <li className="py-4 border-b border-gray-700">
+                    <Link href="/about">About</Link>
+                </li>
+                <li className="py-4 border-b border-gray-700">
+                    <Link href="/store">Store</Link>
+                </li>
             </ul>
         </nav>
     );
-}
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -21,9 +21,11 @@ h3 {
 p {
     @apply text-textDim;
 }
+
 footer {
     @apply text-bgLight;
 }
-p a{
-    color:#B4FFDC;
+
+p a {
+    color: #B4FFDC;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -38,6 +38,7 @@ const config: Config = {
             },
             animation: {
                 'bounce-in': 'bounce-in-top 1.1s both',
+                'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
             },
             keyframes: {
                 'bounce-in-top': {
@@ -82,9 +83,19 @@ const config: Config = {
                         'animation-timing-function': 'ease-out',
                     },
                 },
+                'slide-in-left': {
+                    '0%': {
+                        transform: 'translateX(-100%)',
+                        opacity: '0',
+                    },
+                    '100%': {
+                        transform: 'translateX(0)',
+                        opacity: '1',
+                    },
+                },
             },
         },
     },
     plugins: [],
 };
-export default config;
+export default config;