Burger Menu for Mobile and Tablet Devices

[Alexandrbig1]

Description: The mobile and tablet versions of the navigation menu need to be implemented as a responsive, sliding sidebar (burger menu). The menu should be fixed, occupying the full height of the viewport, and include anchor links to navigate to specific sections of the page.

Requirements:

1. Navigation Menu:

   • On mobile and tablet devices, the navigation menu should appear as a sliding sidebar (burger menu) when toggled.
   • The menu should be fixed, meaning it remains visible even while scrolling.
   • The height of the menu must adjust dynamically to match the viewport height (100vh).
   • Anchor links in the menu should smoothly scroll to the corresponding sections of the page (e.g., "Home," "About," "Best pumpkins," "Top sellers").

2. Social Media Links:

   • Social media links should be structured as a list (<ul>), with each list item containing an <a> tag that opens the corresponding social media site in a new tab.
   • Use SVG icons for each social media platform (e.g., GitHub, YouTube, Twitter). Ensure these icons are well-aligned and visually consistent.
   • The social media links should be placed in the burger menu below the main navigation links.

Additional Considerations:

• Ensure the burger menu has smooth opening/closing animations for better user experience.
• The toggle button for the burger menu should be intuitive, typically represented by a three-bar (hamburger) icon.
• Test the implementation on various screen sizes to ensure responsiveness and proper functionality on mobile and tablet devices.

[19purva]

@Alexandrbig1 can you describe me issue ?

[Alexandrbig1]

Yes, of course. I hope you checked the Figma layout: https://www.figma.com/design/6keWgZp7kRbn3CLMt3rWqp/Midwest-Pumpkins?node-id=0-1&t=kqGSD5fWaT5tQLTc-1

There you will find a mobile and tablet devices that need to have a burger menu. means that @media(max-width: 1440) the burger icon must be visible, and the nav links is hidden. Once you click on a Burger Menu icon the menu overlay must be transition smoothly from side with visible content on it.

[19purva]

@Alexandrbig1 can you assign me this issue to me?

[Alexandrbig1]

Yes, of course! But please, to participate on Hacktoberfest2024 start creating pull requests after 1st of October.

[Alexandrbig1]

And also I will add description now for this task

[Alexandrbig1]

Also when you'll create an pull request, add descriptive commit and label 'hacktoberfest-accepted'

[Alexandrbig1]

@19purva all description is added