Fix navbar - hamburger menu rendering issues

[Kaushik-Kumar-CEG]

Closes #429

Issue

The hamburger menu had rendering and interaction issues:

• Transparent background made menu unreadable
• White text on white background in light mode was making the menu unreadable
• DejaCode dropdown and hamburger menu could open simultaneously, causing bad UI experience and screen conflicts

---

Solution

1. Fixed menu background and light mode readability

• Added solid background colors
• changed text colors for proper contrast
• Added box shadow for better visuals

Before fix :

hamburger.menu.-.before.fix.vid.mp4

After fix :

hamburger.fix.vid.comp.mp4

2. Fixed menu interaction conflicts

• only one menu can be open at a time (either the dejacode dropdown menu or the hamburger menu)
• Clicking DejaCode dropdown automatically closes hamburger menu (and vice versa)
• Fixed header positioning to prevent jumping when dropdown opens

Before fix :

dejacode.dropdown.menu.before.fix.vid.mp4

After fix :

dropdown.item.fix.vid.comp.mp4

---

Changes made

Files modified:

1. dejacode/static/css/dejacode_bootstrap.css - Added responsive navbar styles with theme suited backgrounds and colors
2. dejacode/static/js/navbar_menu_toggle.js - Created menu mutual exclusion logic using Bootstrap events
3. dje/templates/includes/navbar_header.html - Included navbar toggle script

Logic:

• CSS uses media queries to apply solid backgrounds only in collapsed state (<1200px)
• JavaScript listens to Bootstrap dropdown/collapse events and closes conflicting menus automatically

---

Testing

Tested locally

• Menu interactions in all combinations tested in desktop view and mobile view

• Both dark mode and light mode was tested

• make valid - All checks passed

• make test - 1781 tests passed

---