Skip to content

Improvements to app shell components#55

Draft
douglaswinter wants to merge 12 commits into
mainfrom
dw/appshellimprovements
Draft

Improvements to app shell components#55
douglaswinter wants to merge 12 commits into
mainfrom
dw/appshellimprovements

Conversation

@douglaswinter

Copy link
Copy Markdown
Collaborator

No description provided.

Comment thread packages/app-shell/src/SideNav.tsx Outdated
component={NavLink as React.ElementType}
to={route.path}
sx={{
borderRadius: 1,

@zoharma zoharma Jun 5, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not working when applied to the ListItemButton. We need to wrap it in a box like so:

<ListItem disablePadding sx={{ mb: 0.5 }}>
  <Box
    sx={{
      width: "100%",
      borderRadius: 2,
      overflow: "hidden",
    }}
  >
    <ListItemButton
        ...
    </ListItemButton>
  </Box>
</ListItem>

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean it is not working? I can definitely see the rounded corners and they change with response with this value. What should the radius be? In your design it says 8 which is spacing of 1. Happy to change it to 2 if it looks better

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, not sure it wasn't sure until I added a box wrapper. But seems fine now.

@douglaswinter
douglaswinter force-pushed the dw/appshellimprovements branch from 3c7e22b to 9eae422 Compare June 8, 2026 13:32
@zoharma

zoharma commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

@douglaswinter I think we could add a spacing of 1 (8px) to the top of the navitems list, or alternatively (better?) to remove some of the shadow (elevation) of the global header

AppBar now has 0 elevation and a bottom border.
Typography and menu button is brand colour
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants