/* =====================================================
sidebar-collapsed.css
قائمة جانبية مضغوطة (أيقونات فقط) + قوائم منسدلة (Flyout)
تظهر عند مرور الفأرة فوق كل قسم — توفيرًا لحيز الشاشة.
طريقة التركيب:
1) أضِف وسم الربط ده في بتاع dashboard.html بعد main.css مباشرة:
(لازم يتحمّل بعد main.css عشان يتغلّب على قواعده المكافئة).
2) استبدل عنصر في
dashboard.html بالمحتوى الموجود في sidebar-nav.html المرفق.
3) عدّل دالة navigateTo في app.js حسب المقتطف المرفق في الرد.
===================================================== */
/* الشريط الجانبي دائمًا بعرض الأيقونات فقط */
.sidebar {
width: var(--sidebar-collapsed);
overflow: visible; /* لازم visible عشان القوائم المنسدلة تظهر خارج حدود الشريط */
}
.main-content {
margin-right: var(--sidebar-collapsed);
}
.sidebar-header {
justify-content: center;
padding: var(--space-4);
}
.sidebar-brand {
display: none;
}
.sidebar-nav {
overflow: visible;
}
/* كل قسم (القائمة الرئيسية / الإدارة / النظام / المساعدة والدعم) */
.nav-section {
position: relative;
}
.nav-section-label {
display: none;
}
.nav-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-item {
justify-content: center;
padding: 10px;
}
.nav-item.active::before {
right: auto;
left: 0;
}
.nav-label,
.nav-badge {
display: none;
}
/* ─── القائمة المنسدلة (Flyout) ─── */
.nav-flyout {
position: absolute;
top: 0;
right: 100%;
width: 226px;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-3);
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
z-index: 250;
pointer-events: none;
}
.nav-section:hover .nav-flyout,
.nav-section:focus-within .nav-flyout {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
.nav-flyout-label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
padding: 2px var(--space-3) var(--space-3);
white-space: nowrap;
}
.nav-flyout-items {
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-flyout .nav-item {
justify-content: flex-start;
padding: 10px var(--space-3);
}
.nav-flyout .nav-item.active::before {
right: 0;
left: auto;
}
.nav-flyout .nav-label {
display: block;
white-space: nowrap;
}
.nav-flyout .nav-badge {
display: inline-block;
}
/* بطاقة المستخدم أسفل القائمة: الأفاتار فقط (الاسم/الدور مخفيان لضيق المساحة،
وهما ظاهران أصلاً بالكامل داخل صفحة "المحفظة") */
.user-info {
display: none;
}
.user-card {
justify-content: center;
}
/* زرّا "التذاكر" و"خروج" أسفل الشريط: أيقونة فقط + tooltip أصلي عبر title */
.sidebar-footer .btn-label-text {
display: none;
}
.sidebar-footer .btn {
justify-content: center;
padding: 8px !important;
}
.sidebar-footer .btn svg {
margin: 0 !important;
}
@media (max-width: 640px) {
.page-content { padding: var(--space-4); }
}