feat: Make shell component noscript-compatible#275
feat: Make shell component noscript-compatible#275PieterjanDeClippel wants to merge 1 commit intomasterfrom
Conversation
Add a hidden checkbox (indeterminate=auto, checked=show, unchecked=hide) with noscript-only hamburger/close labels for sidebar toggling on narrow screens. CSS :checked sibling selectors override sidebar visibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a clever solution to make the shell component compatible with environments where JavaScript is disabled. The use of a hidden checkbox controlled by labels and styled with CSS sibling selectors for the noscript case is well-implemented. The overall approach is sound and the code is clean. I have one minor suggestion to improve the SCSS by reducing some code duplication.
| .sidebar-open.noscript { | ||
| padding: .25rem .75rem; | ||
| font-size: 1.25rem; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| .sidebar-close.noscript { | ||
| padding: .25rem .75rem; | ||
| font-size: 1.5rem; | ||
| line-height: 1; | ||
| color: rgba(255, 255, 255, 0.75); | ||
| align-self: flex-end; | ||
| } |
There was a problem hiding this comment.
There is some style duplication for .sidebar-open.noscript and .sidebar-close.noscript. You can group the common properties (padding and line-height) into a shared rule to make the code more concise and easier to maintain, following the DRY (Don't Repeat Yourself) principle.
.sidebar-open.noscript, .sidebar-close.noscript {
padding: .25rem .75rem;
line-height: 1;
}
.sidebar-open.noscript {
font-size: 1.25rem;
}
.sidebar-close.noscript {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.75);
align-self: flex-end;
}
|
View your CI Pipeline Execution ↗ for commit 2b26e73
☁️ Nx Cloud last updated this comment at |
1 participant
Summary
bsNoNoscriptfor sidebar toggle state (indeterminate=auto, checked=show, unchecked=hide):checkedsibling selectors override sidebar visibility when checkbox is toggledshellToggleIdso consumers can add their own toggle labels elsewhereHow it works
[indeterminate])With JS: Angular manages the
stateinput and CSS classes (.show/.hide). The checkbox[checked]and[indeterminate]bindings keep it in sync.Without JS: The built-in hamburger/close labels toggle the checkbox. CSS
input.noscript.shell-toggle:checked ~ .sidebar-rootshows the sidebar on narrow screens.Test plan
setSize()still works🤖 Generated with Claude Code