Preconnect for bootstrap and datatables. Mobile offcanvas toggle added next to brand. Never collapse logout implemented. Sidebar removed from small screens. Mobile menu puplutes the same sidebar category tree or list.

HasanJaved-Developer · HasanJaved-Developer · commit 54c5c9bf42eb · 2025-09-20T15:08:59.000+05:00
diff --git a/ApiIntegrationMvc/Views/Shared/_Layout.cshtml b/ApiIntegrationMvc/Views/Shared/_Layout.cshtml
@@ -6,6 +6,10 @@
     <title>@ViewData["Title"] - ApiIntegrationMvc</title>
     <script type="importmap"></script>
 
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+    <link rel="preconnect" href="https://cdn.datatables.net" crossorigin>
+
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css" />
@@ -19,13 +23,43 @@
 <body>
     <div class="app-grid">
         <header class="app-header">
-            <nav class="navbar navbar-expand-sm navbar-light bg-white border-bottom box-shadow mb-3">
+            <nav class="navbar navbar-expand-sm navbar-light bg-white border-bottom box-shadow-sm mb-3">
                 <div class="container-fluid">
-                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Integration Portal</a>
-
-                    <!-- Keep only one collapse container -->
+                    <!-- LEFT: brand + mobile offcanvas toggle (always visible on < md) -->
+                    <div class="d-flex align-items-center gap-2">
+                        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Integration Portal</a>
+                        
+                        <button class="nav-link d-md-none"
+                                type="button"
+                                data-bs-toggle="offcanvas"
+                                data-bs-target="#offcanvasSidebar"
+                                aria-controls="offcanvasSidebar"
+                                aria-label="Open menu"
+                                data-bs-placement="bottom"
+                                title="Menu">
+                            <i class="bi bi-list me-1"></i>
+                        </button>
+                    </div>
+                    <!-- CENTER: collapsing nav links -->
                     <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                         <ul class="navbar-nav flex-grow-1">
+                            <li>                               
+                                <!-- Desktop toggle (md+ only) -->
+                                <button id="sidebarToggle"
+                                        class="nav-link d-none d-md-inline-flex"
+                                        type="button"
+                                        aria-label="Toggle sidebar"
+                                        data-bs-toggle="tooltip"
+                                        data-bs-placement="bottom"
+                                        title="Toggle sidebar">
+                                    <i class="bi bi-layout-sidebar me-1"></i>
+                                </button>
+                               
+                            </li>
+                            <li>                                
+                                                         
+                            </li>
+
                             <li class="nav-item">
                                 <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">
                                     <i class="bi bi-house-door me-1"></i> Home
@@ -37,31 +71,31 @@
                                 </a>
                             </li>
                         </ul>
+                    </div>
 
-                        <ul class="navbar-nav ms-auto">
-                            @if (User?.Identity?.IsAuthenticated == true)
-                            {
-                                <li class="nav-item">
-                                    <form asp-area="Account" asp-controller="Login" asp-action="Logout" method="post" class="d-inline">
-                                        @Html.AntiForgeryToken()
-                                        <button type="submit" class="btn btn-link nav-link">
-                                            <i class="bi bi-box-arrow-right me-1"></i> Logout
-                                        </button>
-                                    </form>
-                                </li>
-                            }
-                            else
-                            {
-                                <li class="nav-item">
-                                    <a class="nav-link" asp-area="Account" asp-controller="Login" asp-action="Index">Login</a>
-                                </li>
-                            }
-                        </ul>
+                    <!-- RIGHT: Logout (ALWAYS visible, never collapses) -->
+                    <div class="d-flex ms-auto align-items-center">
+                        @if (User?.Identity?.IsAuthenticated == true)
+                        {                            
+                            <form asp-area="Account" asp-controller="Login" asp-action="Logout" method="post" class="d-inline">
+                                @Html.AntiForgeryToken()
+                                <button type="submit" class="btn btn-link nav-link">
+                                    <i class="bi bi-box-arrow-right me-1"></i> Logout
+                                </button>
+                            </form>                            
+                        }
+                        else
+                        {                            
+                            <a class="nav-link" asp-area="Account" asp-controller="Login" asp-action="Index">Login</a>                            
+                        }
                     </div>
