@@ -165,9 +165,10 @@ body {
165
165
.main-content {
166
166
flex : 1 ;
167
167
margin-left : 260px ;
168
- padding : 2rem 0 2rem 2rem ;
169
- overflow-y : auto;
168
+ padding : 2rem ;
170
169
width : calc (100% - 260px );
170
+ overflow-y : auto;
171
+ height : 100vh ;
171
172
}
172
173
173
174
.content-wrapper {
@@ -477,7 +478,188 @@ body {
477
478
color : var (--text-primary );
478
479
}
479
480
481
+ .checkbox-container {
482
+ display : flex;
483
+ flex-wrap : wrap;
484
+ gap : 10px ;
485
+ }
486
+
487
+ .checkbox-container input [type = "checkbox" ] {
488
+ margin-right : 5px ;
489
+ }
490
+
491
+ @media (max-width : 600px ) {
492
+ .checkbox-container {
493
+ flex-direction : column;
494
+ }
495
+ }
496
+
497
+ /* Mobile Menu Button */
498
+ .mobile-menu-button {
499
+ display : none;
500
+ position : fixed;
501
+ top : 1rem ;
502
+ left : 1rem ;
503
+ z-index : 9999 ;
504
+ padding : 0.75rem ;
505
+ background : var (--bg-secondary );
506
+ border : none;
507
+ border-radius : 4px ;
508
+ color : var (--text-primary );
509
+ cursor : pointer;
510
+ width : 48px ;
511
+ height : 48px ;
512
+ align-items : center;
513
+ justify-content : center;
514
+ }
515
+
516
+ /* Sidebar Overlay */
517
+ .sidebar-overlay {
518
+ display : none;
519
+ position : fixed;
520
+ top : 0 ;
521
+ left : 0 ;
522
+ right : 0 ;
523
+ bottom : 0 ;
524
+ background : rgba (0 , 0 , 0 , 0.5 );
525
+ z-index : 998 ;
526
+ }
527
+
528
+ .sidebar-overlay .active {
529
+ display : block;
530
+ }
531
+
532
+ /* Theme Toggle */
533
+ .theme-toggle {
534
+ z-index : 9999 ;
535
+ }
536
+
537
+ /* Base Sidebar Styles */
538
+ .sidebar {
539
+ width : 260px ;
540
+ background : var (--sidebar-bg );
541
+ border-right : 1px solid var (--border-color );
542
+ display : flex;
543
+ flex-direction : column;
544
+ transition : transform 0.3s ease-in-out;
545
+ }
546
+
547
+ /* Mobile Styles */
548
+ @media (max-width : 768px ) {
549
+ .main-content {
550
+ margin-left : 0 ;
551
+ width : 100% ;
552
+ padding : 4rem 1rem 1rem 1rem ;
553
+ height : 100vh ;
554
+ overflow-y : auto;
555
+ -webkit-overflow-scrolling : touch;
556
+ }
557
+
558
+ .sidebar {
559
+ position : fixed;
560
+ height : 100% ;
561
+ overflow-y : auto;
562
+ -webkit-overflow-scrolling : touch;
563
+ }
564
+
565
+ .layout-container {
566
+ display : block;
567
+ height : 100vh ;
568
+ overflow : hidden;
569
+ }
570
+
571
+ body {
572
+ overflow-y : hidden;
573
+ }
574
+
575
+ /* Enable scrolling when sidebar is closed */
576
+ body : not (.sidebar-active ) {
577
+ overflow-y : auto;
578
+ }
579
+
580
+ .mobile-menu-button {
581
+ display : flex;
582
+ }
583
+
584
+ .sidebar {
585
+ position : fixed;
586
+ top : 0 ;
587
+ left : 0 ;
588
+ bottom : 0 ;
589
+ width : 85% ;
590
+ max-width : 320px ;
591
+ transform : translateX (-100% );
592
+ z-index : 999 ;
593
+ background : var (--bg-secondary );
594
+ }
595
+
596
+ .sidebar .active {
597
+ transform : translateX (0 );
598
+ }
599
+
600
+ /* Ensure sidebar content is clickable */
601
+ .sidebar-nav ,
602
+ .sidebar-link ,
603
+ .sidebar-header ,
604
+ .brand-icon ,
605
+ .brand-title {
606
+ position : relative;
607
+ z-index : 999 ;
608
+ pointer-events : auto !important ;
609
+ }
610
+
611
+ .sidebar-link {
612
+ display : flex;
613
+ align-items : center;
614
+ padding : 1rem 1.5rem ;
615
+ color : var (--text-secondary );
616
+ text-decoration : none;
617
+ transition : all 0.2s ease;
618
+ cursor : pointer;
619
+ }
620
+
621
+ .sidebar-link : hover {
622
+ background : var (--hover-bg );
623
+ color : var (--accent-primary );
624
+ }
625
+
626
+ .sidebar-link .active {
627
+ background : var (--hover-bg );
628
+ color : var (--accent-primary );
629
+ border-right : 3px solid var (--accent-primary );
630
+ }
631
+
632
+ /* Reset main content */
633
+ .main-content {
634
+ margin-left : 0 ;
635
+ width : 100% ;
636
+ padding : 4rem 1rem 1rem 1rem ;
637
+ }
638
+
639
+ /* Layout container */
640
+ .layout-container {
641
+ display : flex;
642
+ min-height : 100vh ;
643
+ width : 100% ;
644
+ }
645
+ }
646
+
480
647
/* Custom Scrollbar */
648
+ .main-content ::-webkit-scrollbar ,
649
+ .sidebar ::-webkit-scrollbar {
650
+ width : 8px ;
651
+ }
652
+
653
+ .main-content ::-webkit-scrollbar-track ,
654
+ .sidebar ::-webkit-scrollbar-track {
655
+ background : var (--bg-secondary );
656
+ }
657
+
658
+ .main-content ::-webkit-scrollbar-thumb ,
659
+ .sidebar ::-webkit-scrollbar-thumb {
660
+ background : var (--accent-secondary );
661
+ border-radius : 4px ;
662
+ }
481
663
::-webkit-scrollbar {
482
664
width : 8px ;
483
665
height : 8px ;
0 commit comments