super admin side bar component

[wale2009]

Description

This pull request introduces a new component, SuperAdminSideNavBar.tsx, which implements a functional side navigation bar for Super Admin users. The navbar includes:

• Necessary icons for navigation elements.
• A function to navigate to the Settings page from the navbar.
• Links for various functionalities accessible through button clicks.

**Closes #52 **

Changes proposed

What were you told to do?

Super Admin Side Bar Component

1. UI Components:

• Use ShadCN UI components for consistency.
• Ensure components match the design specifications provided.

2. Design Specifications:

• Refer to the provided design for dimensions, colors, and layout.
• Include all navigation tabs as designed Dashboard, Products, Users, Email Template, Squeeze pages, Waitlist Pages, Settings

3. Functionality:

• Make sure all navigation tabs route to their specified pages

4. Accessibility:

• Ensure all components are accessible and follow best practices for ARIA roles and attributes.

What did you do?

• New Component: I created a new file named app/component/SuperAdminSideNavBar.tsx which contains the code for the side navigation bar component.

• Functionality: I designed the navbar with relevant icons for easy identification of navigation options. I implemented a function that allows Super Admins to navigate to a dedicated Settings page directly from the navbar. I created links for various functionalities within the navbar. These links are likely tied to buttons or menu items that, when clicked, trigger specific actions within the application.

• Integration: Modified the app/component/root.tsx file to integrate the newly created SuperAdminSideNavBar.tsx component. This likely involves adding the component to the application's layout or structure.

• Dependency: I also updated the app/component/ui/accordion.tsx file to utilize an Accordion component from a dependency named Shandcn/ui. This suggests you might be using an accordion element within the side navbar for collapsible sections or menus.

Figma Link:
https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2179-42622&m=dev

Check List (Check all the applicable boxes)

🚨Please review the contribution guideline for this repository.

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.
• I am making a pull request against the dev branch (left side).
• My commit messages styles matches our requested structure.
• My code additions will fail neither code linting checks nor unit test.
• I am only making changes to files I was requested to.

Screenshots/Videos

[chumex412]

Please ensure to move any mapped array to a folder under app eg app/data/navigation.ts