homarr icon indicating copy to clipboard operation
homarr copied to clipboard

Add Option to Move Settings & Add Service Buttons to Left Side

Open Budlyte opened this issue 2 years ago • 6 comments

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: image

To this: image

Priority

Low (Nice-to-have)

Please tick the boxes

Budlyte avatar Jul 22 '22 00:07 Budlyte

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.

Budlyte avatar Jul 25 '22 14:07 Budlyte

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.

ajnart avatar Jul 25 '22 16:07 ajnart

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

image

Derek-OBrien avatar Sep 05 '22 19:09 Derek-OBrien

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

ajnart avatar Sep 05 '22 19:09 ajnart

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 :)

Derek-OBrien avatar Sep 05 '22 20:09 Derek-OBrien

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

ajnart avatar Sep 05 '22 20:09 ajnart

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

dinghino avatar Jan 03 '23 10:01 dinghino

done in v0.11

ajnart avatar Jan 18 '23 11:01 ajnart