@/academyafrica Global Navigation

[damolaoladipo]

Implement Global Navbar

Description

As a learner, I want a clear and intuitive global navigation menu so that I can easily navigate through the different sections of academyAFRICA.

Acceptance Criteria

• The global navigation menu is prominently displayed at the top of each page for easy access..
• It includes links to essential sections such as Home, Courses, Events, Blog, About Us, FAQs etc.
• After login, It should show the user is logged in and show essential Home, Courses, Learning Paths, Events, Blog, About Us, User Profile etc.
• The navigation menu is responsive and adapts well to various screen sizes.
• The navigation menu should be responsive and adapt to different screen sizes and devices, including desktops, tablets, and mobile phones.
• Menu labels and items should use clear and concise wording that reflects the content or section they represent.
• To include a search bar within the global navigation that allows users to search for courses, events, etc.
• The navigation should provide easy access to the user's profile, including options to view and edit their profile information, settings, and preferences.
• Include a direct link or dropdown option to access the course catalogue or list of available courses.
• Provide a link or menu item to the user's dashboard, where they can track their progress, view enrolled courses, and access other personalised information.
• AcademyAFRICA supports multiple languages, provide a language switcher in the navigation menu to allow users to select their preferred language..
• Implement breadcrumb navigation in the global navigation to help users understand their current location within the site hierarchy.
• Include a logout option or link within the navigation menu for users who wish to log out of their accounts.

Figma Design

NavBar in Desktop

NavBar in Hover State - Desktop

NavBar in mobile:

NavBar in Hover State - Mobile: