Skip to content

v3.3.0 — Responsive Layout Overhaul

Latest
Latest

Choose a tag to compare

View all tags
@puikinsh puikinsh released this 27 Jan 10:45
· 1 commit to master since this release
v3.3.0
a4dbcd4

v3.3.0 — Responsive Layout Overhaul

Complete rework of the mobile experience and sidebar toggle system for a polished, production-ready responsive layout.

What's New

Mobile Experience

  • Sidebar now works on mobile — Uses off-screen transform: translateX(-100%) with an overlay backdrop instead of broken margin/width toggling
  • Escape key & backdrop click close the mobile sidebar
  • Body scroll lock prevents background scrolling when the sidebar is open
  • Resize handler cleans up sidebar state when crossing the desktop/mobile breakpoint

Desktop Sidebar

  • Clean mini-sidebar collapse (70px) with hidden labels, badges, and submenus
  • Content area adjusts via margin-left transition for a smooth toggle effect

Responsive Refinements

  • Responsive card styles — Smaller padding and icon sizes on mobile for stats cards
  • Compact header buttons — Reduced button padding on small screens
  • Footer resets margin-left to 0 below the lg breakpoint

Bug Fixes

  • Mobile layout completely broken — Sidebar, header, footer, and cards all had layout issues below the lg breakpoint
  • Sidebar never toggled on desktop — SidebarManager module existed but was never imported or initialized in main.js
  • Duplicate sidebar toggle handlers — Inline <script> blocks in all 21 HTML pages conflicted with SidebarManager, causing desktop toggle clicks to cancel out (both handlers fired, toggling the class on then off)
  • Dropdowns pushed layout on mobile — Bootstrap's navbar-expand-lg sets .dropdown-menu to position: static below the lg breakpoint; forced to position: absolute for proper overlay behavior
  • Inconsistent mobile breakpoints — Some components used 768px, others 991.98px; standardized to 991.98px (lg) throughout
  • Hamburger menu hidden behind logo — Repositioned hamburger into the header navbar flow and pinned it at the sidebar edge on desktop
  • Users page bulk actions bar — Fixed flash-and-disappear caused by conflicting CSS (opacity: 0 / translateY(-100%) from a jQuery-era .show class pattern) fighting Alpine.js x-show; fixed broken Tailwind transition classes on a Bootstrap project
  • Users page checkboxes — Fixed toggle/checkbox hybrid styling caused by conflicting form-check-input + custom class with appearance: checkbox
  • Missing ApexCharts import — users.js used ApexCharts without importing it, causing a ReferenceError in chart initialization
  • Double component init — Removed redundant x-init="init()" on the userTable component (Alpine auto-calls init())
  • Updated copyright — Footer year updated to 2026, credit updated to "Bootstrap 5 by Colorlib" across all 20 pages

Architecture Changes

  • Single source of truth for sidebar — SidebarManager module handles all toggle logic; removed all 21 inline sidebar <script> blocks from HTML pages
  • Hamburger menu placement — Moved from floating position: fixed to header navbar; absolutely positioned at sidebar edge on desktop, normal flow on mobile
  • Sidebar backdrop — Added .sidebar-backdrop overlay element to all 21 HTML pages

Tech Stack

Dependency Version
Bootstrap 5.3.8
Alpine.js 3.15.4
ApexCharts 5.3.6
Chart.js 4.5.1
Vite 7.3.1
Sass 1.97.3

Getting Started

npm install
npm run dev      # Dev server
npm run build    # Production build

Full Changelog: https://github.com/nickmessing/bootstrap-admin-template-3/compare/v3.2.1...v3.3.0

Assets 2
Loading