mendix · OlufunkeMoronfolu · Mar 13, 2026 · Mar 6, 2026 · Mar 9, 2026 · Mar 9, 2026
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -464,6 +464,28 @@ img {
     }
   }
 
+    /* Olu - Position the mobile close button and remove extra top spacing so content aligns */
+    #td-sidebar-menu > .d-flex.d-md-none {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 1060;
+    }
+
+    #td-sidebar-menu {
+        padding-top: 0;
+    }
+
+    #td-sidebar-menu .td-sidebar__search {
+        margin-top: 0; /* ensure search sits at top level */
+        padding-top: 0;
+    }
+
+    #td-sidebar-menu nav.td-sidebar-nav {
+        margin-top: 0;
+        padding-top: 0.25rem;
+    }
+
   // Responsive tables
   //
   // Generate series of `.table-responsive-*` classes for configuring the screen
@@ -607,4 +629,54 @@ img.ToC-icon{
     &:hover {
         background-color: $gray-light;
     };
+}
+
+// Olu - Mobile sidebar open/close behaviour (apply to small and medium screens)
+@include media-breakpoint-down(md) {
+    body.td-sidebar-open {
+        overflow: hidden;
+    }
+
+    .td-sidebar {
+        display: block !important;
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 80%;
+        max-width: 340px;
+        z-index: 1055;
+        background-color: $td-sidebar-bg-color;
+        transform: translateX(-100%);
+        transition: transform .25s ease-in-out;
+        box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
+    }
+
+    body.td-sidebar-open .td-sidebar {
+        transform: translateX(0);
+    }
+
+    .td-sidebar-overlay {
+        display: none;
+        position: fixed;
+        inset: 0;
+        z-index: 1050;
+        background: rgba(0,0,0,0.45);
+    }
+
+    body.td-sidebar-open .td-sidebar-overlay {
+        display: block;
+    }
+
+    /* adjustment for the close button in the sidebar */
+    #td-mobile-sidebar-close {
+        font-size: 1.1rem;
+    }
+
+    // Ensure the scrolling container inside the off-canvas sidebar fills more of the viewport
+    .td-sidebar__inner {
+        height: calc(100vh - 1.5rem) !important;
+        overflow-y: auto;
+        padding-top: 1.25rem;
+    }
 }
diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
@@ -84,7 +84,7 @@ replacements = "github.com/FortAwesome/Font-Awesome -> ., github.com/twbs/bootst
 
 # Olu - Minification configuration
 [minify]
-    minifyOutput = true
+    minifyOutput = false
 
 # Everything below this are Site Params
 # ======================================

diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -1,56 +1,70 @@
 <!doctype html>
 <html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
-  <head>
-    {{ partial "head.html" . }}
-  </head>
-  <!-- DB – Check for numberless_headings -->
-  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}{{ if .Params.numberless_headings }} numberless_headings{{ end }}">
-{{/* NK - deactivation of original navbar 
-    <header>
-      {{ partial "navbar.html" . }}
-    </header>
+ <head>
+   {{ partial "head.html" . }}
+ </head>
+ <!-- DB – Check for numberless_headings -->
+ <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}{{ if .Params.numberless_headings }} numberless_headings{{ end }}">
+{{/* NK - deactivation of original navbar
+   <header>
+     {{ partial "navbar.html" . }}
+   </header>
 */}}
