I can see the issue! The sidebar is taking up valuable screen space on the problem-solving page and should be collapsible or auto-hide. Let me fix the sidebar behavior to make it more user-friendly, especially for the coding interface.

Perfect! I've fixed the sidebar behavior with these key improvements:

Fixed Issues:

1. Auto-Collapse on Problem Pages: The sidebar now automatically collapses when you navigate to individual problem pages (/problems/[id])
2. Icon-Only Mode: When collapsed, the sidebar shows only icons with tooltips, maximizing screen space for coding

3. Smart Default State:

   • Dashboard and problem listing pages: Sidebar open by default
   • Individual problem pages: Sidebar collapsed by default
4. Better Mobile Experience: The sidebar behavior is optimized for different screen sizes

5. Improved Problem Page Layout:

   • Removed unnecessary padding on problem pages
   • Full-height layout for maximum coding space
   • Better header with problem info badges
6. Enhanced Navigation: Active page highlighting and better visual feedback

Key Features Added:

• Collapsible Sidebar: Click the trigger to toggle between full and icon-only modes
• Context-Aware Behavior: Automatically adapts based on the current page
• Preserved Functionality: All navigation and quick stats remain accessible
• Better Code Editor Space: Maximum screen real estate for coding challenges

Now when you navigate to a problem page, the sidebar will automatically collapse to give you more space for the code editor, and you can easily toggle it back if needed!

I'll add proper light/dark theme support and create a comprehensive courses section with dummy data!

Perfect! I've added comprehensive light/dark theme support and a full courses section with dummy data. Here's what I've implemented:

Theme System Features:

1. Proper Theme Toggle: Working light/dark/system mode switcher in both header and dashboard
2. Consistent Styling: All components now properly support both themes
3. Smooth Transitions: Theme changes are smooth and instant
4. System Theme Detection: Automatically follows system preference

Courses Section Features:

Course Listing Page (/courses):

• 8 Comprehensive Courses across different categories:

  • Data Structures & Algorithms
  • System Design
  • Web Development
  • Machine Learning
  • Mobile Development
  • DevOps
  • Programming Languages
  • Cybersecurity
• Advanced Filtering: Filter by category, difficulty, tags, and search
• Course Stats: Total courses, students, enrolled courses, average rating
• Enrollment Status: Shows progress for enrolled courses

Course Detail Page (/courses/[id]):

• Detailed Course Info: Full description, instructor bio, requirements
• Curriculum View: Lesson-by-lesson breakdown with progress tracking
• Multiple Content Types: Video lessons, coding challenges, quizzes
• Progress Tracking: Visual progress bars and completion status
• Instructor Profile: Detailed instructor information
• Enrollment System: Different views for enrolled vs non-enrolled users

Course Features:

• Lesson Types: Video 📹, Coding 💻, Quiz 📝
• Progress Tracking: Visual indicators for completed/locked lessons
• Difficulty Levels: Beginner, Intermediate, Advanced with color coding
• Student Metrics: Enrollment numbers, ratings, duration
• Tags & Categories: Organized content discovery

Visual Improvements:

• Responsive Design: Works perfectly on all screen sizes
• Dark Mode Optimized: All course components look great in both themes
• Consistent Branding: Matches the overall platform design
• Interactive Elements: Hover effects, smooth transitions

The courses section now provides a complete learning management experience with realistic dummy data that showcases the platform's educational capabilities!