Add Hamburger Menu for AdminPanel Sidebar on Mobile Devices.

[Pratik2026]

Is your feature request related to a problem? Please describe.

We can't keep the AdminPanel sidebar open on mobile devices due to lack of space. So currently there's no way to access the AdminPanel sidebar on mobile devices.

Describe the solution you'd like

Add a hamburger menu icon (keep the color "yellow", the same as the theme color) to the navbar that will be visible on mobile devices & admin route only. When the hamburger icon is clicked, it should open the AdminPanel sidebar in a side drawer.

Also, make the "BUSIFY" text of the sidebar responsive for tablet screens(currently seems too small).

Describe alternatives you've considered

No response

Developer Help

In order to view the admin page as an "Admin" role, you can make a slight change in "frontend/src/store/ authstore.tsx" file:
At line 25 :
setUser: user => set({ user: { ...user, role: 'admin', } }),

[shounakpatil]

I want to work on this issue, I will create an icon to toggle a sidebar panel using a react component, given the opportunity

[Pratik2026]

@shounakpatil Sure, you can start working on it.

[shounakpatil]

Thank you!

[abhijeetw035]

Assign this issue to me
About the hamburger menu
We can just add a hide property in the media query and add display property back to the hamburger menu when clicked on icon
Formaly i will add button using media query and use hidden and display property to it