implement responsive mobile category sidebar and custom styling for shop page

addons/dine360_theme_shivasakthi/static/src/scss/shop.scss

@@ -20,9 +20,19 @@
     transition: all 0.3s ease;
 }
 
+html,
+body,
+#wrapwrap,
+#wrap {
+    overflow-x: hidden !important;
+    max-width: 100% !important;
+}
+
 .oe_website_sale {
     background-color: #ffffff !important;
     padding: 80px 30px !important;
+    overflow-x: hidden !important;
+    max-width: 100% !important;
 
     /* Sidebar Navigation */
     #products_grid_before {
@@ -467,19 +477,34 @@
 
     /* Mobile Layout Tweaks */
     @media (max-width: 767px) {
+        padding: 30px 12px !important;
+        overflow-x: hidden !important;
+        max-width: 100% !important;
+
+        .container,
+        .container-fluid {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            max-width: 100% !important;
+        }
+
         .o_wsale_products_main_row {
             display: flex !important;
             flex-direction: column !important;
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+            width: 100% !important;
+            max-width: 100% !important;
         }
 
-        /* Products Pager Header (Search, Sort, View) */
+        /* Products Pager Header (Search on Top, Categories Left, Sort Right) */
         .products_pager {
             display: flex !important;
             flex-direction: column !important;
             align-items: stretch !important;
             width: 100%;
             margin-bottom: 20px;
-            gap: 10px;
+            gap: 12px;
             
             > * {
                 margin-bottom: 0 !important;
@@ -493,21 +518,70 @@
                 width: 100% !important;
             }
 
-            /* Sorting and View Switcher under search */
+            /* Action Row under search: Categories on Left, Sort on Right */
             .justify-content-end,
             .d-flex:not(.o_wsale_search) {
                 order: 2 !important;
                 display: flex !important;
-                justify-content: flex-end !important;
+                justify-content: space-between !important;
+                align-items: center !important;
                 width: 100% !important;
-                gap: 5px;
+                gap: 10px;
                 
-                .o_sortby_dropdown {
+                .mobile-cat-bar-btn {
                     margin-right: auto !important;
                 }
-                .btn-group.o_wsale_apply_grid {
+
-                    margin-left: 0 !important;
+                .o_sortby_dropdown {
+                    margin-left: auto !important;
                 }
+
+                .btn-group.o_wsale_apply_grid,
+                .o_wsale_apply_grid {
+                    display: none !important;
+                }
+            }
+        }
+
+        /* Mobile Categories Bar Button (Bottom-left of Search) */
+        .mobile-cat-bar-btn {
+            background: #ffb800 !important;
+            color: #0e1317 !important;
+            border: 1px solid #ffb800 !important;
+            font-weight: 800 !important;
+            font-size: 0.85rem !important;
+            padding: 8px 14px !important;
+            border-radius: 8px !important;
+            box-shadow: 0 3px 10px rgba(255, 184, 0, 0.25) !important;
+            transition: all 0.2s ease !important;
+            display: inline-flex !important;
+            align-items: center !important;
+            gap: 6px !important;
+            letter-spacing: 0.3px;
+            text-transform: uppercase;
+
+            i {
+                font-size: 0.95rem;
+            }
+
+            .cat-active-pill {
+                background: #0e1317;
+                color: #ffb800;
+                font-size: 0.7rem;
+                padding: 2px 7px;
+                border-radius: 6px;
+                font-weight: 700;
+                max-width: 110px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-transform: capitalize;
+            }
+
+            &:hover, &:active {
+                background: #e5a500 !important;
+                transform: translateY(-1px);
+                box-shadow: 0 5px 14px rgba(255, 184, 0, 0.35) !important;
             }
         }
 
@@ -526,7 +600,167 @@
             width: 100% !important;
             max-width: 100% !important;
             flex: 0 0 100% !important;
-            margin-bottom: 20px;
+            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;
+            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;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         /* Product Grid (2 products per row) */
@@ -538,20 +772,24 @@
             padding: 0 !important;
             
             .o_wsale_products_grid_table_wrapper {
-                overflow: visible !important;
+                overflow: hidden !important;
+                width: 100% !important;
+                max-width: 100% !important;
                 
                 table {
                     display: flex !important;
                     flex-direction: column !important;
                     width: 100% !important;
+                    max-width: 100% !important;
                     
                     tbody {
                         display: flex !important;
                         flex-wrap: wrap !important;
                         flex-direction: row !important;
                         width: 100% !important;
-                        margin-left: -5px;
+                        max-width: 100% !important;
-                        margin-right: -5px;
+                        margin-left: 0 !important;
+                        margin-right: 0 !important;
                     }
                     
                     tr {
@@ -559,6 +797,7 @@
                         flex-wrap: wrap !important;
                         flex-direction: row !important;
                         width: 100% !important;
+                        max-width: 100% !important;
                     }
                     
                     td {
@@ -566,7 +805,8 @@
                         width: 50% !important;
                         max-width: 50% !important;
                         flex: 0 0 50% !important;
-                        padding: 5px !important; /* Tight padding to fit 2 items */
+                        padding: 4px !important; /* Tight padding to fit 2 items */
+                        box-sizing: border-box !important;
                     }
                 }
             }
@@ -813,3 +1053,27 @@
     color: #000000 !important;
     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;
+}
+
+.mobile-category-backdrop {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    z-index: 9999998 !important;
+}

addons/dine360_theme_shivasakthi/static/src/scss/theme.scss

@@ -11,6 +11,8 @@ p, li, .lead, .hero-desc, .blog-excerpt {
 /* Header Navigation Styles */
 header {
     border: none !important;
+    z-index: 1050 !important;
+    position: relative;
 
     /* Main Nav (Black/Charcoal by default, absolute transparent on homepage) */
     .o_header_main_nav {

addons/dine360_theme_shivasakthi/views/shop_page.xml

@@ -6,22 +6,135 @@
             <!-- Sidebar Reconstruction with Dynamic Data -->
             <xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
                 <aside id="products_grid_before" class="col-lg-3">
-                    <!-- Mobile Category Toggle Header -->
+                    <!-- Mobile Full-Height Sidebar Drawer & Backdrop -->
-                    <div class="d-flex d-md-none justify-content-between align-items-center mb-3 p-3 bg-white rounded shadow-sm border mobile-cat-toggle">
+                    <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>
-                        <span class="fs-6 fw-bold text-dark text-uppercase m-0">Categories</span>
+                    <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;">
-                        <button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-target="#mobileCategoryCollapse" aria-expanded="false" aria-controls="mobileCategoryCollapse">
+                        <div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
-                            <i class="fa fa-bars"></i>
+                            <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 id="mobileCategoryCollapse" class="collapse d-md-block">
+                                <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>
+                                            </t>
+                                        </ul>
+                                    </div>
+                                </t>
+                            </form>
+                        </div>
+                    </div>
+
+                    <!-- 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;
+
+                                // 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">
                         <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 d-none d-md-flex">Categories</div>
+                                <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'}">
@@ -65,8 +178,8 @@
                         </form>
 
                         <!-- New Arrivals (Using subset of current products to avoid crash) -->
-                        <div class="food-sidebar-section d-none d-md-block">
+                        <div class="food-sidebar-section">
-                            <div class="section-title d-none d-md-flex">New Arrival</div>
+                            <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">
@@ -128,6 +241,18 @@
                 </div>
             </xpath>
         </template>
+        <!-- Replace Grid/List buttons with Categories button in Products Pager -->
+        <template id="Shivasakthi_products_pager_categories" inherit_id="website_sale.products_pager" name="Shivasakthi Products Pager Categories" priority="50">
+            <xpath expr="//*[contains(@class, 'products_pager')]//*[contains(@class, 'o_sortby_dropdown') or contains(@class, 'o_wsale_apply_grid')][1]" position="before">
+                <button class="btn mobile-cat-bar-btn d-md-none" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories">
+                    <i class="fa fa-th-large"></i>
+                    <span>Categories</span>
+                    <t t-if="category">
+                        <span class="cat-active-pill"><t t-esc="category.name"/></span>
+                    </t>
+                </button>
+            </xpath>
+        </template>
     </data>
 </odoo>