gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
394 lines (305 loc) • 25.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed sidebar | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1ABB9C" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a2332" media="(prefers-color-scheme: dark)">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.svg">
<meta name="description" content="Fixed sidebar — Layouts > Fixed sidebar. Free admin template by Colorlib. 60 pages, 20 chart variants, dark mode, PWA-ready.">
<meta property="og:type" content="website">
<meta property="og:title" content="Fixed sidebar">
<meta property="og:description" content="Fixed sidebar — Layouts > Fixed sidebar. Free admin template by Colorlib. 60 pages, 20 chart variants, dark mode, PWA-ready.">
<meta property="og:image" content="/images/android-chrome-512x512.svg">
<meta property="og:site_name" content="Gentelella v4">
<meta name="twitter:card" content="summary_large_image">
<script>(function(){try{var t=localStorage.getItem('theme');var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var theme=t||(d?'dark':'light');document.documentElement.setAttribute('data-theme',theme);}catch(e){}})();</script>
<script type="module" crossorigin src="/js/rolldown-runtime-DEgBLETi.js"></script>
<script type="module" crossorigin src="/js/toast-DgCSlJPv.js"></script>
<script type="module" crossorigin src="/js/menus-BVcs0GJR.js"></script>
<script type="module" crossorigin src="/js/modal-MTuCfURV.js"></script>
<script type="module" crossorigin src="/js/main-v4-BFwmMcfm.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-v4-DDS6x4g-.css">
</head>
<body data-shell="admin" data-page="fixed-sidebar" data-breadcrumb="Home > Layouts > Fixed sidebar">
<a class="skip-link" href="#main-content">Skip to main content</a>
<aside class="sidebar" aria-label="Primary navigation">
<div class="sidebar-brand">
<div class="brand-icon">G</div>
<div class="brand-name">Gentelella <small>v4</small></div>
</div>
<nav class="sidebar-nav">
<div class="nav-group">
<div class="nav-label">General</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="4" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="10" width="7" height="11" rx="1.5"/></svg>
<span class="nav-text">Dashboards</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="index.html">Operations</a><a class="nav-sublink" href="index2.html">Analytics</a><a class="nav-sublink" href="index3.html">Sales</a><a class="nav-sublink" href="index4.html">System health</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6M9 13h4"/></svg>
<span class="nav-text">Forms</span>
<span class="badge badge-red">Hot</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="form.html">General</a><a class="nav-sublink" href="form_advanced.html">Advanced controls</a><a class="nav-sublink" href="form_buttons.html">Buttons</a><a class="nav-sublink" href="form_upload.html">Upload</a><a class="nav-sublink" href="form_validation.html">Validation</a><a class="nav-sublink" href="form_wizards.html">Wizard</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M9 10v9M15 10v9"/></svg>
<span class="nav-text">Tables</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="tables.html">Static</a><a class="nav-sublink" href="tables_dynamic.html">Dynamic</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19V5M8 19v-8M12 19V9M16 19v-5M20 19v-9"/></svg>
<span class="nav-text">Charts</span>
<span class="badge badge-teal">New</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="chartjs.html">Chart cards</a><a class="nav-sublink" href="echarts.html">ECharts gallery</a><a class="nav-sublink" href="other_charts.html">SVG charts</a></div></div>
</div>
<a class="nav-link" href="calendar.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 4v6M16 4v6"/></svg>
<span class="nav-text">Calendar</span>
</a>
<a class="nav-link" href="map.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
<span class="nav-text">Map</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Apps</div>
<a class="nav-link" href="chat.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
<span class="nav-text">Chat</span>
<span class="badge badge-teal">3</span>
</a>
<a class="nav-link" href="inbox.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 6 10-6"/></svg>
<span class="nav-text">Inbox</span>
</a>
<a class="nav-link" href="kanban.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="6" height="14" rx="1.5"/><rect x="11" y="3" width="6" height="9" rx="1.5"/><rect x="19" y="3" width="2" height="6" rx="0.5"/></svg>
<span class="nav-text">Kanban</span>
</a>
<a class="nav-link" href="file_manager.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 7a2 2 0 012-2h4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
<span class="nav-text">Files</span>
</a>
<a class="nav-link" href="notifications.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3a6 6 0 00-6 6c0 6-3 7-3 7h18s-3-1-3-7a6 6 0 00-6-6z"/><path d="M10.5 21a1.5 1.5 0 003 0"/></svg>
<span class="nav-text">Notifications</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">E-commerce</div>
<a class="nav-link" href="e_commerce.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l1-5h16l1 5M3 9v10a2 2 0 002 2h14a2 2 0 002-2V9M3 9h18"/><path d="M9 13a3 3 0 006 0"/></svg>
<span class="nav-text">Storefront</span>
</a>
<a class="nav-link" href="product_detail.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 13l-7 7a2 2 0 01-2.83 0L3 12.83V4h8.83L20 12.17a2 2 0 010 2.83z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>
<span class="nav-text">Product</span>
</a>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="21" r="1.5"/><circle cx="20" cy="21" r="1.5"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg>
<span class="nav-text">Orders</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="orders.html">All orders</a><a class="nav-sublink" href="order_detail.html">Order detail</a></div></div>
</div>
<a class="nav-link" href="invoice.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 21V3h14v18l-3-2-3 2-3-2-3 2-2-2z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>
<span class="nav-text">Invoice</span>
</a>
<a class="nav-link" href="pricing_tables.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="2" x2="12" y2="22"/><path d="M16 6H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 010 7H7"/></svg>
<span class="nav-text">Pricing</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Projects</div>
<a class="nav-link" href="projects.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
<span class="nav-text">All projects</span>
</a>
<a class="nav-link" href="project_detail.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Project detail</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">UI library</div>
<a class="nav-link" href="general_elements.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
<span class="nav-text">Elements</span>
</a>
<a class="nav-link" href="widgets.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Widgets</span>
<span class="badge badge-blue">5</span>
</a>
<a class="nav-link" href="playground.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
<span class="nav-text">Playground</span>
<span class="badge badge-teal">New</span>
</a>
<a class="nav-link" href="theme.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5a2 2 0 00-2 2v2a2 2 0 002 2h2v3a1 1 0 001 1h3a1 1 0 001-1v-3h7a2 2 0 002-2v-2a2 2 0 00-2-2z"/><path d="M19 11V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v6"/></svg>
<span class="nav-text">Theme</span>
<span class="badge badge-teal">New</span>
</a>
<a class="nav-link" href="typography.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
<span class="nav-text">Typography</span>
</a>
<a class="nav-link" href="icons.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>
<span class="nav-text">Icons</span>
</a>
<a class="nav-link" href="media_gallery.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
<span class="nav-text">Media</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Admin</div>
<a class="nav-link" href="contacts.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></svg>
<span class="nav-text">Contacts</span>
</a>
<a class="nav-link" href="user_management.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-text">User management</span>
</a>
<a class="nav-link" href="profile.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-text">Your profile</span>
</a>
<a class="nav-link" href="settings.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>
<span class="nav-text">Settings</span>
</a>
<a class="nav-link" href="faq.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
<span class="nav-text">Help center</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Layouts</div>
<a class="nav-link active" href="fixed_sidebar.html" aria-current="page">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>
<span class="nav-text">Fixed sidebar</span>
</a>
<a class="nav-link" href="fixed_footer.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>
<span class="nav-text">Fixed footer</span>
</a>
<a class="nav-link" href="level2.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Nested page</span>
</a>
<a class="nav-link" href="plain_page.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Blank</span>
</a>
</div>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="avatar">A<span class="online"></span></div>
<div class="sidebar-user-info">
<div class="name">Aigars Silkalns</div>
<div class="role">Admin</div>
</div>
<button class="more-btn" aria-label="More options">
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="3" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="13" r="1.2"/></svg>
</button>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-left">
<button class="sidebar-toggle" type="button" aria-label="Open menu" aria-controls="sidebar" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<nav class="breadcrumb" aria-label="Breadcrumb"><span class="current" aria-current="page">Home</span></nav>
</div>
<div class="search-box">
<svg class="s-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input type="text" placeholder="Search pages or run a command…" aria-label="Open command palette">
<kbd>⌘K</kbd>
</div>
<div class="topbar-right">
<a class="tb-btn tb-docs" href="https://gentelella.colorlib.com/docs/" target="_blank" rel="noopener" title="Documentation">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 4h11a4 4 0 014 4v13H8a4 4 0 01-4-4V4z"/><path d="M4 17a4 4 0 014-4h11"/></svg>
<span>Docs</span>
</a>
<button class="tb-btn theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme" aria-pressed="false">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
<button class="tb-btn tb-notifications" type="button" title="Notifications" aria-label="Notifications" aria-haspopup="dialog" aria-expanded="false">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 3a6 6 0 00-6 6c0 6-3 7-3 7h18s-3-1-3-7a6 6 0 00-6-6z"/><path d="M10.5 21a1.5 1.5 0 003 0"/></svg>
<span class="dot"></span>
</button>
<button class="tb-btn tb-messages" type="button" title="Messages" aria-label="Messages" aria-haspopup="dialog" aria-expanded="false">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 6 10-6"/></svg>
</button>
<button class="tb-avatar" type="button" aria-label="Account menu" aria-haspopup="menu" aria-expanded="false">A</button>
</div>
</header>
<main id="main-content" tabindex="-1" class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Layouts</div>
<h1 class="page-title">Fixed sidebar</h1>
</div>
</div>
</div>
<div class="row col-1">
<div class="alert alert-info">
<svg class="alert-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v.01M8 7v4"/></svg>
<div class="alert-body"><strong>Default behavior in v4.</strong> The sidebar uses <code>position: fixed</code> by default and scrolls independently from the main content. Try scrolling — the sidebar stays in place.</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Long content for scroll testing</div></div>
<div class="card-body" style="display:flex;flex-direction:column;gap:14px;font-size:13px;color:var(--text-secondary);line-height:1.6">
<p>The v4 layout is built around a fixed sidebar (<code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">.sidebar { position: fixed }</code>) and a fixed topbar (<code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">.topbar { position: fixed }</code>). The main content scrolls under both.</p>
<p>This page exists as a smoke test — load it and scroll. The sidebar should stay anchored to the left edge regardless of how far down you go, and so should the topbar at the top.</p>
${'<p>Filler paragraph used to exercise vertical scroll on the main content area while the sidebar holds its position.</p>'.repeat(0)}
</div>
</div>
<div class="card"><div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7;padding:24px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
<div class="card"><div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7;padding:24px">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</div></div>
<div class="card"><div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7;padding:24px">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</div></div>
<div class="card"><div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7;padding:24px">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</div></div>
<div class="card"><div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7;padding:24px">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias.</div></div>
</div>
</div>
<footer class="footer">
<span>Gentelella — A free Bootstrap admin template by <a href="https://colorlib.com">Colorlib</a></span>
<span>v4.0 Concept · 2026</span>
</footer>
</main>
</body>
</html>