homarr
homarr copied to clipboard
Add Option to Move Settings & Add Service Buttons to Left Side
Description
It's just unfortunate that the widget categories only fit 2 and a half on the screen. If the Settings & Add Service buttons could be moved to the left with the Name & Logo, then the Categories could shift up and 3 could fit. :)
From this:
To this:
Priority
Low (Nice-to-have)
Please tick the boxes
- [X] You've read the docs
- [X] You've checked for duplicate issues
Oof, this is tougher than I originally expected of just "move elements left/right & up". This would require eliminating the Header, and moving those elements into the Navbar. If I could find the local files in my unraid docker setup I could make changes and test it locally, then add enable/disable & position options.
Oof, this is tougher than I originally expected of just "move elements left/right & up". This would require eliminating the Header, and moving those elements into the Navbar. If I could find the local files in my unraid docker setup I could make changes and test it locally, then add enable/disable & position options.
I mean it's doable but it seems hard. Swapping the position of the buttons to the left and title to the right would be a lot easier.
Currently playing around with similar idea on a local version. Basically built out a Sidebar Module which contains all the items that are in the header bar, see example below.
Will add the option to enable module in the settings drawer and option to hide header. If this is something you want in the project I can open a PR
How do you open the settings if you disable the module then ? 🤣
While this does the job I don't think it's very practical at the moment. But i think that re-locating UI elements could be a good think.
The search bar should stay on the right tho. It doesn't make sense design guidelines - wise to put it on the left
If you disable the the module you scream and panic and try figure out how to turn it back on 🤣 Could add warning or force that that either Header or Module needs to be active
Been honest I'm not the most up to date on UI/UX design guidelines, plus I normally have search disabled :)
If you disable the the module you scream and panic and try figure out how to turn it back on 🤣 Could add warning or force that that either Header or Module needs to be active
Been honest I'm not the most up to date on UI/UX design guidelines, plus I normally have search disabled :)
Search is pretty cool to quickly access services. You should try it out :)
I think a Left / Right switch would be better to indicate the reading direction of the app
Since you created the header widgets as nice standalone components, one way could be to just hide the header if the user wants to have the navbar/aside and render them in there as first items (since they need to be shown somehow anyway).
For mobile experience you could wrap all three of them (header, navbar and aside) in MediaQuery
component to show the header on mobile only and normal behavior on desktop.
For the search on the navbar... mantine ui example have some nice ones with the search in there. doesn't look that bad :D Layout of the card could be something like 3 rows with logo + name, search if enabled and the actions.
Currently don't have much time to try fork and try it out but if I manage to find some I'll try for sure
done in v0.11