From a1b2b06a18cb86258020d768f8297032f6576460 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Mon, 7 Sep 2026 16:41:59 +0530
Subject: [PATCH] implement dynamic shop page sidebar with category filters and
 mobile offcanvas drawer

---
 .../static/src/css/shop_style.css             |  70 +--
 .../static/src/scss/shop.scss                 | 480 +++++++++++-------
 .../views/shop_page.xml                       | 338 ++++++------
 3 files changed, 499 insertions(+), 389 deletions(-)

diff --git a/addons/dine360_dashboard/static/src/css/shop_style.css b/addons/dine360_dashboard/static/src/css/shop_style.css
index ca4c9c7..86291b2 100644
--- a/addons/dine360_dashboard/static/src/css/shop_style.css
+++ b/addons/dine360_dashboard/static/src/css/shop_style.css
@@ -38,22 +38,24 @@
     flex-wrap: wrap;
 }
 
-/* Left Sidebar Column (Categories/Filters) */
-.oe_website_sale #products_grid_before,
-.oe_website_sale .col-lg-3,
-.oe_website_sale aside {
-    flex: 0 0 280px !important;
-    max-width: 280px !important;
-    display: block !important;
-    visibility: visible !important;
-    padding-right: 20px;
-}
+/* Left Sidebar Column (Categories/Filters) - Desktop Only */
+@media (min-width: 992px) {
+    .oe_website_sale #products_grid_before,
+    .oe_website_sale .col-lg-3,
+    .oe_website_sale aside {
+        flex: 0 0 280px !important;
+        max-width: 280px !important;
+        display: block !important;
+        visibility: visible !important;
+        padding-right: 20px;
+    }
 
-/* Right Products Column */
-.oe_website_sale #products_grid,
-.oe_website_sale .col-lg-9 {
-    flex: 1 !important;
-    max-width: calc(100% - 280px) !important;
+    /* Right Products Column */
+    .oe_website_sale #products_grid,
+    .oe_website_sale .col-lg-9 {
+        flex: 1 !important;
+        max-width: calc(100% - 280px) !important;
+    }
 }
 
 /* Filter Sidebar Styling */
@@ -216,32 +218,38 @@
 }
 
 /* Mobile Responsive */
-@media (max-width: 991px) {
-
+@media (max-width: 991.98px) {
     .oe_website_sale #products_grid_before,
-    .oe_website_sale .col-lg-3,
-    .oe_website_sale aside {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        margin-bottom: 20px;
+    .oe_website_sale aside:not(.mobile-category-offcanvas),
+    aside#products_grid_before {
+        display: none !important;
+        visibility: hidden !important;
+        height: 0 !important;
+        max-height: 0 !important;
+        overflow: hidden !important;
+        margin: 0 !important;
+        padding: 0 !important;
     }
 
     .oe_website_sale #products_grid,
     .oe_website_sale .col-lg-9 {
         flex: 0 0 100% !important;
         max-width: 100% !important;
+        width: 100% !important;
     }
 }
 
-/* Ensure visibility of all filter elements */
-.oe_website_sale .o_wsale_products_searchbar_form,
-.oe_website_sale .o_wsale_products_categories,
-.oe_website_sale #wsale_products_categories_collapse,
-.oe_website_sale .o_wsale_products_attributes,
-.oe_website_sale .o_wsale_products_price {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
+/* Ensure visibility of desktop filter elements */
+@media (min-width: 992px) {
+    .oe_website_sale .o_wsale_products_searchbar_form,
+    .oe_website_sale .o_wsale_products_categories,
+    .oe_website_sale #wsale_products_categories_collapse,
+    .oe_website_sale .o_wsale_products_attributes,
+    .oe_website_sale .o_wsale_products_price {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+    }
 }
 
 /* Category Navigation */
diff --git a/addons/dine360_theme_shivasakthi/static/src/scss/shop.scss b/addons/dine360_theme_shivasakthi/static/src/scss/shop.scss
index 13dc873..f4eface 100644
--- a/addons/dine360_theme_shivasakthi/static/src/scss/shop.scss
+++ b/addons/dine360_theme_shivasakthi/static/src/scss/shop.scss
@@ -454,18 +454,23 @@ body,
         }
     }
 
