Make the Sidebar Collapsible #436
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…lf-screen detection
…n half-screen and full screen
…een mode, and removed the little scroll column
gonuke
approved these changes
Nov 21, 2025
Member
gonuke
left a comment
gonuke
left a comment
There was a problem hiding this comment.
I've confirmed that this worked for me - thanks @dean-krueger
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary of Changes
The sidebar on fuelcycle.org is really annoying when you're on a small screen or in side-by-side mode. This PR adds a button to the sidebar that collapses it, and also auto-detects when you go half-screen mode and collapses it automatically then as well (you can still bring it back if you want with the button)
Design Notes
The button stays at the top of the page, since most of the sidebar stuff is up there anyway, it's sort of medium sized (I tried a few different sizes and this one looked the best to me), and the auto-detection for half-screen mode happens at 55% of the total width of your screen. There's some hover text on the button, which tells you what it does, and I chose to use a little arrow pointing in/out because that made the most sense to me (the one @gonuke showed for the PyData site used a hamburger menu, the three lines, but someone in the comments of that PR pointed out that this button is typically for something else and was sort of confusing).
Additionally, I'm not really a web guy (though I've been getting better), so while most of my Cursor-aided PRs include at least 10-20% of my input (sometimes, though not always, more), this one is like 99% vibe coding. I do not know how Javascript works, and while I do know a bit about CSS and HTML, I do not really know what sort of stuff went into making this happen. I just tested it out and built the site over and over again until it looked good.
I tried to upload a screen recording but it was taking too long. I highly recommend playing with this yourself! It's kinda fun.
Related CEPs and Issues
Closes #435
Associated Developers
Cursor AI (see my note about vibe coding)
Testing and Validation
I only was able to test this on my Mac on safari. It might (I hope it isn't, and it shouldn't be, but...) be funky on other screen sizes/browsers.
Reviewers, please refer to the Cyclus Guide for Reviewers.