fix: Adjust sidebar logo and item highlighting for desktop #104
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
This commit addresses your feedback regarding the main sidebar's appearance on desktop devices and reverts the logo to a more 'usual' style.
Key changes:
1. **Logo Reversion (`Logo.jsx`):**
* Removed specific styling (shadow, border, explicit padding, w-full) from the `Logo.jsx` component.
* Increased image height to `h-14` and text size to `text-2xl` to be closer to its previous appearance.
* The logo component is now more neutrally styled, relying on its parent container for presentation.
2. **Sidebar Logo Container (`Sidebar.jsx`):**
* Added `p-4` for spacing to the sticky `div` wrapping the `Logo` component.
* Applied the sidebar's gradient background to this container and used negative horizontal margins (`-mx-3`) to ensure the logo section's background is full-bleed against the `ul`'s new padding, maintaining visual consistency.
3. **Sidebar Item Highlighting Fix (`Sidebar.jsx`):**
* Removed `md:ml-10` from the main `ul` within `SidebarContent`.
* Added `px-3` to the `ul` for consistent internal horizontal padding.
* Removed horizontal padding from the scrollable `div` (it now defers to `ul`'s padding).
* Removed `mr-4` from the logout button's container.
* These changes ensure that `w-full` list items (and their active/hover backgrounds) are correctly contained within the sidebar's padded width on desktop screens, resolving the issue where backgrounds were previously too wide.
The smartphone responsiveness remains unaffected and should continue to work well.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for glittering-fox-ced801 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Here's the code health analysis summary for commits Analysis Summary
|
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.
This commit addresses your feedback regarding the main sidebar's appearance on desktop devices and reverts the logo to a more 'usual' style.
Key changes:
Logo Reversion (
Logo.jsx):Logo.jsxcomponent.h-14and text size totext-2xlto be closer to its previous appearance.Sidebar Logo Container (
Sidebar.jsx):p-4for spacing to the stickydivwrapping theLogocomponent.-mx-3) to ensure the logo section's background is full-bleed against theul's new padding, maintaining visual consistency.Sidebar Item Highlighting Fix (
Sidebar.jsx):md:ml-10from the mainulwithinSidebarContent.px-3to theulfor consistent internal horizontal padding.div(it now defers toul's padding).mr-4from the logout button's container.w-fulllist items (and their active/hover backgrounds) are correctly contained within the sidebar's padded width on desktop screens, resolving the issue where backgrounds were previously too wide.The smartphone responsiveness remains unaffected and should continue to work well.