* Extended functionalities

* Added different UIs

meal-plan-frontend/src/components/layout/AppLayout.tsx

@@ -1,17 +1,50 @@
 import { useState } from "react";
 import { Outlet } from "react-router-dom";
+import { useLayout } from "@/store/layoutStore";
+import { useReminderNotifications } from "@/hooks/useReminderNotifications";
 import { Navbar } from "./Navbar";
-import { Sidebar } from "./Sidebar";
+import { Sidebar, type SidebarVariant } from "./Sidebar";
+import { HorizontalNav } from "./HorizontalNav";
+
+function sidebarVariant(layout: string): SidebarVariant {
+  if (layout === "compact") return "compact";
+  if (layout === "wide") return "wide";
+  return "default";
+}
+
+function mainClass(layout: string): string {
+  const base = "mx-auto w-full flex-1 px-4 py-6 sm:px-6 sm:py-8";
+  if (layout === "topnav") return `${base} max-w-7xl`;
+  return `${base} max-w-6xl`;
+}
 
 export function AppLayout() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { layout } = useLayout();
+  useReminderNotifications();
+
+  if (layout === "topnav") {
+    return (
+      <div className="flex min-h-screen flex-col">
+        <Navbar showMenuToggle={false} />
+        <HorizontalNav />
+        <main className={mainClass(layout)}>
+          <Outlet />
+        </main>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen lg:flex">
-      <Sidebar open={sidebarOpen} onNavigate={() => setSidebarOpen(false)} />
+      <Sidebar
+        open={sidebarOpen}
+        variant={sidebarVariant(layout)}
+        onNavigate={() => setSidebarOpen(false)}
+      />
       <div className="flex min-h-screen flex-1 flex-col">
         <Navbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
-        <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-6 sm:px-6 sm:py-8">
+        <main className={mainClass(layout)}>
           <Outlet />
         </main>
       </div>