Create layouts/MainLayout/MainLayout.js

layouts/MainLayout/MainLayout.js

@@ -0,0 +1,40 @@
+// layouts/MainLayout.js
+import { useState } from 'react';
+import Link from 'next/link';
+// We need these components for the layout to work
+import GlassDrawer from '../components/GlassDrawer';
+import GlassDock from '../components/GlassDock';
+
+export default function MainLayout({ children }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <div className="min-h-screen bg-[#F8FAFC]">
+      {/* 1. Top Navigation Bar */}
+      <div className="fixed top-0 left-0 right-0 z-40 flex justify-between items-center p-6 pt-safe-top pointer-events-none">
+        {/* Menu Button (Top Left) */}
+        <button 
+          onClick={() => setIsMenuOpen(true)}
+          className="pointer-events-auto active:scale-90 transition-transform"
+        >
+          {/* Ensure this file exists in public/assets/ */}
+          <img 
+            src="/assets/menu_button.png" 
+            alt="Menu" 
+            className="w-12 h-auto drop-shadow-md" 
+          />
+        </button>
+      </div>
+
+      {/* 2. The Slide-out Menu */}
+      <GlassDrawer isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
+      
+      {/* 3. The Main Content (The Feed) */}
+      <main>{children}</main>
+
+      {/* 4. The Bottom Dock (Home/Plus/Profile) */}
+      <GlassDock activeTab={activeTab} setActiveTab={setActiveTab} />
+    </div>
+  );
+}