Feat: Adding Menu Bar Instead of Hamburger Menu

[Ayushmaanagarwal1211]

Describe the feature

I've noticed that our HelpOps-Hub website is not fully optimized for mobile view. The current navbar layout can be challenging to navigate on smaller screens. To improve user experience, I propose redesigning the mobile navbar by adding all navigation links to a stylish menu bar at the bottom of the screen.

✅ @sanjay-kv sir, this time there is no spam.

@sanjay-kv sir, please don't say that I am raising the same responsive issue again and again and creating PR for GSSOC points. This time it is completely different. Please check it yourself. This time I worked on genuine .

Issue Details:

• 🖥️ Current State: The website's navbar is difficult to use on mobile devices, affecting overall usability.
• 📱 Proposed Solution: Implement a new menu bar at the bottom of the mobile view, containing all navigation links in a sleek and appealing style.

Benefits:

• 🌟 Improved Usability: Enhances the ease of navigation for mobile users, making the site more user-friendly.
• 📈 Increased Engagement: A better mobile experience can lead to higher user engagement and satisfaction.
• 🎨 Modern Design: A stylish bottom menu bar will give the website a contemporary look, aligning with modern web design trends.

Add Screenshot

[!NOTE] It is just a design after implementation it looks also good and attractive.

I would be happy to work on this enhancement to ensure the HelpOps-Hub website offers an excellent experience for all users, regardless of the device they are using.

Looking forward to your feedback and the opportunity to contribute! 😊

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I'm a GSSOC'24 contributor
• [ ] I'm a VSoC'24 contributor
• [X] I want to work on this issue

[github-actions[bot]]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[mdazfar2]

@Ayushmaanagarwal1211, yes, that level of responsiveness is exactly what we're looking for. Can you try applying it to all pages except the "contributor" page?

[Ayushmaanagarwal1211]

Yes i can

[shreyash3087]

@Ayushmaanagarwal1211 if possible try to follow BEM naming convention as it would be better for readability and functionality,you can learn about it form here-https://www.geeksforgeeks.org/understanding-the-css-bem-convention/ ,@mdzafar what do you say?

[mdazfar2]

@Ayushmaanagarwal1211 if possible try to follow BEM naming convention as it would be better for readability and functionality,you can learn about it form here-https://getbem.com/naming/ ,@mdzafar what do you say?

@shreyash3087 It would be great if you could send some layout, example, or screenshot you used before with the BEM convention. This will give us an idea of how it works.

[shreyash3087]

This is a good example,here card is a block,and its child component has been given name as cardcontent or cardtitle this is called block__element naming and this is helpful because normally people write like this

<div class="card">
   <div class="title">
   </div>
</div>

yaha pe sirf title likhne ki vajah se if we use the class title in another block so that will have effects form this class but if we write card__title so it will just limit this class to this block only aur iske styling ka effect dusre blocks pe nhi jayega

hope you understand

[shreyash3087]

@mdazfar2 and after this we have modifiers that is used to define variations of a element like ek button hai inside card block so you will give it a name as card__button--primary because a button can have various types like primary,secondary etc

Overall it makes the code much better

[mdazfar2]

Thank you, @shreyash3087 will implement this.

[mdazfar2]

issue solved

[github-actions[bot]]

Hello @Ayushmaanagarwal1211! Your issue #562 has been closed. Thank you for your contribution!