feat: vertical navbar #1120
feat: vertical navbar #1120
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| > | ||
| {children} | ||
| </WidgetContainer> | ||
| {!isLearnPage && !hasTheme ? ( |
There was a problem hiding this comment.
we might want to change the location of the navbar component to the widget to avoid these booleans. What do you think @oktapodia ?
There was a problem hiding this comment.
we can technically do it, although widget component will not be a single responsibility component then which is usually good
There was a problem hiding this comment.
Let's think about it later please because I am already changing a lot of structure in a PR soon, would love to avoid more conflicts than we will have
| @@ -17,7 +17,7 @@ export const WidgetContainer = styled(Box, { | |||
| display: 'flex', | |||
| margin: '0 auto 24px', | |||
| overflow: !welcomeScreenClosed ? 'hidden' : 'inherit', | |||
| width: '100%', | |||
| width: 'auto', | |||
There was a problem hiding this comment.
why do you have to put back to 'auto'? It make some themes bug.
There was a problem hiding this comment.
so i have put the navbar next to the widget (wrapped together within <Stack> component) and when widget takes 100% width, then the navbar is being pushed out of the screen. If widget has to have 100% of the width, then the navbar has to be positioned absolute i guess
| <Stack direction="row" spacing={2}> | ||
| <WalletMenuButton id="wallet-digest-button" onClick={handleXPClick}> | ||
| <Image | ||
| src={`https://effigy.im/a/${account?.address ?? 'jumper.eth'}.png`} | ||
| alt="Effigy Wallet Icon" | ||
| width={28} | ||
| height={28} | ||
| priority={false} | ||
| unoptimized={true} | ||
| style={{ | ||
| borderRadius: '100%', | ||
| borderStyle: 'solid', | ||
| borderWidth: '2px', | ||
| borderColor: | ||
| theme.palette.mode === 'light' | ||
| ? theme.palette.white.main | ||
| : alpha(theme.palette.white.main, 0.08), | ||
| }} | ||
| /> | ||
| {points === undefined ? ( | ||
| <Skeleton | ||
| variant="text" | ||
| sx={{ | ||
| fontSize: { xs: 24, sm: 24 }, | ||
| minWidth: 25, | ||
| marginRight: 1.1, | ||
| marginLeft: 1.1, | ||
| }} | ||
| /> | ||
| </WalletMgmtBadge> | ||
| ) : null} | ||
| <Typography | ||
| variant={'lifiBodyMediumStrong'} | ||
| width={'auto'} | ||
| marginRight={0.25} | ||
| marginLeft={0.75} | ||
| ) : ( | ||
| <Typography | ||
| variant={'lifiBodyMediumStrong'} | ||
| width={'auto'} | ||
| marginRight={1.1} | ||
| marginLeft={1} | ||
| > | ||
| {points} | ||
| </Typography> | ||
| )} | ||
| <XPIcon size={28} /> | ||
| </WalletMenuButton> |
There was a problem hiding this comment.
Maybe this whole section could become it´s own styled-component?
There was a problem hiding this comment.
we can do it, but then i would create it's own styled-component for connected button as well; @tcheee what is your take here
Ticket:
https://lifi.atlassian.net/browse/LF-8831?atlOrigin=eyJpIjoiMzNiZDVkMmNhYjI5NDViNjkzYjUxNGQ1MGVlODQ0NzIiLCJwIjoiaiJ9
Description: