/**
* Shared Sidebar Layout System
*
* This file abstracts the sidebar layout pattern used across slides (not games).
* It matches the exact implementation from group_randomizer.
*
* USAGE:
* 1. Import this file in your slide's HTML:
* 2. Use the CSS variables and classes defined below
* 3. Implement the toggle functionality in your script (see JavaScript section comments)
*
* NOTE: This file does NOT include sidebar content styling - only layout, positioning,
* toggle states, and responsiveness. Individual slides handle their own sidebar content.
*
* LAYOUT PATTERN:
* - Fixed sidebar that slides out using transform: translateX()
* - Toggle button moves with sidebar using transform
* - Main content adjusts margin-left based on sidebar state
* - Uses body.sidebar-collapsed class to control state
*/
/* ==================== CSS VARIABLES ==================== */
:root {
--sidebar-width: 330px;
--sidebar-offset: var(--sidebar-width);
--sidebar-transition: 0.3s ease;
}
body.sidebar-collapsed {
--sidebar-offset: 0px;
}
body.sidebar-collapsed .main-content {
margin-left: 0;
}
/* ==================== BASE LAYOUT ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
font-family: 'Poppins', sans-serif;
height: 100vh;
display: flex;
overflow: hidden;
}
/* ==================== SIDEBAR CONTAINER ==================== */
.sidebar {
width: var(--sidebar-width);
min-width: 220px;
background: #fff;
display: flex;
flex-direction: column;
height: 100vh;
position: fixed;
left: 0;
top: 0;
overflow: visible;
transform: translateX(0);
transition: transform var(--sidebar-transition);
z-index: 100;
will-change: transform;
}
/* Sidebar content wrapper - handles padding and scrolling */
.sidebar-content {
flex: 1;
padding: 17px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
height: 100%;
overflow-x: hidden;
}
body.sidebar-collapsed .sidebar {
transform: translateX(calc(-1 * var(--sidebar-width)));
}
/* ==================== SIDEBAR TOGGLE BUTTON ==================== */
/* Toggle button is positioned relative to sidebar, so it moves with it */
.sidebar-toggle-btn {
position: absolute;
top: 16px;
right: -20px;
width: 20px;
height: 56px;
border-radius: 0 10px 10px 0;
border: none;
background: linear-gradient(135deg, #832EC5 0%, #a855f7 100%);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 8px rgba(131, 46, 197, 0.25);
transition: all 0.25s ease;
z-index: 101;
opacity: 0.7;
}
.sidebar-toggle-btn:hover {
opacity: 1;
width: 24px;
right: -24px;
box-shadow: 3px 3px 12px rgba(131, 46, 197, 0.35);
}
.sidebar-toggle-btn .toggle-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.sidebar-toggle-btn.collapsed .toggle-icon {
transform: rotate(180deg);
}
/* ==================== MAIN CONTENT LAYOUT ==================== */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
min-height: 0;
padding: 0 40px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
z-index: 1;
margin-left: var(--sidebar-width);
transition: margin-left var(--sidebar-transition);
}
.main-content::before,
.main-content::after {
content: '';
display: block;
height: 20px;
width: 100%;
flex-shrink: 0;
}
/* ==================== RESPONSIVE DESIGN ==================== */
/**
* Sidebar maintains fixed width at all screen sizes
* No responsive width adjustments - sidebar stays at --sidebar-width (310px)
*/
/* ==================== ACCESSIBILITY ==================== */
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
:root {
--sidebar-transition: 0.01ms;
}
.sidebar-toggle-btn {
transition: all 0.01ms;
}
.sidebar-toggle-btn .toggle-icon {
transition: none;
}
}
/* Focus states for keyboard navigation */
.sidebar-toggle-btn:focus-visible {
outline: 2px solid #832EC5;
outline-offset: 2px;
}
/* ==================== JAVASCRIPT INTEGRATION ==================== */
/**
* JavaScript Toggle Implementation
*
* This matches the group_randomizer pattern exactly:
*
* ```javascript
* const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
* const sidebar = document.querySelector('.sidebar');
*
* if (sidebarToggleBtn && sidebar) {
* sidebarToggleBtn.addEventListener('click', () => {
* const isCollapsed = document.body.classList.toggle('sidebar-collapsed');
* sidebarToggleBtn.classList.toggle('collapsed', isCollapsed);
*
* // Optional: Trigger any resize/recalculation needed
* // requestAnimationFrame(() => {
* // recalculateLayout();
* // });
* });
* }
* ```
*
* HTML Structure:
* ```html
*
*
*
*
*
* ```
*/
/* ==================== NOTES ==================== */
/**
* Implementation Notes:
*
* 1. Sidebar Width:
* - Default: 310px (matches group_randomizer)
* - Override --sidebar-width in your slide's CSS if needed
* - Responsive: 270px (1024px), 250px (768px), 230px (640px)
*
* 2. Layout Pattern:
* - Fixed sidebar that slides out completely when collapsed
* - Uses transform: translateX() for smooth animation
* - Toggle button is positioned absolutely relative to sidebar, so it moves naturally with it
* - Main content adjusts margin-left automatically
*
* 3. Sidebar Structure:
* - .sidebar: Container with fixed positioning
* - .sidebar-content: Inner wrapper with padding and scrolling
* - Individual slides add their content inside .sidebar-content
*
* 4. Toggle State:
* - Controlled by body.sidebar-collapsed class
* - CSS variables update automatically
* - Toggle button moves with sidebar automatically since it's positioned relative to sidebar
*
* 5. Main Content:
* - Uses margin-left: var(--sidebar-width) when open
* - Removes margin when sidebar is collapsed
* - Transition matches sidebar animation timing
*
* 6. Responsive Behavior:
* - Sidebar width reduces at breakpoints
* - All transforms and margins adjust automatically via CSS variables
* - No JavaScript needed for responsive behavior
*/