Update mobile nav

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",

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) {
 
@@ -64,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)

src/pages/index.tsx

@@ -42,8 +42,8 @@ export default function Home() {
     }
 
     return (
-        <div className="w-full h-full bg-gray-100" key={"home_page"}>
-            <div className={mobileMenu ? "bg-gray-800 w-full h-full fixed z-10" : "hidden"} key={"mobile_menu"}>
+        <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) => {
@@ -89,7 +89,7 @@ export default function Home() {
                     }
                 </a>
             </div>
-            <div className="py-12">
+            <div className="py-12 z-0">
                 {
                     collections.map((value) => {
                         return ItemList(getCollection(value))

src/styles/globals.css

@@ -26,7 +26,7 @@ root {
 }
 
 .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 {
@@ -35,7 +35,7 @@ root {
 }
 
 .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 {

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    require('@tailwindcss/forms'),
     require('@tailwindcss/typography')
   ],
 }