-    /* Tablet Layout Tweaks (991px to 768px) */
-    @media (max-width: 991px) {
+    /* Tablet & Mobile Layout Tweaks (Hide Desktop Sidebar, full width product grid) */
+    @media (max-width: 991.98px) {
         .o_wsale_products_main_row {
             display: flex !important;
             flex-direction: column !important;
         }
 
-        #products_grid_before {
-            width: 100% !important;
-            max-width: 100% !important;
-            flex: 0 0 100% !important;
-            margin-bottom: 20px;
+        #products_grid_before,
+        aside#products_grid_before,
+        .oe_website_sale aside:not(.mobile-category-offcanvas) {
+            display: none !important;
+            visibility: hidden !important;
+            height: 0 !important;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
         #products_grid {
@@ -535,12 +540,35 @@ body,
                 .o_sortby_dropdown {
                     margin-left: auto !important;
                 }
-
-                .btn-group.o_wsale_apply_grid,
-                .o_wsale_apply_grid {
-                    display: none !important;
-                }
             }
+
+            .btn-group.o_wsale_apply_grid,
+            .o_wsale_apply_grid,
+            .o_wsale_apply_list,
+            .o_wsale_apply_layout,
+            .btn-group:has(.fa-th-large),
+            .btn-group:has(.fa-th-list),
+            .btn-group:has(.fa-th),
+            .btn-group:has(.fa-list),
+            .btn-group:has(.fa-bars),
+            .o_wsale_products_pager .btn-group:not(.dropdown):not(.o_sortby_dropdown),
+            .o_wsale_products_pager a[href*="layout=grid"],
+            .o_wsale_products_pager a[href*="layout=list"] {
+                display: none !important;
+            }
+        }
+
+        /* Global Grid/List Button Hide on Mobile */
+        .btn-group.o_wsale_apply_grid,
+        .o_wsale_apply_grid,
+        .o_wsale_apply_list,
+        .o_wsale_apply_layout,
+        .btn-group:has(.fa-th-large),
+        .btn-group:has(.fa-th-list),
+        .btn-group:has(.fa-th),
+        .btn-group:has(.fa-list),
+        .btn-group:has(.fa-bars) {
+            display: none !important;
         }
 
         /* Mobile Categories Bar Button (Bottom-left of Search) */
@@ -594,173 +622,17 @@ body,
             display: none !important;
         }
 