+
                 </div>
             </nav>
+            
+
         </header>
-        <aside class="app-sidebar" id="appSidebar">
+        <aside class="app-sidebar d-none d-md-block" id="appSidebar">
             @await Component.InvokeAsync("CategoryTree")
         </aside>
 
@@ -72,13 +106,23 @@
             </div>
         </main>
 
-        <footer class="border-top footer text-muted app-footer">
+        <footer class="border-top text-muted app-footer">
             <div class="container">
                 &copy; 2025 - Integration Portal -
                 <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
             </div>
         </footer>
     </div>
+    <!-- Offcanvas for mobile (place OUTSIDE .app-grid) -->
+    <div class="offcanvas offcanvas-start" id="offcanvasSidebar" tabindex="-1">
+        <div class="offcanvas-header">
+            <h5 class="mb-0">Integration Portal</h5>
+            <button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body p-0">
+            @await Component.InvokeAsync("CategoryTree", new { model = Model })
+        </div>
+    </div>
     <!-- Scripts unchanged -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.5/jquery.validate.min.js"></script>
@@ -104,6 +148,8 @@
             });
           }
         });
+    
     </script>
+   
 </body>
 </html>
diff --git a/ApiIntegrationMvc/wwwroot/css/site.css b/ApiIntegrationMvc/wwwroot/css/site.css
@@ -19,6 +19,8 @@
 /* Single baseline only (avoid duplicates) */
 html {
     font-size: var(--app-base-size);
+    height: 100%;
+    margin: 0;
 }
 
 @media (min-width:768px) {
@@ -32,7 +34,7 @@ body {
     font-size: 1rem; /* everything scales from html */
     line-height: 1.5;
     color: var(--app-text);
-    min-height: 100%;
+    height: 100%;
     margin: 0; /* remove page jump; footer spacing handled in layout areas */
 }
 
@@ -62,14 +64,14 @@ body {
    App Layout Grid
    ========================= */
 .app-grid {
-    display: grid;
-    grid-template-columns: 280px 1fr;
+    display: grid;    
     grid-template-rows: auto 1fr auto; /* header | content | footer */
     grid-template-areas:
         "header header"
         "sidebar main"
         "footer footer";
-    min-height: 100dvh;
+    height: 100svh; /* or 100vh; ensures fixed viewport height */
+    overflow: hidden; /* KEY: stop page scroll; inner cells will scroll */
 }
 
 .app-header {
@@ -80,7 +82,9 @@ body {
     grid-area: sidebar;
     padding: 1rem .75rem;
     background: linear-gradient(135deg,#f8f9fa,#f1f3f4);
-    overflow-y: auto;
+    min-height: 0; /* allow them to shrink inside the 1fr row */
+    min-width: 0; /* avoid horizontal overflow pushing layout */
+    overflow: auto; /* scroll here, not the page */
     scrollbar-width: none; /* Firefox */
     border-right: none;
     /* Typography: sidebar slightly compact but consistent */
@@ -89,14 +93,43 @@ body {
     line-height: 1.45;
 }
 
-    .app-sidebar::-webkit-scrollbar {
-        display: none;
+/* Collapse behavior on desktop */
+@media (min-width: 768px) {
+
+    .app-grid {
+        display: grid;
+        grid-template-columns: 280px 1fr;    
+        grid-template-areas:
+            "header header"
+            "sidebar main"
+            "footer footer";    
+    }
+
+
+    .app-grid.sidebar-collapsed {
+        grid-template-columns: 0 1fr; /* hide the first column */
+    }
+
+    .app-grid.sidebar-collapsed .app-sidebar {
+        display: none; /* make sure it's gone */
     }
+}
+/* (Optional) smoother width change for main area */
+.app-grid {
+    transition: grid-template-columns .15s ease;
+}
+
+.app-sidebar::-webkit-scrollbar {
+    display: none;
+}
 
 .app-main {
     grid-area: main;
-    padding: 1rem;
-    border-top: 1px solid #dee2e6; /* prevents content running under sidebar on some layouts */
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+    grid-area: main;
+    padding: 1rem;    
     padding-top: 1rem;
     font: inherit; /* inherit same font as body */
 }
@@ -116,7 +149,8 @@ body {
     .app-sidebar {
         position: sticky;
         top: 0;
-        max-height: 100dvh;
+        max-height: 100%;
+        overflow-y: auto; /* sidebar may scroll independently */
     }
 }
 
@@ -284,3 +318,97 @@ h3 {
 .table-dark {
     background-color: var(--brand-dark) !important;
 }
+
+/* Hide table until DataTables finishes */
+table.dataTable-pending {
+    visibility: hidden;
+}
+
+/* Smooth change when collapsing */
+.app-grid {
+    transition: grid-template-columns .2s ease;
+}
+
+/* Default desktop: sidebar + main */
+@media (min-width:768px) {
+    .app-grid {
+        grid-template-columns: 280px 1fr;
+    }
+}
+
+/* Collapsed desktop: hide sidebar, let main take full width */
+@media (min-width:768px) {
+    .app-grid.sidebar-collapsed {
+        grid-template-columns: 0 1fr;
+    }
+
+        .app-grid.sidebar-collapsed .app-sidebar {
+            display: none !important;
+        }
+    /* beats d-md-block!important */
+}
+
+/* Keep header above content if needed */
+.app-header {
+    z-index: 1030;
+}
+
+/* Mobile: collapse grid to a single column */
+@media (max-width: 767.98px) {
+    .app-grid {
+        grid-template-columns: 1fr !important;
+        grid-template-areas:
+            "header"
+            "main"
+            "footer"; /* no sidebar row on mobile */
+    }
+
+    /* Ensure main spans the only column (defensive) */
+    .app-main {
+        grid-column: 1 / -1;
+    }
+
+    /* Ensure the offcanvas copy of the menu stays visible */
+    .offcanvas .app-sidebar {
+        display: block !important;
+        overflow: auto;
+        max-height: calc(100vh - 56px); /* tweak if your header height differs */
+    }
+
+    /* Hide the static sidebar track completely on mobile */
+    #appSidebar,
+    .app-sidebar {
+        display: none !important; /* d-none d-md-block does this too, this is just belt & braces */
+    }
+           
+}
+
+/* Compact, icon-only button */
+.btn-icon {
+    --icon-size: 2.25rem; /* tweak: 2.0�2.5rem */
+    width: var(--icon-size);
+    height: var(--icon-size);
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: .5rem;
+    background: transparent;
+}
+
+    .btn-icon i {
+        font-size: 1.2rem;
+        line-height: 1;
+    }
+    /* icon size */
+
+    /* Subtle hover/focus */
+    .btn-icon:hover {
+        background: rgba(0,0,0,.06);
+    }
+
+    .btn-icon:focus-visible {
+        outline: 2px solid rgba(13,110,253,.6);
+        outline-offset: 2px;
+    }
diff --git a/ApiIntegrationMvc/wwwroot/js/site.js b/ApiIntegrationMvc/wwwroot/js/site.js
@@ -2,3 +2,24 @@
 // for details on configuring this project to bundle and minify static web assets.
 
 // Write your JavaScript code.
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    const grid = document.querySelector('.app-grid');
+    const btn = document.getElementById('sidebarToggle');
+
+    if (grid && btn) {
+        btn.addEventListener('click', () => {
+            const collapsed = grid.classList.toggle('sidebar-collapsed');
+            btn.setAttribute('aria-pressed', collapsed ? 'true' : 'false');
+
+            // If you use DataTables in .app-main, nudge it after layout change
+            if (window.jQuery && jQuery.fn.dataTable) {
+                jQuery('.dataTable').each(function () {
+                    const api = jQuery(this).DataTable();
+                    api.columns.adjust().responsive.recalc();
+                });
+            }
+        });
+    }
+});
