Redesigning navigation sidebar
I am trying to design navigation bar but I feel like something is missing or wrongly placed.
I wanted to do login with google / link to profile after login and logout in the blue colored spot where I marked on the image.
I wanted to do switch from dark to light mode in the red colored spot where I marked on the image.
I am very happy with the active link design. The navigation bar only shows icons as you see in the first image and when hovered it expands to the 12.5rem (200px)
I may also want to add like a lock functionality to lock the navigation bar if the user wants to but I am not very sure if I will allow it to change it in the settings or I will add lock icon inside navigation bar.
Looking forwards to your feedbacks. Thank you very much.
3 Replies
@Psyzen You can use this as a reference: https://getbootstrap.com/docs/5.0/examples/sidebars/#
Just a tip:
Actions like logout are usually placed at the bottom of the sidebar for less effort or in the navigation area (based on layout / design). You do not need lock functionality as expanding or shrinking the sidebar may depend on the user preference. You should never mess with that.
Thank you for a tip. By sayng to not mess with navigation side bar width expanding and shrinking you mean to not mess with navigation width on hover ?
Instead of hover I would say make a button and on click of the button toggle the width of the sidebar
Mouse cursor can accidentally hover over the sidebar and cause the width to expand and shrink which is annoying. Leave the state of the sidebar to user's preference