Dynamic NavBar With React
his NavBar component is a responsive navigation bar that toggles visibility based on user scroll behavior and interaction with a menu button. It includes features like:
Hide on Scroll: The navigation bar hides when the user scrolls down and reappears when scrolling up. Menu Toggle: A menu button (IoMenu/AiOutlineClose) toggles the visibility of the navigation links, switching between a compact and expanded menu state. Overflow Control: When the menu is open, the body overflow is set to 'hidden' to prevent background scrolling. Active Link Styling: The navigation links highlight the active page based on the current URL. Language Switcher: A language switcher is included for multi-language support. This component is designed to be mobile-friendly and responsive, with a collapsible menu for smaller screens.