From b980c12afd6face5ce02b08b9c6c33f191d791a3 Mon Sep 17 00:00:00 2001
From: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Date: Sun, 22 Mar 2026 17:16:08 +0700
Subject: [PATCH] Update sidebar

---
 app/layout.tsx        | 19 ++++++-----
 app/page.tsx          | 52 ++++++++++++++++++++++++++---
 app/providers.tsx     | 12 +++++++
 components/Navbar.tsx | 78 +++++++++++++++++++++++++++----------------
 layouts/footer.tsx    |  4 +--
 lib/menu-context.tsx  | 34 +++++++++++++++++++
 6 files changed, 155 insertions(+), 44 deletions(-)
 create mode 100644 app/providers.tsx
 create mode 100644 lib/menu-context.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index 94a2dd3..8d6fa24 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "@/layouts/header";
 import Footer from "@/layouts/footer";
+import { Providers } from "./providers";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -43,16 +44,18 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}
       >
-        {/* Sticky top header */}
-        <Header />
+        <Providers>
+          {/* Sticky top header */}
+          <Header />
 
-        {/* Page content (grows to fill remaining height) */}
-        <div className="flex-1">
-          {children}
-        </div>
+          {/* Page content (grows to fill remaining height) */}
+          <div className="flex-1">
+            {children}
+          </div>
 
-        {/* Footer always at bottom */}
-        <Footer />
+          {/* Footer always at bottom */}
+          <Footer />
+        </Providers>
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index de4dd52..16bbac2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Navbar from "@/components/Navbar";
 import CartProduct from "@/components/CartProduct";
 import { MENU_CATEGORIES, MOCK_PRODUCTS } from "@/lib/constants";
