UI Feat: Navigation Header / Tab Bar + Collapsible Panel

[CalvinT05]

Tab Bar

Header bar

• In Room / Not in Room Views
• Scrollable Navigation
• Tab selection
• Toolbar on hover
• Collapse Button
• Maximize Button

Side bar

• Drag/Button to Collapse
• In Room / Not in Room Views
• Tab selection
• Toolbar on hover
• Expand Button
• Maximize Button

In Room View Demo

Two.Sum.-.LeetCode.-.Google.Chrome.2026-03-02.02-25-45.mp4

Notes

Issues/Incomplete

• When screen is magnified (ctrl +/-), panel resize width has alignment issues when set to 36px (hard-coded minimum) by dragging panel or clicking collapse button and prevents the collapsed condition (width <= 36px) from triggering the side panel display. Also, the height is fixed in the contentScript.

Two.Sum.-.LeetCode.-.Google.Chrome.2026-03-02.02-21-47.mp4

• Still deciding on / creating icons.
• Maximize just sets width to 100vh.
• Upon maximizing panel, minimize button should replace maximize button.
• Active room is a separate useState in both components (will probably implement global context to share state).
• isHovered and inRoom states are passed in as props (same as above).
• Looks clunky with the current pages and will be remedied during the redesign.
• Tabs do not reroute to pages yet.

Extra

• Page content sits under the header bar
• Page content frame has its own horizontal scrollbar
• Each page should have its own vertical scrollbar
• Scrollbars now match theme

Two.Sum.-.LeetCode.-.Google.Chrome.2026-03-02.02-16-25.mp4

P.S. I know it says 31 commits, but a bunch of them are itty bitty UI and reorganization by Yash and I.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bsg	Ready	Preview, Comment	Mar 30, 2026 7:00pm

[Eskan0r]

updated main, youll need to pull that and make sure everything still works, implement the page routing and if you dont have a page to display for a tab just make it blank for now

[CalvinT05]

I implemented pages and routing to the tabs and shared states. However, it conflicts with and currently doesn't follow the logical flow of the application yet.

Current routing:
login -> room-user (room choice && chat + live stats)

Redesigned flow (not yet implemented):
login -> room choice -> room || chat || leaderboard || statistics -> room choice

I'll prefer to work with Riyan with this to speed things up since he made the routing, and I also have to finish the pages.