-    <div class="container-fluid td-outer">
-      <div class="td-main">
-        <div class="row flex-xl-nowrap stretch-main">
-          <aside data-stt-ignore class="d-none d-lg-block col-lg-4 col-xl-3 td-sidebar d-print-none" data-proofer-ignore> <!-- NK - adjusted resizing for different screens/MvM - ignore for htmltest and translation -->
-            {{ partial "sidebar.html" . }}
-          </aside>
-          <aside data-stt-ignore class="d-none d-xl-block col-xl-3 td-sidebar-toc d-print-none" data-proofer-ignore> <!-- NK - adjusted resizing for different screens/MvM - ignore for htmltest and translation -->
-            {{ partial "page-meta-links.html" . }}
-                <!-- NK - insert of layout element for line break and ToC title -->
-                <span class="d-block p-2">
-                    <hr>
-                    <a class="toc-title" href="{{ .Permalink }}">{{ .Title }}</a> <!-- NK - insert of title into ToC -->
-                </span>
-            {{ partial "toc.html" . }}
-            {{ partial "taxonomy_terms_clouds.html" . }}
-          </aside>
-          <main class="col-12 col-lg-8 col-xl-6" role="main"> <!-- NK - adjusted resizing for different screens -->
-        <!-- MvM - Do a test for missing Title -->
-        {{ if not .Title }}
-            {{ warnf "File %s \n\t\t\t\thas no title in the front matter\n " .Page.File.Path }}
-        {{ end }}
-         <!-- NK - START of addition of versions selector menu, 
-        taken from themes\docsy\layouts\partials\navbar.html, 
-        this might get moved again, with further styling changes -->
-            {{ if  .Site.Params.versions }}
-            <li class="nav-item dropdown mr-4 d-none d-lg-block">
-                {{ partial "navbar-version-selector.html" . }}
-            </li>
-            {{ end }}
-          <!-- END of addition -->
-          <!-- MvM: Move breadcrumb above banner -->
-          {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
-
-          {{ partial "version-banner.html" . }}
-
-            {{ block "main" . }}{{ end }}
-          </main>
-        </div>
-      </div>
-      {{ partial "footer.html" . }}
-    </div>
-    {{ partial "scripts.html" . }}
-  </body>
+   <div class="container-fluid td-outer">
+     <div class="td-main">
+       <div class="row flex-md-nowrap stretch-main">
+         <main class="col-12 col-md-8 col-lg-5 col-xl-6 order-md-2" role="main"> <!-- Adjusted: show sidebar at md, 3-col layout at lg+ -->
+       <!-- Olu - Mobile header row: hamburger + breadcrumb/banner (mobile only) -->
+       <div class="d-flex d-md-none align-items-center td-content">
+         <button id="td-mobile-sidebar-btn" class="btn btn-link p-0 me-2 align-self-center" aria-label="Open sidebar">
+           <span class="fas fa-bars text-dark fs-4 fa-fw" aria-hidden="true"></span>
+           <span class="sr-only">Menu</span>
+         </button>
+         <div class="flex-grow-1">
+           {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+           {{ partial "version-banner.html" . }}
+         </div>
+       </div>
+       <!-- MvM - Do a test for missing Title -->
+       {{ if not .Title }}
+           {{ warnf "File %s \n\t\t\t\thas no title in the front matter\n " .Page.File.Path }}
+       {{ end }}
+        <!-- NK - START of addition of versions selector menu,
+       taken from themes\docsy\layouts\partials\navbar.html,
+       this might get moved again, with further styling changes -->
+           {{ if  .Site.Params.versions }}
+           <li class="nav-item dropdown mr-4 d-none d-md-block">
+               {{ partial "navbar-version-selector.html" . }}
+           </li>
+           {{ end }}
+         <!-- END of addition -->
+         <!-- MvM: Move breadcrumb above banner (tablet and up) -->
+         <div class="d-none d-md-block w-100">
+           {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+           {{ partial "version-banner.html" . }}
+         </div>
+
+           {{ block "main" . }}{{ end }}
+         </main>
+         <aside data-stt-ignore class="d-none d-md-block col-md-4 col-lg-4 col-xl-3 td-sidebar d-print-none order-md-1" data-proofer-ignore> <!-- Show sidebar at md+ -->
+           {{ partial "sidebar.html" . }}
+         </aside>
+         <aside data-stt-ignore class="d-none d-lg-block col-lg-3 col-xl-3 td-sidebar-toc d-print-none order-lg-3" data-proofer-ignore> <!-- Show ToC at lg+ -->
+           {{ partial "page-meta-links.html" . }}
+               <!-- NK - insert of layout element for line break and ToC title -->
+               <span class="d-block p-2">
+                   <hr>
+                   <a class="toc-title" href="{{ .Permalink }}">{{ .Title }}</a> <!-- NK - insert of title into ToC -->
+               </span>
+           {{ partial "toc.html" . }}
+           {{ partial "taxonomy_terms_clouds.html" . }}
+         </aside>
+       </div>
+     </div>
+     <div id="td-sidebar-overlay" class="td-sidebar-overlay d-md-none" aria-hidden="true"></div>
+     {{ partial "footer.html" . }}
+   </div>
+   {{ partial "scripts.html" . }}
+ </body>
 </html>
+
diff --git a/layouts/landingpage/landingpage.html b/layouts/landingpage/landingpage.html
@@ -16,6 +16,13 @@
 
                     <!-- Main page content (everything except the left sidebar, top dock, and footer) -->
                     <main class="col lp" role="main" style="border-right: none;">
+                        <!-- Olu - Mobile header row: hamburger (mobile only) -->
+                        <div class="d-flex d-md-none align-items-start">
+                            <button id="td-mobile-sidebar-btn" class="btn btn-link p-0 me-2 align-items-center" aria-label="Open sidebar">
+                                <span class="fas fa-bars text-dark fs-4 fa-fw" aria-hidden="true"></span>
+                                <span class="sr-only">Menu</span>
+                            </button>
+                        </div>
                         <div class="container lp-container">
 
                             <!-- Title, Description, and Illustration -->

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -106,4 +106,29 @@
 {{ end -}}
 
 <script src='{{ "js/tabpane-persist.js" | relURL }}'></script>
+<!-- Olu - Mobile sidebar toggle script -->
+<script>
+  (function () {
+    var openBtn = document.getElementById('td-mobile-sidebar-btn');
+    var closeBtn = document.getElementById('td-mobile-sidebar-close');
+    var overlay = document.getElementById('td-sidebar-overlay');
+    var sectionNav = document.getElementById('td-section-nav');
+    function toggleSidebar() {
+      document.body.classList.toggle('td-sidebar-open');
+      if (sectionNav) {
+        sectionNav.classList.toggle('show');
+      }
+    }
+    function closeSidebar() {
+      document.body.classList.remove('td-sidebar-open');
+      if (sectionNav) {
+        sectionNav.classList.remove('show');
+      }
+    }
+    if (openBtn) openBtn.addEventListener('click', toggleSidebar);
+    if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
+    if (overlay) overlay.addEventListener('click', closeSidebar);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeSidebar(); });
+  })();
+</script>
 {{ partial "hooks/body-end.html" . -}}
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
@@ -2,18 +2,25 @@
 {{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
 {{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
 <div id="td-sidebar-menu" class="td-sidebar__inner overflow-auto"> <!-- NK - added overflow-auto for scrolling: MvM - removed conditional d-none (`{{ if $shouldDelayActive }} d-none{{ end }}` to show navigation on non-JS sites -->
+  <!-- Olu - Mobile sidebar close button -->
+  <div class="d-flex d-md-none justify-content-end p-2 text-dark">
+    <button id="td-mobile-sidebar-close" class="btn btn-link p-0" aria-label="Close sidebar">
+      <span class="fas fa-times text-dark" aria-hidden="true"></span>
+      <span class="sr-only">Close</span>
+    </button>
+  </div>
   {{ if not .Site.Params.ui.sidebar_search_disable -}}
   <form class="td-sidebar__search d-flex align-items-center">
     {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="#td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
   {{ else -}}
   <div id="content-mobile">
-  <form class="td-sidebar__search d-flex align-items-center">
-    {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">    </button>
-  </form>
+    <form class="td-sidebar__search d-flex align-items-center">
+      {{ partial "search-input.html" . }}
+      <button class="btn btn-link td-sidebar__toggle d-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="#td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">    </button>
+    </form>
   </div>
   <div id="content-desktop"></div>
   {{ end -}}