+import { useMenu } from "@/lib/menu-context";
 
 /**
  * Main page — sidebar + product grid layout.
@@ -20,10 +21,13 @@ import { MENU_CATEGORIES, MOCK_PRODUCTS } from "@/lib/constants";
  *   Expanded  sidebar:  1 → sm:2 → lg:2 → xl:3 → 2xl:4
  */
 export default function Home() {
+  /* Shared category state comes from MenuContext so the header mobile menu
+   * and this sidebar always reflect the same selection. */
+  const { activeCategory, setActiveCategory } = useMenu();
+
   /* Start collapsed (false) so SSR and client initial render match.
    * useEffect sets the correct value after hydration completes. */
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [activeCategory, setActiveCategory] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
 
   /* After mount: sync sidebar with viewport width, then subscribe to changes.
@@ -38,6 +42,14 @@ export default function Home() {
     return () => mq.removeEventListener("change", handler);
   }, []);
 
+  /* Clear search whenever the active category changes (triggered from either
+   * the sidebar on md+ or the header scrollable menu on < md).
+   * setState-in-effect is intentional here — suppress the lint rule. */
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setSearchQuery("");
+  }, [activeCategory]);
+
   /* Filter products by availability, active category, and search query.
    * p.available defaults to true when undefined (opt-in unavailability). */
   const filteredProducts = MOCK_PRODUCTS.filter((p) => {
@@ -73,10 +85,7 @@ export default function Home() {
         isOpen={isSidebarOpen}
         onToggle={() => setIsSidebarOpen((prev) => !prev)}
         activeCategory={activeCategory}
-        onCategoryChange={(id) => {
-          setActiveCategory(id);
-          setSearchQuery(""); // clear search when switching category
-        }}
+        onCategoryChange={setActiveCategory}
       />
 
       {/* ── Main content ── */}
@@ -128,6 +137,39 @@ export default function Home() {
           </div>
         </div>
 
+        {/* ── Mobile category menu — visible only on < md, below search, above products ── */}
+        <div className="md:hidden -mx-4 px-4 overflow-x-auto mb-4">
+          <div className="flex items-center gap-1.5 pb-1">
+            {MENU_CATEGORIES.map((cat) => {
+              const isActive = activeCategory === cat.id;
+              return (
+                <button
+                  key={cat.id}
+                  onClick={() => setActiveCategory(cat.id)}
+                  className={`
+                    flex items-center gap-1.5 px-3 py-2 rounded-xl
+                    text-sm font-medium whitespace-nowrap shrink-0
+                    cursor-pointer border-none transition-all duration-150
+                    ${
+                      isActive
+                        ? "bg-(--color-primary) text-white shadow-sm"
+                        : "bg-transparent text-(--color-text-secondary) hover:bg-(--color-border-light) hover:text-(--color-primary-dark)"
+                    }
+                  `}
+                >
+                  <i
+                    className={`
+                      ${cat.icon} text-sm shrink-0
+                      ${isActive ? "text-white" : "text-(--color-primary)"}
+                    `}
+                  ></i>
+                  <span>{cat.name}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
         {/* ── Product grid ── */}
         {filteredProducts.length > 0 ? (
           <div className={`grid gap-4 ${gridCols}`}>
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..6e35041
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { MenuProvider } from "@/lib/menu-context";
+
+/**
+ * Client-side providers wrapper.
+ * Placed here so the server-only app/layout.tsx can wrap its children
+ * with client context providers without becoming a client component itself.
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <MenuProvider>{children}</MenuProvider>;
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index e71c8ef..85f37d8 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -32,11 +32,13 @@ export default function Navbar({
   return (
     <aside
       className={`
-        sticky shrink-0 flex flex-col z-20
+        sticky shrink-0 flex-col z-20
         border-r border-(--color-border)
         bg-(--color-bg-sidebar)
         overflow-y-auto overflow-x-hidden
         transition-all duration-250 ease-in-out
+        hidden md:flex
+        xl:w-60
         ${isOpen ? "w-60" : "w-16"}
       `}
       style={{
@@ -48,22 +50,31 @@ export default function Navbar({
       <div
         className={`
           flex items-center border-b border-(--color-border) shrink-0
+          xl:justify-between xl:px-4 xl:py-3
           ${isOpen ? "justify-between px-4 py-3" : "justify-center px-0 py-3"}
         `}
       >
-        {isOpen && (
-          <span className="text-xs font-bold uppercase tracking-widest text-(--color-text-muted) whitespace-nowrap">
-            <i className="fa-solid fa-utensils mr-2 text-(--color-primary)"></i>
-            Thực Đơn
-          </span>
-        )}
+        {/* Title — shown when expanded, always shown on xl+ */}
+        <span
+          className={`
+            text-xs font-bold uppercase tracking-widest
+            text-(--color-text-muted) whitespace-nowrap
+            ${isOpen ? "block" : "hidden"} xl:block
+          `}
+        >
+          <i className="fa-solid fa-utensils mr-2 text-(--color-primary)"></i>
+          Thực Đơn
+        </span>
+
+        {/* Toggle button — hidden on xl+ (sidebar is always expanded there) */}
         <button
           onClick={onToggle}
           title={isOpen ? "Thu gọn menu" : "Mở rộng menu"}
           className="w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer border-none
                      text-(--color-text-muted) bg-transparent
                      hover:bg-(--color-border-light) hover:text-(--color-primary)
-                     transition-colors duration-150 shrink-0"
+                     transition-colors duration-150 shrink-0
+                     xl:hidden"
         >
           <i
             className={`fa-solid text-sm transition-transform duration-250 ${
@@ -86,6 +97,7 @@ export default function Navbar({
                   className={`
                     w-full flex items-center rounded-xl text-sm font-medium
                     cursor-pointer border-none transition-all duration-150
+                    xl:gap-3 xl:px-3 xl:py-2.5 xl:justify-start
                     ${isOpen ? "gap-3 px-3 py-2.5" : "justify-center px-0 py-2.5"}
                     ${
                       isActive
@@ -102,17 +114,16 @@ export default function Navbar({
                     `}
                   ></i>
 
-                  {/* Label — hidden when collapsed */}
-                  {isOpen && (
-                    <span className="whitespace-nowrap overflow-hidden text-ellipsis">
-                      {cat.name}
-                    </span>
-                  )}
+                  {/* Label — hidden when collapsed, always shown on xl+ */}
+                  <span
+                    className={`
+                      whitespace-nowrap overflow-hidden text-ellipsis
+                      ${isOpen ? "block" : "hidden"} xl:block
+                    `}
+                  >
+                    {cat.name}
+                  </span>
 
-                  {/* Active indicator arrow */}
-                  {isOpen && isActive && (
-                    <i className="fa-solid fa-chevron-right ml-auto text-xs opacity-70 shrink-0"></i>
-                  )}
                 </button>
               </li>
             );
@@ -124,20 +135,29 @@ export default function Navbar({
       <div
         className={`
           shrink-0 border-t border-(--color-border) py-3
+          xl:px-4
           ${isOpen ? "px-4" : "px-0 flex justify-center"}
         `}
       >
-        {isOpen ? (
-          <div className="flex items-center gap-2 text-xs text-(--color-text-muted)">
-            <i className="fa-solid fa-clock text-(--color-accent) shrink-0"></i>
-            <span>{SHOP_INFO.openHours}</span>
-          </div>
-        ) : (
-          <i
-            className="fa-solid fa-clock text-sm text-(--color-text-muted)"
-            title={SHOP_INFO.openHours}
-          ></i>
-        )}
+        {/* Text row — shown when expanded, always shown on xl+ */}
+        <div
+          className={`
+            items-center gap-2 text-xs text-(--color-text-muted)
+            ${isOpen ? "flex" : "hidden"} xl:flex
+          `}
+        >
+          <i className="fa-solid fa-clock text-(--color-accent) shrink-0"></i>
+          <span>{SHOP_INFO.openHours}</span>
+        </div>
+
+        {/* Icon-only — shown when collapsed, hidden on xl+ */}
+        <i
+          className={`
+            fa-solid fa-clock text-sm text-(--color-text-muted)
+            ${isOpen ? "hidden" : "block"} xl:hidden
+          `}
+          title={SHOP_INFO.openHours}
+        ></i>
       </div>
     </aside>
   );
diff --git a/layouts/footer.tsx b/layouts/footer.tsx
index 8b653f8..00d8660 100644
--- a/layouts/footer.tsx
+++ b/layouts/footer.tsx
@@ -195,9 +195,9 @@ export default function Footer() {
             © {new Date().getFullYear()} {SHOP_INFO.name}. All rights reserved.
           </span>
           <span className="flex items-center gap-1">
-            Made with{" "}
+            Được vận hành {" "}
             <i className="fa-solid fa-heart text-(--color-accent) mx-1"></i>{" "}
-            in Vietnam
+            bằng Drinkool
           </span>
         </div>
       </div>
diff --git a/lib/menu-context.tsx b/lib/menu-context.tsx
new file mode 100644
index 0000000..942b66e
--- /dev/null
+++ b/lib/menu-context.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { createContext, useContext, useState } from "react";
+
+interface MenuContextType {
+  /** Currently selected category id */
+  activeCategory: string;
+  /** Update the active category */
+  setActiveCategory: (id: string) => void;
+}
+
+const MenuContext = createContext<MenuContextType>({
+  activeCategory: "all",
+  setActiveCategory: () => {},
+});
+
+/**
+ * Provides shared activeCategory state to both the Header (mobile scrollable menu)
+ * and the Navbar sidebar (md+), so both always reflect the same selection.
+ */
+export function MenuProvider({ children }: { children: React.ReactNode }) {
+  const [activeCategory, setActiveCategory] = useState("all");
+
+  return (
+    <MenuContext.Provider value={{ activeCategory, setActiveCategory }}>
+      {children}
+    </MenuContext.Provider>
+  );
+}
+
+/** Consume the shared menu state anywhere inside MenuProvider */
+export function useMenu() {
+  return useContext(MenuContext);
+}
