‍🧄🤹🏻‍♂️ ↝ Created inventory layout

Signal-K · Jan 6, 2024 · 8020aea · 8020aea
1 parent 2d700a6
commit 8020aea
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/components/Section/Layout.tsx b/components/Section/Layout.tsx
@@ -2,6 +2,7 @@ import Sidebar, { DesktopSidebar } from "./Sidebar";
 import Navbar from "./Navbar";
 import React, { ReactNode, useEffect, useState } from "react";
 import Bottombar from "../Core/BottomBar";
+import { InventoryMenu } from "../Content/Inventory/ItemGroup";
 
 interface DashboardLayoutProps {
   children: ReactNode;
@@ -10,8 +11,7 @@ interface DashboardLayoutProps {
 const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
   const [isMobile, setIsMobile] = useState(false);
 
-  useEffect(() => {
-    // Check if window is defined before accessing it
+  useEffect(() => {     // Check if window is defined before accessing it
     if (typeof window !== "undefined") {
       const checkIsMobile = () => {
         setIsMobile(window.innerWidth <= 768);
@@ -44,11 +44,45 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
 
 export default Layout;
 
+export const InventoryLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const checkIsMobile = () => {
+        setIsMobile(window.innerWidth <= 768);
+      };
+      checkIsMobile();
+      window.addEventListener("resize", checkIsMobile);
+      return () => {
+        window.removeEventListener('resize', checkIsMobile);
+      };
+    };
+  }, []);
+
+  return (
+    <>
+      <main className="h-max pb-10 grow pt-6">
+        <Navbar />
+        <div className="py-5"><center><div className="py-12"><InventoryMenu /></div></center></div>
+        <div className="py-12">
+          {children}
+        </div>
+      </main>
+      {isMobile && (
+        <div className="md:hidden overflow-y-auto h-screen p-4">
+          <main className="h-max pb-10 grow">{children}</main>
+          <Bottombar />
+        </div>
+      )}
+    </>
+  );
+};
+
 export const LayoutWithSidebar: React.FC<DashboardLayoutProps> = ({ children }) => {
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    // Check if window is defined before accessing it
     if (typeof window !== "undefined") {
       const checkIsMobile = () => {
         setIsMobile(window.innerWidth <= 768);

diff --git a/components/Section/Navbar.tsx b/components/Section/Navbar.tsx
@@ -133,7 +133,7 @@ export default function Navbar() {
             </Transition>
           </Popover>
 
-          <a href="/explore" className="text-sm font-semibold leading-6 text-gray-900">
+          <a href="/inventory" className="text-sm font-semibold leading-6 text-gray-900"> {/* Was originally /explore */}
             Inventory
           </a>
           <a href="/feed" className="text-sm font-semibold leading-6 text-gray-900">

diff --git a/pages/inventory/index.tsx b/pages/inventory/index.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import InventoryItemsGroup, { InventoryMenu, UserBackpackInventory } from "../../components/Content/Inventory/ItemGroup";
-import Layout from "../../components/Section/Layout";
+import Layout, { InventoryLayout } from "../../components/Section/Layout";
 
 export default function Inventory() {
     return (
-        <Layout>
-            <div className="py-10 px-10">
-                <InventoryMenu />
-                <UserBackpackInventory />
-            </div>
-        </Layout>
-    )
-}
+      <InventoryLayout>
+        <div className="grid grid-cols-3 gap-4 px-5">
+            <div><UserBackpackInventory /></div>
+        </div>
+      </InventoryLayout>
+    );
+};