Enhance Quiz Layout with Fixed Sidebar and Centered Content

[SrijaVuppala295]

🛠️ Fixes Issue

Fixes: #516

Summary

This PR improves the quiz application layout by adding a fixed, full-height sidebar for quiz levels and centering the main quiz content area. The changes aim to improve usability and visual structure.

Changes Made

• Sidebar Layout:

  • Made the sidebar fixed (position: fixed) on the left with full height (height: 100vh) for persistent visibility.
  • Set sidebar width to 220px and adjusted .quiz-layout with margin-left: 220px to prevent overlap.

• Visual Enhancements:

  • Updated sidebar background color to #2c3e50 and added a shadow (box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2)) for depth.
  • Increased padding in the sidebar and centered text for a cleaner look.

• Main Quiz Content:

  • Centered the main quiz content next to the sidebar and limited its max width to 700px.
  • Added text-align: center to the quiz content for improved readability.

📄 Type of Change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation update (adds or updates related documentation)

📷 Screenshots/GIFs (if any)

BEFORE:

AFTER:

https://github.com/user-attachments/assets/4f1eee96-f380-4810-bee0-1609ee486345

✅ Checklist

• [x] I am a participant of GSSoC-ext.
• [x] I have followed the contribution guidelines of this project.
• [x] I have viewed deployment of my code.
• [x] My changes generate no new warnings.
• [x] I have made this change from my own.
• [x] I have taken help from some online resources.
• [x] My code follows the style guidelines of this project.
• [x] I have performed a self-review of my own code.
• [x] I have added documentation to explain my changes.

🤝 GSSoC Participation

• [x] This PR is submitted under the GSSoC program.
• [x] I have taken prior approval for this feature/fix.

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify[bot]]

✅ Deploy Preview for dfs-bfs-graph-traversal ready!

Name	Link
🔨 Latest commit	6271caa5d49918f597a9daaba9369e7bcb3671ca
🔍 Latest deploy log	https://app.netlify.com/sites/dfs-bfs-graph-traversal/deploys/672e2de255d2970008d0d8bd
😎 Deploy Preview	https://deploy-preview-562--dfs-bfs-graph-traversal.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SrijaVuppala295]

@sakeel-103 , please review and merge it , and add level 3 label to it !! I have enhanced the total page and added progess bar to the questions .

[github-actions[bot]]

🎉🎉 Thank you for your contribution! Your PR #562 has been merged! 🎉🎉