search

bsoc-bitbyte / busify

A centralised bus ticket booking system that will allow the students to book tickets in advance through an online website, saving time and effort.
https://busify.vercel.app
30 stars 67 forks source link

Add Hamburger Menu for AdminPanel Sidebar on Mobile Devices. #85

Open Pratik2026 opened 3 weeks ago

Pratik2026 commented 3 weeks ago

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

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 aside 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 commented 3 weeks ago

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 commented 3 weeks ago

@shounakpatil Sure, you can start working on it.

shounakpatil commented 3 weeks ago

Thank you!

abhijeetw035 commented 3 weeks ago

Please Assign this issue to me I Have already downloaded and started project successful 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