Reskin | sidebar

[adamgall]

Updates the left navigation sidebar

• Hug bottom group of icons to bottom of viewport, with some buffer space.
• Center the top group of icons in the empty space between Header and bottom icon group.
• Make sure to give buffer space between two icon groups when viewport is short, and button groups bump up next to each other.
• Give padding between left of viewport and beginning of button groups
• Use new Phosphor icons
• Updated background color for button groups
• Updated border color for button groups
• Updated border radius for button groups
• Nuances in the bottom button group, for the language selector border
• New expanded view of button groups on hover
• Persistent expansion when viewport width > 1600px
• Mobile menu

Some Screenshots:

[netlify]

✅ Deploy Preview for fractal-dev ready!

Name	Link
🔨 Latest commit	48561aa
🔍 Latest deploy log	https://app.netlify.com/sites/fractal-dev/deploys/66312787c2d4ad0008e905db
😎 Deploy Preview	https://deploy-preview-1605.app.dev.fractalframework.xyz
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mudrila]

Have bunch of comments, most of them are minor/optional. Leaving them just assuming there will be more changes and thus - another round of review. So feel free to make changes or ignore them - we can tackle these later for sure

[adamgall]

@DarksightKellar @mudrila I've addressed your comments, and marked this PR ready for review

[mudrila]

Lovely! Have few questions but feel free to ignore them if there's some context behind inability to style things through usual flow

[mudrila]

Can we omit using inline styles? Or it was too complex to get it styled right without inline styling?

[adamgall]

I might need your help with this one... The Link component here is from react-router-dom, not chakra-ui, and so doesn't have any paddingTop etc properties on it. I don't really know how else to add styles to this (I want to literally make the rendered anchor tag bigger) without either doing these inline styles, or defining a CSS class somewhere.

[mudrila]

tag should have display block by default, unless there's some weird global style override. Also, we can avoid using inline styling if we'll use plain Chakra UI link and will pass these styles as props

[adamgall]

Anchor tags seem to not be block by default.

---

style={{ display: 'block', paddingTop: '0.75rem', paddingBottom: '0.75rem' }}

---

style={{ paddingTop: '0.75rem', paddingBottom: '0.75rem' }}

---

And can you help me with whatever it is you're suggesting to not use inline styles? I guess I'm not sure what approach you're suggesting.

[nicolaus-sherrill]

This is looking great!

I was having some weird issues with the component when I first pulled up the deploy preview (cursor glitching, needing to click to expand) but was unable to recreate once I reloaded and left the page open for a bit.

I don't see the hover, pressed, or active states active here yet, captured in this screen shot and recording.

Screen.Recording.2024-04-30.at.9.06.56.AM.mov

[adamgall]

This is looking great!

I was having some weird issues with the component when I first pulled up the deploy preview (cursor glitching, needing to click to expand) but was unable to recreate once I reloaded and left the page open for a bit.

I don't see the hover, pressed, or active states active here yet, captured in this screen shot and recording.

Screen.Recording.2024-04-30.at.9.06.56.AM.mov

@nicolaus-sherrill sorry, where is that figma showing the hover and active states?