🔀 Merge pull request #1 from wapuugotchi/feature/mobile_nav

Feature/mobile nav
wapuugotchi · Mar 11, 2024 · 2786a0f · 2786a0f
2 parents 99e8ed4 + 02cca78
commit 2786a0f
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "typescript": "5.0.2"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",

diff --git a/src/components/item_list.tsx b/src/components/item_list.tsx
@@ -1,5 +1,4 @@
 import {Collection, Item} from "@/lib/types";
-import Image from "next/image";
 
 export default function ItemList(collection: Collection) {
 
@@ -18,16 +17,20 @@ export default function ItemList(collection: Collection) {
         return tempArray
     }
 
+    function itemKey(item: Item) {
+        return collection.caption.toLowerCase() + "_" + item.meta.key
+    }
+
     function buildItem(item: Item) {
         return (
-            <div className="w-full md:w-1/2 lg:w-1/4 xl:w-1/6" key={ item.meta.name } id={ item.meta.name }>
-                <div className={ item.meta.deactivated === 0 ? "item activated" : "item deactivated"} key={ item.meta.key + "_card" }>
-                    <div className="description" key={ item.meta.key + "_info" }>
+            <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/6" key={ itemKey(item) } id={ itemKey(item) }>
+                <div className={ item.meta.deactivated === 0 ? "item activated" : "item deactivated"} key={ itemKey(item) + "_card" }>
+                    <div className="description" key={ itemKey(item) + "_info" }>
                         { getDescription(item) }
-                        <p className="text-md" key={ item.meta.key + "_description" }>{ item.meta.description }</p>
+                        <p className="text-md" key={ itemKey(item) + "_description" }>{ item.meta.description }</p>
                     </div>
                     { getStatusBadge(item) }
-                    <img src={ item.preview } alt={ item.meta.name } key={ item.meta.key + "_preview" } className="w-full"/>
+                    <img src={ item.preview } alt={ item.meta.name } key={ itemKey(item) + "_preview" } className="w-full"/>
                 </div>
             </div>
         )
@@ -37,20 +40,20 @@ export default function ItemList(collection: Collection) {
         if( item.meta.author.length > 0) {
             return (
                 <div>
-                    <h1 className="text-xl font-bold">{item.meta.name }</h1>
+                    <h1 className="text-xl font-bold">{ item.meta.name }</h1>
                     <span className="text-blue-500 text-lg font-bold">{ item.meta.author }</span>
                 </div>
             )
         }
         return (
-            <h1 className="text-xl font-bold">{item.meta.name}</h1>
+            <h1 className="text-xl font-bold">{ item.meta.name }</h1>
         )
     }
 
     function getStatusBadge(item: Item) {
         if(item.meta.deactivated === 1) {
             return (
-                <span className="bg-red-500 text-white text-md font-bold py-2 bottom-5 left-0 absolute w-full z-10" key={ item.meta.key + "_status" }>Deactivated</span>
+                <span className="bg-red-500 text-white text-md font-bold py-2 bottom-5 left-0 absolute w-full z-10" key={ itemKey(item) + "_status" }>Deactivated</span>
             )
         }
         return (
@@ -60,7 +63,7 @@ export default function ItemList(collection: Collection) {
 
     return (
         <div className="w-full text-center py-10" id={ collection.caption.toLowerCase() }>
-            <h1 className="text-3xl font-bold" id={ collection.caption.toLowerCase() + "_header" }>{collection.caption}</h1>
+            <h1 className="text-3xl font-bold dark:text-white text-black" id={ collection.caption.toLowerCase() + "_header" }>{collection.caption}</h1>
             <div className="py-3 px-4 lg:px-12 flex flex-wrap justify-center" key={ collection.caption.toLowerCase() }>
                 {getItems().map((value) => {
                     return buildItem(value)

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,11 +3,13 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
+        <Head>
+            <link rel="icon" href="/favicon.ico" sizes="any"/>
+        </Head>
+        <body>
+            <Main/>
+            <NextScript/>
+        </body>
     </Html>
   )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,12 +6,12 @@ export default function Home() {
 
     const [config, setConfig] = useState({} as Config);
     const [collections, setCollections] = useState([] as string[]);
+    const [mobileMenu, setMobileMenu] = useState(false);
 
     useEffect(() => {
         fetch("https://api.wapuugotchi.com/collection")
             .then(value => value.json()).then(value => {
             setConfig(value as Config)
-            console.log(config)
             let collections = [];
             for (let index in config.collections) {
                 collections.push(config.collections[index].caption)
@@ -25,6 +25,7 @@ export default function Home() {
     }
 
     function scrollTo(collection: Collection) {
+        setMobileMenu(false);
         let element = document.getElementById(collection.caption.toLowerCase() + "_header");
         if (element) {
             element.scrollIntoView({behavior: "smooth", inline: "center", block: "center"});
@@ -41,10 +42,29 @@ export default function Home() {
     }
 
     return (
-        <div className="w-full h-full bg-gray-100" key={"home_page"}>
+        <div className="w-screen h-full bg-gray-100 dark:bg-gray-700" key={"home_page"}>
+            <div className={mobileMenu ? "bg-gray-800 w-screen h-full fixed z-20 translate-x-0 transition-all duration-150 ease-in-out md:-translate-x-full" : "bg-gray-800 w-screen h-full fixed z-10 -translate-x-full transition-all duration-150 ease-in-out"} key={"mobile_menu"}>
+                <ul className="flex flex-col gap-3 pt-12 px-5">
+                    {
+                        collections.map((collection) => {
+                            return (
+                                <li key={getCollection(collection).caption}>
+                                    <a className={isInView(getCollection(collection)) ? "nav-item active" : "nav-item"}
+                                       onClick={ event => scrollTo(getCollection(collection))}>{getCollection(collection).caption }</a>
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
             <div className="w-full h-12 bg-gray-800 flex flex-row justify-between py-1 px-5 z-20 fixed">
-                <h1 className="text-2xl font-bold text-white">WapuuGotchi Collection</h1>
-                <ul className="flex flex-row gap-3 pr-5 sm:hidden md:flex">
+                <div className="flex flex-row gap-2">
+                    <img src="/logo.svg" className="h-8 w-8 py-2"/>
+                    <h1 className="text-2xl font-bold text-white text-center">
+                        WapuuGotchi Collection
+                    </h1>
+                </div>
+                <ul className="flex-row gap-3 pr-5 hidden md:flex">
                     {
                         collections.map((collection) => {
                             return (
@@ -56,8 +76,20 @@ export default function Home() {
                         })
                     }
                 </ul>
+                <a className="block md:hidden text-white py-2" onClick={ event => setMobileMenu(!mobileMenu)}>
+                    {
+                        mobileMenu ?
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                        </svg>
+                        :
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
+                        </svg>
+                    }
+                </a>
             </div>
-            <div className="py-12">
+            <div className="py-12 z-0">
                 {
                     collections.map((value) => {
                         return ItemList(getCollection(value))

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+root {
+    @apply w-full h-full bg-gray-100;
+}
+
 ::-webkit-scrollbar{
     display: none;
 }
@@ -22,7 +26,7 @@
 }
 
 .item {
-    @apply shadow-md rounded-md overflow-hidden inline-block relative my-2;
+    @apply shadow-md rounded-md overflow-hidden inline-block relative my-2 bg-white dark:bg-gray-800;
 }
 
 .item img {
@@ -31,7 +35,7 @@
 }
 
 .item .description {
-    @apply opacity-0 bg-neutral-700 bg-opacity-75 w-full h-full text-white absolute left-0 top-0 z-10 p-5 transition-all duration-300 ease-in-out;
+    @apply opacity-0 bg-black bg-opacity-65 w-full h-full text-white absolute left-0 top-0 z-10 p-5 transition-all duration-300 ease-in-out;
 }
 
 .item:hover .description {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    require('@tailwindcss/forms'),
     require('@tailwindcss/typography')
   ],
 }