ENG-7443: make DOCS badge responsive #1591
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
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Greptile Summary
This PR improves the responsive behavior of the 'Docs' badge in the navbar component. The change consolidates previously conflicting display logic into a single conditional class_name property and adjusts the responsive breakpoint from extra-large (xl:flex, 1280px+) to large (lg:flex, 1024px+) screens.
The modification replaces separate display and xl:flex hidden class properties with a unified approach using rx.cond. The badge now conditionally shows hidden lg:flex when the user is on docs, ai-builder, or cloud pages, and remains hidden otherwise. This change integrates well with the existing navbar architecture, which already uses conditional rendering based on router state to show/hide various navigation elements.
The implementation leverages Reflex's reactive state system (rx.State.router.page.path) to detect the current page and apply appropriate styling. This fits naturally with the codebase's pattern of using state-driven UI updates, as seen throughout the navbar component where various elements toggle based on application state.
Confidence score: 4/5
- This PR is safe to merge with minimal risk as it only changes CSS classes for responsive behavior
- Score reflects a straightforward styling improvement with clear logic and no breaking changes to functionality
- No files require special attention as the change is isolated to a single styling property
1 file reviewed, no comments
Collaborator
carlosabadia
left a comment
carlosabadia
left a comment
There was a problem hiding this comment.
Lets center the Reflex logo and Docs badge
carlosabadia
approved these changes
Aug 21, 2025
carlosabadia
pushed a commit
that referenced
this pull request
Sep 5, 2025
* make DOCS badge responsive * center logo + badge
Kastier1
added a commit
that referenced
this pull request
Sep 11, 2025
* ENG-7370: Bring back prompt box * updates * fix redirect * add min prompt length * Update Local Component section of Wrapping React (#1584) * Fix the existing broken example due to using JSX syntax in a JS file. * Add more explanation about using rx.asset * Add example of including CSS import * Add important consideration and usecase bullets * update to best practice docs (#1586) * streamlit reflex blog (#1540) * streamlit reflex blog * small fix * add new image --------- Co-authored-by: Tom Gotsman <[email protected]> Co-authored-by: Alek Petuskey <[email protected]> * update cloud hosting (#1588) * ENG-7438: Fix small icons on what is reflex build page (#1590) * ENG-7375: AI builder nav item + bump (#1589) * ENG-7375: AI builder nav item + bump * update * ENG-7443: make DOCS badge responsive (#1591) * make DOCS badge responsive * center logo + badge * move all contact sales links to pricing (#1595) * move all contact sales links to pricing * update * + new templates (#1593) * Update ‘Apps built with Reflex’ stat from 100K+ to 300K+ (#1596) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Alek <[email protected]> * Update affiliate partner booking links to lemcal.com (#1597) - Update both 'Become a Partner' buttons to use https://app.lemcal.com/@alek/reflex-demo?back=1 - Replace old Cal.com form URLs with new lemcal.com booking URL - Maintains existing functionality while updating to new booking system Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Alek <[email protected]> * ENG-7440: update ai docs (+ ENG-7383) (#1592) * update ai docs * more ai-related docs * + ai docs * Update docs/ai_builder/features/code_editor.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Update docs/ai_builder/app_lifecycle/copy_app.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Update docs/ai_builder/app_lifecycle/general.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Update docs/ai_builder/integrations/databricks.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * updates part I * update part II --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * add input types for better use (#1598) * add demo url for AG Grid (#1599) * fix affiliate link (#1602) Co-authored-by: Tom Gotsman <[email protected]> * ENG-7498: Blog (From Jupyter Notebook to Production Dashboard) (#1600) * blog * add thumbnail to blog * remove pro and team tier mentions (#1603) * ENG-7542: new blog + prev. blog image fix (#1604) * new blog + prev. blog image fix * Update blog/2025-09-02-reflex-build.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * use .path for URL --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * update deploy strategy (#1607) * Revert "ENG-7498: Blog (From Jupyter Notebook to Production Dashboard) (#1600)" (#1608) This reverts commit f1ad749. * Revert "ENG-7542: new blog + prev. blog image fix (#1604)" (#1609) This reverts commit 56c1a14. * ENG-7551: add booked page (#1606) * add booked page * second page * updates * add url * ENG-7585: docs patch (+ ENG-7581) (#1611) * refine ai docs * Reflex Build IDE vid * refine interaction mode docs * patches to navbar, sidebar, and others * add link with url * make set sidebar index event temporal --------- Co-authored-by: carlosabadia <[email protected]> * add watch preview button * update video url --------- Co-authored-by: Kastier1 <[email protected]> Co-authored-by: Masen Furer <[email protected]> Co-authored-by: Ahmad Hakim <[email protected]> Co-authored-by: Tom Gotsman <[email protected]> Co-authored-by: Tom Gotsman <[email protected]> Co-authored-by: Alek Petuskey <[email protected]> Co-authored-by: Mohamed Otefi <[email protected]> Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Alek <[email protected]> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.