Hamburger LR config - #128
Merged
Merged
Conversation
Fix logo overlapping with hamburger icon in mobile view. Allow the button to wrap to preserve the identical positioning of the drawer logo and closed-drawer logo.
Config option to allow left (default) or right positioning. Left _probably_ looks better, but for longer `LOGO_TEXT` content, there are problems. Before last commit, the hamburger overlapped. That's at least fixed, but longer content now wraps, so right-pos of the hamburger helps.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Slight reversion: remove sidebar_logo_clearance. The default left-logo clearance added an ugly gap to the default logo. Add px-3 to ensure longer logos maintain some padding to the sidebar drawer edge (default shadow gets cut off otherwise)
Slight reversion: Hamburger L/R not required in Logo context as the clearance is no longer being set. px-3 to match Header.astro
break-normal was only breaking on whitespace, but if the logo text is too long, wrap-anywhere is required to enforce a break
`LOGO_BODY_OVERRIDE` > `LOGO_POST_OVERRIDE`
While trying to shoehorn in support for varying logo text lengths, improving it by supporting L/R configs for the hamburger menu icon, it only raised more questions on how to uniformly support logo text in different scenarios. The orignal layout only really worked because the demo site/content has a very specific length of name. Anything outside of this needs overrides. It looked nice, and the drawer sliding out and resulting logo being in exactly the same place was appealing, but the price for this was too high. Now: hamburger icon is TR corner. When menu bar/drawer is closed, logo is aligned to left side of the post boxes. When drawer is open, the logo is centred in this menu bar/drawer. Of course, this is only relevant to narrow/mobile widths. Full width, there's no hamburger icon, and the sidebar always shows (logo remains centred here). Phew.
Owner
Author
|
Examples of menu/hamburger icon before. Menu closed: |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Config option to allow left (default) or right positioning of hamburger icon. Left probably looks better, but for longerLOGO_TEXTcontent, there were problems.The hamburger overlapped with logo. First commit fixes that, with the fallback of making longer content wrap.Right-positioning the icon gives more content space while avoiding wrapping.U-Turn Complete!
While trying to shoehorn in support for varying logo text lengths, improving it by supporting L/R configs for the hamburger menu icon, it only raised more questions on how to uniformly support logo text in different scenarios.
The orignal layout only really worked because the demo site/content has a very specific length of name. Anything outside of this needs overrides.
It looked nice, and the drawer sliding out and resulting logo being in exactly the same place was appealing, but the price for this was too high.
Now: hamburger icon is TR corner. When menu bar/drawer is closed, logo is aligned to left side of the post boxes. When drawer is open, the logo is centred in this menu bar/drawer.
Of course, this is only relevant to narrow/mobile widths. Full width, there's no hamburger icon, and the sidebar always shows (logo remains centred here).
Phew.