Design and Implement Navigation Bar

[zohaibshahzadkhan]

Description: As a user, I should be able to navigate through different parts of the application using a navigation bar, so that I can access various features easily from any page. (Epic: https://github.com/zohaibshahzadkhan/SocialVibe-React-App/issues/21)

Acceptance Criteria:

Navigation Bar Structure:

• The navigation bar should be placed at the top of the page and be visible on all pages.

It should contain the following sections:

• Logo/Brand Name: A clickable logo or brand name that redirects to the home or feed page.
• Navigation Links: Links to important sections like Feed and Search, visible only to authenticated users.
• User Actions: Links to Log in and Sign up for unauthenticated users, and user profile avatar for authenticated users.

Conditional Rendering:

• Show the Feed and Search links only if the user is authenticated.
• Show the Log in and Sign up buttons if the user is not authenticated.
• Show the user’s avatar, which links to their profile page, if the user is authenticated.

User Interaction:

• Clicking the logo or brand name should redirect to the home or feed page.
• Clicking on the Feed link should redirect to the feed page.
• Clicking on the Search link should redirect to the search page.
• Clicking on the user’s avatar should redirect to the user’s profile page.
• Clicking the Log in button should redirect to the login page.
• Clicking the Sign up button should redirect to the signup page.