-        /* Category Header/Toggle */
-        #products_grid_before {
-            order: 3 !important;
-            width: 100% !important;
-            max-width: 100% !important;
-            flex: 0 0 100% !important;
-            margin-bottom: 0 !important;
-            padding: 0 !important;
-            z-index: 1 !important;
-            position: static !important;
-        }
-
-        /* Backdrop for Mobile Categories Drawer */
-        .mobile-category-backdrop {
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            height: 100dvh !important;
-            background: rgba(14, 19, 23, 0.7) !important;
-            backdrop-filter: blur(4px) !important;
-            -webkit-backdrop-filter: blur(4px) !important;
-            z-index: 9999998 !important;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.3s ease, visibility 0.3s ease;
-            pointer-events: none;
-
-            &.show {
-                opacity: 1 !important;
-                visibility: visible !important;
-                pointer-events: auto !important;
-            }
-        }
-
-        /* Fixed Full-Height Mobile Drawer */
-        .mobile-category-offcanvas {
-            position: fixed !important;
-            top: 0 !important;
-            bottom: 0 !important;
-            left: 0 !important;
-            width: 300px !important;
-            max-width: 85vw !important;
-            height: 100vh !important;
-            height: 100dvh !important;
-            background: #ffffff !important;
-            z-index: 9999999 !important;
-            display: flex !important;
-            flex-direction: column !important;
-            box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
-            transform: translateX(-100%) !important;
-            transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important;
-            visibility: hidden;
+        /* Hide Desktop Sidebar on Mobile (since Mobile Offcanvas Drawer is used) */
+        #products_grid_before,
+        aside#products_grid_before,
+        .oe_website_sale aside:not(.mobile-category-offcanvas) {
+            display: none !important;
+            visibility: hidden !important;
+            height: 0 !important;
+            max-height: 0 !important;
             overflow: hidden !important;
-
-            &.show {
-                transform: translateX(0) !important;
-                visibility: visible !important;
-            }
-
-            .offcanvas-header {
-                background: #ffffff;
-                border-bottom: 1px solid #f0f0f0;
-                padding: 16px 20px;
-                flex-shrink: 0;
-
-                .drawer-header-icon {
-                    width: 32px;
-                    height: 32px;
-                    background: #ffb800;
-                    border-radius: 6px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 0.95rem;
-                }
-
-                .offcanvas-title {
-                    font-weight: 800 !important;
-                    font-size: 1.05rem !important;
-                    color: #0e1317 !important;
-                    letter-spacing: 0.5px;
-                }
-
-                .btn-close-drawer {
-                    width: 34px;
-                    height: 34px;
-                    background: #f4f4f4;
-                    border: 1px solid #e5e5e5;
-                    border-radius: 50%;
-                    cursor: pointer;
-                    transition: all 0.2s;
-
-                    &:hover {
-                        background: #ffb800;
-                        border-color: #ffb800;
-                    }
-                }
-            }
-
-            .offcanvas-body {
-                padding: 20px 16px;
-                overflow-y: auto !important;
-                -webkit-overflow-scrolling: touch !important;
-                flex: 1 1 auto;
-                height: calc(100vh - 65px) !important;
-                max-height: calc(100dvh - 65px) !important;
-
-                .category-list {
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-
-                    .category-item {
-                        margin-bottom: 10px;
-
-                        a {
-                            display: flex;
-                            align-items: center;
-                            padding: 12px 16px;
-                            border-radius: 10px;
-                            text-decoration: none;
-                            background: #fbfbfb;
-                            border: 1px solid #eeeeee;
-                            color: #222222;
-                            font-weight: 700;
-                            font-size: 0.95rem;
-                            text-transform: uppercase;
-                            letter-spacing: 0.3px;
-                            transition: all 0.2s ease;
-
-                            img {
-                                width: 26px;
-                                height: 26px;
-                                object-fit: contain;
-                                margin-right: 14px;
-                            }
-
-                            span {
-                                color: #222222;
-                                font-weight: 700;
-                            }
-
-                            &:hover {
-                                background: #fff8e7;
-                                border-color: #ffb800;
-                                color: #000000;
-                                transform: translateX(4px);
-                            }
-
-                            &.active {
-                                background: #ffb800 !important;
-                                border-color: #ffb800 !important;
-                                color: #000000 !important;
-                                font-weight: 900 !important;
-                                box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35) !important;
-
-                                span {
-                                    color: #000000 !important;
-                                    font-weight: 900 !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
         /* Product Grid (2 products per row) */
@@ -1054,20 +926,9 @@ body,
     box-shadow: 0 6px 20px rgba(254, 205, 79, 0.4) !important;
 }
 
-/* Global Highest Z-Index for Mobile Categories Drawer */
-.mobile-category-offcanvas {
-    position: fixed !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    width: 300px !important;
-    max-width: 85vw !important;
-    height: 100vh !important;
-    height: 100dvh !important;
-    background: #ffffff !important;
-    z-index: 9999999 !important;
-}
-
+/* ==========================================================================
+   Global Full-Height Mobile Categories Drawer (Root Level for Reparenting)
+   ========================================================================== */
 .mobile-category-backdrop {
     position: fixed !important;
     top: 0 !important;
@@ -1075,5 +936,240 @@ body,
     width: 100vw !important;
     height: 100vh !important;
     height: 100dvh !important;
+    background: rgba(14, 19, 23, 0.7) !important;
+    backdrop-filter: blur(4px) !important;
+    -webkit-backdrop-filter: blur(4px) !important;
     z-index: 9999998 !important;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    pointer-events: none;
+
+    &.show {
+        opacity: 1 !important;
+        visibility: visible !important;
+        pointer-events: auto !important;
+    }
+}
+
+.mobile-category-offcanvas {
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 320px !important;
+    max-width: 85vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    background: #ffffff !important;
+    z-index: 9999999 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
+    transform: translateX(-100%) !important;
+    transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important;
+    visibility: hidden;
+    overflow: hidden !important;
+
+    &.show {
+        transform: translateX(0) !important;
+        visibility: visible !important;
+    }
+
+    .offcanvas-header {
+        background: #ffffff;
+        border-bottom: 1px solid #f0f0f0;
+        padding: 16px 20px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .drawer-header-icon {
+            width: 32px;
+            height: 32px;
+            background: #ffb800;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+        }
+
+        .offcanvas-title {
+            font-weight: 800 !important;
+            font-size: 1.05rem !important;
+            color: #0e1317 !important;
+            letter-spacing: 0.5px;
+            margin: 0 !important;
+        }
+
+        .btn-close-drawer {
+            width: 36px;
+            height: 36px;
+            background: #f4f4f4;
+            border: 1px solid #e0e0e0;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            pointer-events: auto !important;
+
+            i {
+                font-size: 16px;
+                color: #333;
+                pointer-events: none;
+            }
+
+            &:hover, &:active {
+                background: #ffb800;
+                border-color: #ffb800;
+                color: #000;
+            }
+        }
+    }
+
+    .offcanvas-body {
+        padding: 20px 16px;
+        overflow-y: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+        flex: 1 1 auto;
+        height: calc(100vh - 65px) !important;
+        max-height: calc(100dvh - 65px) !important;
+
+        .food-sidebar-section {
+            margin-bottom: 25px;
+
+            .section-title {
+                display: flex;
+                align-items: center;
+                font-size: 1.05rem;
+                font-weight: 800;
+                color: #0e1317;
+                text-transform: uppercase;
+                margin-bottom: 16px;
+                letter-spacing: 0.8px;
+
+                &::before {
+                    content: '';
+                    display: inline-block;
+                    width: 4px;
+                    height: 18px;
+                    background: #ffb800;
+                    border-radius: 2px;
+                    margin-right: 10px;
+                }
+            }
+
+            .attribute-list {
+                padding: 0;
+                margin: 0;
+                list-style: none;
+
+                li {
+                    margin-bottom: 8px;
+
+                    .form-check {
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        padding: 6px 10px;
+                        border-radius: 6px;
+                        transition: background 0.2s ease;
+
+                        &:hover {
+                            background: #f8f9fa;
+                        }
+
+                        .form-check-input {
+                            width: 18px;
+                            height: 18px;
+                            min-width: 18px;
+                            margin-top: 0;
+                            cursor: pointer;
+                            border: 2px solid #bbb;
+                            border-radius: 4px;
+
+                            &:checked {
+                                background-color: #ffb800;
+                                border-color: #ffb800;
+                            }
+                        }
+
+                        .attrib-name {
+                            font-size: 0.95rem;
+                            color: #333333;
+                            font-weight: 700;
+                        }
+                    }
+                }
+            }
+        }
+
+        .category-list {
+            list-style: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+
+            .category-item {
+                margin-bottom: 8px;
+                list-style: none !important;
+
+                a {
+                    display: flex !important;
+                    align-items: center !important;
+                    padding: 10px 14px !important;
+                    border-radius: 8px !important;
+                    text-decoration: none !important;
+                    background: #fbfbfb !important;
+                    border: 1px solid #eeeeee !important;
+                    color: #222222 !important;
+                    font-weight: 700 !important;
+                    font-size: 0.9rem !important;
+                    text-transform: uppercase !important;
+                    letter-spacing: 0.3px;
+                    transition: all 0.2s ease;
+
+                    img {
+                        width: 28px !important;
+                        height: 28px !important;
+                        max-width: 28px !important;
+                        max-height: 28px !important;
+                        object-fit: cover !important;
+                        border-radius: 6px !important;
+                        margin-right: 12px !important;
+                        flex-shrink: 0 !important;
+                    }
+
+                    span, .category-name {
+                        color: #222222 !important;
+                        font-weight: 700 !important;
+                        font-size: 0.9rem !important;
+                    }
+
+                    &:hover {
+                        background: #fff8e7 !important;
+                        border-color: #ffb800 !important;
+                        color: #000000 !important;
+                        transform: translateX(3px);
+                    }
+
+                    &.active {
+                        background: #ffb800 !important;
+                        border-color: #ffb800 !important;
+                        color: #000000 !important;
+                        font-weight: 900 !important;
+                        box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35) !important;
+
+                        span, .category-name {
+                            color: #000000 !important;
+                            font-weight: 900 !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/addons/dine360_theme_shivasakthi/views/shop_page.xml b/addons/dine360_theme_shivasakthi/views/shop_page.xml
index 0205389..5d24795 100644
--- a/addons/dine360_theme_shivasakthi/views/shop_page.xml
+++ b/addons/dine360_theme_shivasakthi/views/shop_page.xml
@@ -3,210 +3,216 @@
     <data>
         <!-- Shop Page Layout Realignment - Dynamic Food Theme -->
         <template id="Shivasakthi_shop_layout" inherit_id="website_sale.products" name="Shivasakthi Shop Layout" priority="50">
-            <!-- Sidebar Reconstruction with Dynamic Data -->
+            <!-- Desktop Sidebar Reconstruction with Dynamic Data -->
             <xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
-                <aside id="products_grid_before" class="col-lg-3">
-                    <!-- Mobile Full-Height Sidebar Drawer & Backdrop -->
-                    <div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" style="position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; background: rgba(14, 19, 23, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 999998 !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none;"></div>
-                    <div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories Drawer" style="position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 300px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; background: #ffffff !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important; transform: translateX(-100%) !important; transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important; visibility: hidden; overflow: hidden !important;">
-                        <div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
-                            <div class="d-flex align-items-center gap-2">
-                                <div class="drawer-header-icon">
-                                    <i class="fa fa-cutlery text-dark"></i>
-                                </div>
-                                <h5 class="offcanvas-title fw-bold text-dark m-0" style="font-size: 1.05rem; letter-spacing: 0.5px;">MENU CATEGORIES</h5>
-                            </div>
-                            <button type="button" class="btn-close-drawer btn btn-sm btn-light border rounded-circle d-flex align-items-center justify-content-center" id="btnCloseMobileCategoryDrawer" aria-label="Close">
-                                <i class="fa fa-times text-dark"></i>
-                            </button>
-                        </div>
-                        <div class="offcanvas-body p-3">
-                            <form class="js_attributes" method="get">
-                                <input type="hidden" name="search" t-att-value="search"/>
-                                <input type="hidden" name="sort" t-att-value="sort"/>
-                                
-                                <div class="food-sidebar-section mb-4">
-                                    <ul class="category-list">
-                                        <li class="category-item">
-                                            <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
-                                                <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> 
-                                                <span>All Products</span>
-                                            </a>
-                                        </li>
-                                        <t t-set="all_root_categories" t-value="categories or request.env['product.public.category'].search([('parent_id', '=', False)])"/>
-                                        <t t-if="not all_root_categories">
-                                            <t t-set="all_root_categories" t-value="request.env['product.public.category'].search([])"/>
-                                        </t>
-                                        <t t-foreach="all_root_categories" t-as="c">
-                                            <li class="category-item">
-                                                <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
-                                                    <t t-if="c.image_128">
-                                                        <img t-att-src="website.image_url(c, 'image_128')"/>
-                                                    </t>
-                                                    <t t-else="">
-                                                        <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
-                                                    </t>
-                                                    <span t-field="c.name"/>
-                                                </a>
-                                            </li>
-                                        </t>
-                                    </ul>
-                                </div>
-
-                                <!-- Attributes (Dynamic - Sizes, etc.) -->
-                                <t t-foreach="attributes" t-as="a">
-                                    <div class="food-sidebar-section border-top pt-3">
-                                        <div class="section-title" t-field="a.name"/>
-                                        <ul class="list-unstyled">
-                                            <t t-foreach="a.value_ids" t-as="v">
-                                                <li class="mb-2 d-flex align-items-center gap-2">
-                                                    <div class="form-check">
-                                                        <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
-                                                        <span class="small fw-bold text-muted" t-field="v.name"/>
-                                                    </div>
-                                                </li>
+                <aside id="products_grid_before" class="col-lg-3 d-none d-md-block">
+                    <form class="js_attributes" method="get">
+                        <input type="hidden" name="search" t-att-value="search"/>
+                        <input type="hidden" name="sort" t-att-value="sort"/>
+                        
+                        <!-- Categories (Dynamic from Configuration) -->
+                        <div class="food-sidebar-section">
+                            <div class="section-title">Categories</div>
+                            <ul class="category-list">
+                                <li class="category-item">
+                                    <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
+                                        <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span>
+                                    </a>
+                                </li>
+                                <!-- Fetching all categories configured in Odoo -->
+                                <t t-set="all_cats_desktop" t-value="request.env['product.public.category'].search([])"/>
+                                <t t-foreach="all_cats_desktop" t-as="c">
+                                    <li class="category-item">
+                                        <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
+                                            <t t-if="c.image_128">
+                                                <img t-att-src="website.image_url(c, 'image_128')"/>
                                             </t>
-                                        </ul>
-                                    </div>
+                                            <t t-else="">
+                                                <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
+                                            </t>
+                                            <span t-field="c.name"/>
+                                        </a>
+                                    </li>
                                 </t>
-                            </form>
+                            </ul>
+                        </div>
+
+                        <!-- Attributes (Dynamic - Sizes, etc.) -->
+                        <t t-foreach="attributes" t-as="a">
+                            <div class="food-sidebar-section">
+                                <div class="section-title" t-field="a.name"/>
+                                <ul class="list-unstyled">
+                                    <t t-foreach="a.value_ids" t-as="v">
+                                        <li class="mb-2 d-flex align-items-center gap-2">
+                                            <div class="form-check">
+                                                <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
+                                                <span class="small fw-bold text-muted" t-field="v.name"/>
+                                            </div>
+                                        </li>
+                                    </t>
+                                </ul>
+                            </div>
+                        </t>
+                    </form>
+
+                    <!-- New Arrivals (Using subset of current products to avoid crash) -->
+                    <div class="food-sidebar-section">
+                        <div class="section-title">New Arrival</div>
+                        <div class="arrival-list">
+                            <t t-set="new_arrivals" t-value="products[:3] if products else []"/>
+                            <t t-foreach="new_arrivals" t-as="arrival">
+                                <div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
+                                    <div class="arrival-img">
+                                        <img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
+                                        <img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
+                                    </div>
+                                    <div class="arrival-info">
+                                        <div class="name fw-bold" t-field="arrival.name"/>
+                                        <div class="price">
+                                            <del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                                            <span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </t>
                         </div>
                     </div>
+                </aside>
+            </xpath>
 
-                    <!-- Category Drawer Interaction Script -->
-                    <script type="text/javascript">
-                        (function() {
-                            function initCategoryDrawer() {
-                                var openBtn = document.getElementById('btnOpenMobileCategoryDrawer');
-                                var closeBtn = document.getElementById('btnCloseMobileCategoryDrawer');
-                                var drawer = document.getElementById('mobileCategoryOffcanvas');
-                                var backdrop = document.getElementById('mobileCategoryBackdrop');
-                                if (!drawer || !backdrop) return;
+            <!-- Mobile Categories Drawer, Backdrop & Global Scripts -->
+            <xpath expr="//div[@id='products_grid']" position="before">
+                <!-- Mobile Full-Height Sidebar Drawer Backdrop -->
+                <div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" onclick="window.shivasakthiCloseCategoryDrawer &amp;&amp; window.shivasakthiCloseCategoryDrawer(event)"></div>
 
-                                // Move drawer and backdrop to document.body to break free from any parent stacking contexts
-                                if (drawer.parentElement !== document.body) {
-                                    document.body.appendChild(drawer);
-                                }
-                                if (backdrop.parentElement !== document.body) {
-                                    document.body.appendChild(backdrop);
-                                }
-
-                                function openDrawer(e) {
-                                    if (e) { e.preventDefault(); e.stopPropagation(); }
-                                    drawer.classList.add('show');
-                                    backdrop.classList.add('show');
-                                    document.body.style.overflow = 'hidden';
-                                    document.documentElement.style.overflow = 'hidden';
-                                }
-
-                                function closeDrawer(e) {
-                                    if (e) { e.preventDefault(); e.stopPropagation(); }
-                                    drawer.classList.remove('show');
-                                    backdrop.classList.remove('show');
-                                    document.body.style.overflow = '';
-                                    document.documentElement.style.overflow = '';
-                                }
-
-                                if (openBtn) {
-                                    openBtn.onclick = openDrawer;
-                                }
-                                if (closeBtn) {
-                                    closeBtn.onclick = closeDrawer;
-                                }
-                                if (backdrop) {
-                                    backdrop.onclick = closeDrawer;
-                                }
-                            }
-                            if (document.readyState === 'loading') {
-                                document.addEventListener('DOMContentLoaded', initCategoryDrawer);
-                            } else {
-                                initCategoryDrawer();
-                            }
-                            window.addEventListener('load', initCategoryDrawer);
-                        })();
-                    </script>
-
-                    <!-- Desktop Sidebar Content -->
-                    <div class="d-none d-md-block">
+                <!-- Mobile Full-Height Sidebar Offcanvas Drawer -->
+                <div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories Drawer">
+                    <div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
+                        <div class="d-flex align-items-center gap-2">
+                            <div class="drawer-header-icon">
+                                <i class="fa fa-cutlery text-dark"></i>
+                            </div>
+                            <h5 class="offcanvas-title fw-bold text-dark m-0" style="font-size: 1.05rem; letter-spacing: 0.5px;">MENU CATEGORIES</h5>
+                        </div>
+                        <button type="button" class="btn-close-drawer btn btn-sm btn-light border rounded-circle d-flex align-items-center justify-content-center" id="btnCloseMobileCategoryDrawer" aria-label="Close" onclick="window.shivasakthiCloseCategoryDrawer &amp;&amp; window.shivasakthiCloseCategoryDrawer(event)">
+                            <i class="fa fa-times text-dark"></i>
+                        </button>
+                    </div>
+                    <div class="offcanvas-body p-3">
                         <form class="js_attributes" method="get">
                             <input type="hidden" name="search" t-att-value="search"/>
                             <input type="hidden" name="sort" t-att-value="sort"/>
                             
-                            <!-- Categories (Dynamic from Configuration) -->
-                            <div class="food-sidebar-section">
+                            <!-- Categories Section -->
+                            <div class="food-sidebar-section mb-4">
                                 <div class="section-title">Categories</div>
-                                <ul class="category-list">
-                                    <li class="category-item">
-                                        <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
-                                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span>
+                                <ul class="category-list list-unstyled p-0 m-0">
+                                    <li class="category-item mb-2">
+                                        <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link d-flex align-items-center #{'' if category else 'active'}">
+                                            <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/> 
+                                            <span class="category-name">All Products</span>
                                         </a>
                                     </li>
-                                    <!-- Fetching all root categories configured in Odoo -->
-                                    <t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/>
-                                    <t t-foreach="all_root_categories" t-as="c">
-                                        <li class="category-item">
-                                            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
+                                    <t t-set="all_cats" t-value="request.env['product.public.category'].search([])"/>
+                                    <t t-foreach="all_cats" t-as="c">
+                                        <li class="category-item mb-2">
+                                            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link d-flex align-items-center #{'active' if category and c.id == category.id else ''}">
                                                 <t t-if="c.image_128">
-                                                    <img t-att-src="website.image_url(c, 'image_128')"/>
+                                                    <img t-att-src="website.image_url(c, 'image_128')" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/>
                                                 </t>
                                                 <t t-else="">
-                                                    <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
+                                                    <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" style="width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; border-radius: 6px !important; margin-right: 12px !important; flex-shrink: 0 !important;"/>
                                                 </t>
-                                                <span t-field="c.name"/>
+                                                <span class="category-name" t-field="c.name"/>
                                             </a>
                                         </li>
                                     </t>
                                 </ul>
                             </div>
 
-                            <!-- Attributes (Dynamic - Sizes, etc.) -->
+                            <!-- Attributes (Size, Fabric, etc.) -->
                             <t t-foreach="attributes" t-as="a">
-                                <div class="food-sidebar-section">
+                                <div class="food-sidebar-section border-top pt-3 mb-4">
                                     <div class="section-title" t-field="a.name"/>
-                                    <ul class="list-unstyled">
+                                    <ul class="list-unstyled attribute-list">
                                         <t t-foreach="a.value_ids" t-as="v">
-                                            <li class="mb-2 d-flex align-items-center gap-2">
-                                                <div class="form-check">
-                                                    <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
-                                                    <span class="small fw-bold text-muted" t-field="v.name"/>
-                                                </div>
+                                            <li class="mb-2 d-flex align-items-center">
+                                                <label class="form-check d-flex align-items-center gap-2 m-0 cursor-pointer w-100">
+                                                    <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0 cursor-pointer" onchange="this.form.submit()"/>
+                                                    <span class="attrib-name fw-bold" t-field="v.name"/>
+                                                </label>
                                             </li>
                                         </t>
                                     </ul>
                                 </div>
                             </t>
                         </form>
-
-                        <!-- New Arrivals (Using subset of current products to avoid crash) -->
-                        <div class="food-sidebar-section">
-                            <div class="section-title">New Arrival</div>
-                            <div class="arrival-list">
-                                <t t-set="new_arrivals" t-value="products[:3] if products else []"/>
-                                <t t-foreach="new_arrivals" t-as="arrival">
-                                    <div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
-                                        <div class="arrival-img">
-                                            <img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
-                                            <img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
-                                        </div>
-                                        <div class="arrival-info">
-                                            <div class="name fw-bold" t-field="arrival.name"/>
-                                            <div class="price">
-                                                <del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-                                                <span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </t>
-                            </div>
-                        </div>
                     </div>
-                </aside>
+                </div>
+
+                <!-- Category Drawer Interaction Script -->
+                <script type="text/javascript">
+                    (function() {
+                        window.shivasakthiOpenCategoryDrawer = function(e) {
+                            if (e) {
+                                if (typeof e.preventDefault === 'function') e.preventDefault();
+                                if (typeof e.stopPropagation === 'function') e.stopPropagation();
+                            }
+                            var drawer = document.getElementById('mobileCategoryOffcanvas');
+                            var backdrop = document.getElementById('mobileCategoryBackdrop');
+                            if (!drawer || !backdrop) return;
+
+                            if (drawer.parentElement !== document.body) {
+                                document.body.appendChild(drawer);
+                            }
+                            if (backdrop.parentElement !== document.body) {
+                                document.body.appendChild(backdrop);
+                            }
+
+                            drawer.classList.add('show');
+                            backdrop.classList.add('show');
+                            document.body.classList.add('mobile-drawer-open');
+                            document.body.style.overflow = 'hidden';
+                            document.documentElement.style.overflow = 'hidden';
+                        };
+
+                        window.shivasakthiCloseCategoryDrawer = function(e) {
+                            if (e) {
+                                if (typeof e.preventDefault === 'function') e.preventDefault();
+                                if (typeof e.stopPropagation === 'function') e.stopPropagation();
+                            }
+                            var drawer = document.getElementById('mobileCategoryOffcanvas');
+                            var backdrop = document.getElementById('mobileCategoryBackdrop');
+                            if (drawer) drawer.classList.remove('show');
+                            if (backdrop) backdrop.classList.remove('show');
+                            document.body.classList.remove('mobile-drawer-open');
+                            document.body.style.overflow = '';
+                            document.documentElement.style.overflow = '';
+                        };
+
+                        document.addEventListener('click', function(e) {
+                            var openTarget = e.target.closest('#btnOpenMobileCategoryDrawer, .mobile-cat-bar-btn');
+                            var closeTarget = e.target.closest('#btnCloseMobileCategoryDrawer, .btn-close-drawer, #mobileCategoryBackdrop');
+                            if (openTarget) {
+                                window.shivasakthiOpenCategoryDrawer(e);
+                            } else if (closeTarget) {
+                                window.shivasakthiCloseCategoryDrawer(e);
+                            }
+                        });
+
+                        document.addEventListener('keydown', function(e) {
+                            if (e.key === 'Escape') {
+                                window.shivasakthiCloseCategoryDrawer(e);
+                            }
+                        });
+                    })();
+                </script>
             </xpath>
 
             <!-- Mobile Category Toggle Button placed at top of products grid -->
             <xpath expr="//div[@id='products_grid']/*[1]" position="before">
-                <div class="d-flex d-md-none justify-content-between align-items-center mb-3 w-100">
-                    <button class="btn mobile-cat-bar-btn" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories">
+                <div class="d-flex d-md-none justify-content-start align-items-center mb-3 w-100 mobile-cat-btn-wrapper">
+                    <button class="btn mobile-cat-bar-btn" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories" onclick="window.shivasakthiOpenCategoryDrawer &amp;&amp; window.shivasakthiOpenCategoryDrawer(event)">
                         <i class="fa fa-th-large"></i>
                         <span>Categories</span>
                         <t t-if="category">