/* Remove default margins/padding, prevent body scroll */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* <--- This ensures no permanent scrollbar on the entire window */ } /* Temporarily disable transitions on initial load if needed */ .no-transition * { transition: none !important; } /* Pinned sidebar: from top=60px to bottom=50px, left=0 */ .sidebar { position: fixed; top: 60px; /* below the pinned header */ bottom: 50px; /* above the pinned footer */ left: 0; width: 260px; overflow-y: auto; background-color: #f8f9fa; transition: width 0.3s ease; z-index: 1020; } /* Collapsed sidebar => 60px */ .sidebar.collapsed { width: 60px; } /* If we set data-sidebar-collapsed on , collapse on initial load */ [data-sidebar-collapsed="true"] #sidebar { width: 60px; } /* Circle resizing, smoothly */ .sidebar-header .bg-secondary { transition: width 0.3s ease, height 0.3s ease; } .sidebar.collapsed .sidebar-header .bg-secondary { width: 30px !important; height: 30px !important; } [data-sidebar-collapsed="true"] #sidebar .sidebar-header .bg-secondary { width: 25px !important; height: 25px !important; } /* Hide .link-text and center icons in collapsed mode */ .sidebar.collapsed .link-text { display: none; } .sidebar.collapsed .nav-link { justify-content: center; } [data-sidebar-collapsed="true"] #sidebar .link-text { display: none; } [data-sidebar-collapsed="true"] #sidebar .nav-link { justify-content: center; } /* MAIN CONTENT: pinned from top=60px to bottom=50px, left=260px to right=0 */ #mainContent { position: fixed; top: 60px; /* below header */ bottom: 50px; /* above footer */ left: 260px; /* to the right of the expanded sidebar */ right: 0; overflow-y: auto; /* scroll only if content is taller than this region */ overflow-x: hidden; /* avoid horizontal scroll */ padding: 16px; transition: left 0.3s ease; /* smooth shift when sidebar collapses */ } /* When sidebar is collapsed, shift main content left to 60px */ .sidebar.collapsed ~ #mainContent { left: 60px; } /* Also handle initial load if data-sidebar-collapsed is set */ [data-sidebar-collapsed="true"] #mainContent { left: 60px; } /* On smaller screens (under 992px), the pinned sidebar is hidden (d-none d-lg-flex), so remove left offset for main content. */ @media (max-width: 991.98px) { #mainContent { left: 0 !important; } } /* Example styling for nav links, spacing, etc. */ .nav-link { display: flex; align-items: center; font-size: 14px; padding: 8px 12px; } hr.mx-3 { margin-left: 12px !important; margin-right: 12px !important; } .nav-link.active { background-color: #007bff; color: #fff; border-radius: 4px; } /*.nav-link.active { background-color: #e0e0e0;*/ /* or your chosen highlight color */ /*color: #333;*/ /* text color */ /*border-radius: 4px;*/ /* optional rounding */ /*}*/ .nav-link.active i { color: inherit; /* icon matches text color */ } .fade-page { opacity: 0; /* Start invisible */ transition: opacity 0.01s ease-in-out; /* Fade over 0.3s */ } .fade-page.loaded { opacity: 1; /* Fully visible */ }