Refactor sidebar #6971
Refactor sidebar #6971
Conversation
|
estrattonbailey
force-pushed
the
new-sidebar
branch
from
96bb02a to
2478996
Compare
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
| @@ -34,7 +34,7 @@ export function Outer({ | |||
| noBottomBorder?: boolean | |||
| }) { | |||
| const t = useTheme() | |||
| const gutter = useGutterStyles() | |||
| const gutters = useGutters([0, 'base']) | |||
There was a problem hiding this comment.
No change here from previous styles
| @@ -41,14 +41,14 @@ function HomeHeaderLayoutDesktopAndTablet({ | |||
| const {hasSession} = useSession() | |||
| const {_} = useLingui() | |||
| const kawaii = useKawaiiMode() | |||
| const gutter = useGutterStyles() | |||
| const gutters = useGutters([0, 'base']) | |||
There was a problem hiding this comment.
No change here from previous styles
|
|
|
@Tanza3D I think you may be looking at an old version here. It's missing a link at the bottom for "More feeds" and the spacing around the sidebar is now wider on the left than on top, whereas here it looks event. Or are you only referring to the line-height between the links? |
mainly referring to the line height/padding between the feed links/buttons yeah; I feel they'd be better displayed as tabs similar to discords channel lists and such perhaps |
estrattonbailey
force-pushed
the
new-sidebar
branch
from
49e52d3 to
c5e54e1
Compare
There was a problem hiding this comment.
thanks! a few things that jumped out to me that seem like regressions:
- pressing on a feed has gotten much slower in this PR, something regressed there
- feed link staying underlined after navigation click feels weird to me, not sure why it does that
- something's wrong with the top bar, the butterfly and the # icon lost top padding
these are maybe more subjective:
- not sure about more narrow input, it's very noticeable how usernames rarely fit and display names don't fit more often too. i would suggest that if we were to narrow it, we should also turn the dropdown into an actual dropdown (and give more width to the list)
- not a fan of "external link" icon on more feeds, it looks like a link to another site
- overall they feel a bit too crowded to me, this is secondary navigation but they're very close to each other and easy to misclick. i'd prefer if there was a bit more space there
lmk if you disagree with some of these
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
arcalinea
temporarily deployed
to
new-sidebar - social-app PR #6971
Render
Destroyed
| <Trans> | ||
| Logo by{' '} | ||
| <InlineLinkText | ||
| label={_(msg`Logo by @sawaratsuki.bsky.social`)} |
There was a problem hiding this comment.
Should we translate @sawaratsuki.bsky.social? If not, what about using a placeholder instead of that username?
There was a problem hiding this comment.
Yeah there’s also already “logo by” around it, I think we can just remove the repetition to what it was before.
* Refactor RightNav (cherry picked from commit 96bb02a) * Better gutter handling * Clean up styles * Memoize breakpoints * Format * Comment * Loosen spacing, handle overflow, smaller text to match prod * Fix circular imports on native * Return 0 instead of undefined for easier calculations * Re-assign * Fix * Port over fix from subs/base * Space out right nav feeds, widen sidebar to match prod * Fix lost padding on home header * Fix perf by not actually linking to new URL * Remove underline on focus * Foramt --------- Co-authored-by: Dan Abramov <[email protected]>
Extracted from subs branch. This cleans up the right nav to look better and fit incoming NUXs better. Looks especially better on the search page.
In the process, I made an improvement to the new
useGuttershook so it's more ergonomic.(illustrating overflow with lots of feeds, works fine)