Design: Create designs for the Navigation component

[Rishika-S-V]

Fixes #32

Description

The Navigation Component is a crucial element of the application's user interface that facilitates seamless navigation and enhances the overall user experience. It encompasses various interactive elements such as the Navbar, Megamenu, Sidebar, and Breadcrumbs, which work together to provide users with intuitive and efficient ways to navigate through different sections and features of the application.

Motivation

The motivation behind these updates is to address usability concerns and provide users with a more streamlined and intuitive navigation experience. The previous navigation components had limitations in terms of visual clarity, functionality, and responsiveness. By refining the Navbar, Megamenu, and Sidebar, and introducing Breadcrumbs, we aim to enhance user satisfaction, improve navigation efficiency, and promote a cohesive user experience.

Changes Made

• The design of the Navbar for a more polished and modern appearance.
• Refined the Megamenu to improve category organization, labelling, and visuals.
• Enhanced the Sidebar for better usability, accessibility, and content organization.
• Added Breadcrumbs as a new navigation element to provide contextual navigation options.

Checklist

• [x] Code follows the project's style guidelines.
• [x] Tests have been added or updated to cover the changes.
• [ ] Documentation has been updated, if applicable. Mark ☑️ in the component section of the readme.Md file.
• [x] All new and existing tests pass.
• [ ] The code has been reviewed by at least one other developer.
• [x] The pull request is linked to the corresponding issue, if applicable.

Screenshots

Navigation

The Navbar has undergone refinements to improve its visual appeal and functionality. The design changes include adjusting the alignment and spacing of navigation links, enhancing the responsiveness for different screen sizes, and optimizing the overall layout. These updates provide a more polished and modern Navbar that aligns with the application's visual language.

Navigation - Light Mode

Navigation - Dark Mode

Megamenu

The Megamenu has been enhanced to offer a more intuitive and user-friendly dropdown experience. It now includes improved category organization, clearer labelling, and enhanced visuals. The updated Megamenu allows users to quickly find and access relevant subcategories and information, improving the overall navigation experience.

Megamenu - Light Mode

Megamenu - Dark Mode

Breadcrumbs

Breadcrumbs have been added as a new navigation element to provide users with a clear path and context within the application's hierarchy. Breadcrumbs help users understand their current location and provide quick navigation options to higher-level pages or sections.

Breadcrumbs - Light Mode

Breadcrumbs - Dark Mode

Sidebar

The Sidebar is to improve its usability and accessibility. The design includes clearer icons and labels, improved hierarchy, and a collapsible/expandable feature for better content organization. These changes make it easier for users to navigate through different sections of the application and access specific features or pages.

Sidebar - Light Mode

Sidebar - Dark Mode

[Lovelyfin00]

Hey @Rishika-S-V Can you close this and open a new PR against the dev branch

[Rishika-S-V]

@Lovelyfin00 base has been changed to dev branch

[Lovelyfin00]

Great I'll merge after checking it on my local machine

[Lovelyfin00]

LGTM