KI-8 Navbar Component

[pbandjs1]

Developer: Nick Endresen

Closes #

Pull Request Summary

Create a Navbar header that has buttons that link to /home, /dashboard, and /profile, plus a button to sign out.

Modifications

Modified Navbar component and created page.tsx's for home and dashboard -- not profile.

Testing Considerations

Reviewer should verify the project runs cleanly in their development.

Pull Request Checklist

• Code is neat, readable, and works
• Comments are appropriate
• The commit messages follows our guidelines
• The developer name is specified
• The summary is completed
• Assign reviewers

Screenshots/Screencast

[kaseyliu]

Note (mostly for myself): you mentioned during standup but waiting on changing this to using Chakra UI components

[pbandjs1]

I contacted Emi about it and she said not to worry about styling with Chakra UI components.

Also decided it would be a hassle with installing the chakra ui components library, but if you want me to replace w chakra components, and youre fine w me editing package-lock, etc. I can do it.

[pbandjs1]

I'll make sure to get you in the loop next time or leave a note in the PR.

[pbandjs1]

Replaced all components in Navbar with Chakra-UI components. Setting up and installing Chakra-UI involved editing package.json, package-lock.json, and layout.tsx, alongside creating ui components color-mode.tsx, provider.tsx, toaster.tsx, tooltip.tsx, which are code snippets created when setting up an app with a next app framework. Also, Chakra components require a ChakraProvider and ThemeProvider, so these snippets make it easier to just have one "Provider". Toaster creates little "toasts" like the ones in the photo linked. Tooltip allows for tooltips. Both are cool snipppets and may be useful at some point.

[pbandjs1]

Update on what the page looks like now:

[kaseyliu]

This looks great! Do you think you could change the Chakra stuff to just import it-- you shouldn't need to create components to put the code. I just added the Chakra provider. Sorry for not doing it sooner. I merged develop into your branch, and I think you should be able to just import the components from Chakra (I put an example button on the home page).

[pbandjs1]

Chakra components in Navbar are already being used as described, to my knowledge. The components from Chakra setup, that appear when installing certain dependencies for the Chakra provider, have been removed.

Please let me know if I'm misunderstanding something.

[kaseyliu]

Looks great! I don't have any errors with the build on my end.