feat: Add navigation bar #2490
feat: Add navigation bar #2490
Conversation
|
Here's the code health analysis summary for commits Analysis Summary
|
|
Hey @StancuFlorin |
Hi @Meierschlumpf - any news? |
|
Sorry @StancuFlorin for out late reply on this... We're finishing up the discussion. You'll hear from us until Friday. Thank you for your understanding and sorry for the inconvenience |
|
Okay we are still in dicussion. Our idea would be to move the search bar to the end and to use a burger icon for smaller screens. Regarding the handling of marking a board as shown in the navbar we would suggest to restrict changing of this to the users with permission
As said we haven't finally decided yet and I'll let you know once we have. |
|
@Meierschlumpf - I think I did the requested changes
settings page for a user that is not admin mobile view |
|
Thanks, I'll take a look in one of the coming days |
| const pathname = usePathname(); | ||
|
|
||
| // Filter boards that should be shown in navigation | ||
| const navigationBoards = boards.filter((board) => board.showInNavigation); |
There was a problem hiding this comment.
Create a new route that returns only those from the navigation bar
There was a problem hiding this comment.
Also I would suggest, that we fetch this data on the server and pass it down to this component, then it does not need to make a roundtrip. THen we define it as initialData so we still can invalidate the values when adding one
There was a problem hiding this comment.
We need mobile support (Burger Icon or similar)
| <Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap"> | ||
| <DesktopSearchInput /> |
There was a problem hiding this comment.
The goal was to still have the search input at the same position when no navigation items are selected
| return ( | ||
| <Group gap="xs" wrap="nowrap" style={{ overflow: 'auto', maxWidth: '100%' }}> | ||
| {navigationBoards.map((board) => { | ||
| const boardUrl = `/boards/${board.name}`; | ||
| const isActive = pathname === boardUrl; | ||
|
|
||
| return ( | ||
| <NavLink | ||
| key={board.id} | ||
| component={Link} | ||
| href={boardUrl} | ||
| label={board.name} | ||
| active={isActive} | ||
| variant="subtle" | ||
| style={{ | ||
| borderRadius: 5, | ||
| padding: '0 10px', | ||
| }} | ||
| /> | ||
| ); | ||
| })} | ||
| </Group> | ||
| ); |
There was a problem hiding this comment.
We currently don't handle the overflow of them, so if you add to many links or you shrink your screen it looks not good
There was a problem hiding this comment.
Also invalidate the query when updating the behaviour (onSettled of the savePartialSettings
|
Also I would suggest, that we make the search bar no longer static in it's width and rather let it shrink if necessary to about 100px |
|
Hi @Meierschlumpf - I am not using Homarr anymore, and at the moment, I’m lacking the motivation to implement the requested changes. If anyone else finds this feature useful, feel free to take over the PR. |
|
Hey @StancuFlorin |
Homarr
Overview
This PR adds a navigation bar feature to Homarr that displays between the board logo and search bar. It allows users to quickly navigate between boards that have been configured to appear in the navigation.
Changes
showInNavigationfield to board schema in both SQLite and MySQL databasesScreenshots
Related Issues
#2120 (comment)
#1994