Added navProvider component and stylings

daily-thought-frontend/src/components/navigation/NavProvider.tsx

+import { Children, FC, PropsWithChildren, useState } from "react";
+import styles from '../../styles/NavigationProvider.module.css'
+import Avatar from "../profile/avatar";
+import { RxHamburgerMenu } from "react-icons/rx"
+
+type NavProviderProps = {
+}
+
+const NavigationProvider: FC<PropsWithChildren<NavProviderProps>> = ({
+  children,
+}) => {
+  const [navState, setNavState] = useState<boolean>(false);
+
+  let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
+
+  let user = {FirstName: "John", LastName: "Smith", Username: "JohnSmith", Avatar: null, Colors: [colors[0], colors[1]]}
+
+
+  return (
+    <div className={styles.navProvider}>
+      <div className={styles.nav} style={{width: navState? "300px" : "72px"}}>
+        <div className={styles.navColapsed}>
+          <button className={styles.navButton} onClick={() => setNavState(!navState)}><RxHamburgerMenu size={"32px"}/></button>
+          <div className={styles.navAvatar}>
+            <Avatar User={user}/>
+          </div>
+        </div>
+      </div>
+      <div className={styles.content}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default NavigationProvider;
\ No newline at end of file

daily-thought-frontend/src/styles/NavigationProvider.module.css

+.navProvider {
+  display: flex;
+  height: 100vh;
+}
+
+.nav {
+  transition: 0.2s;
+  border-radius: 24px;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  padding-top: 16px;
+}
+
+.navColapsed{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 56px;
+
+}
+
+
+
+.navButton{
+  background: none;
+  border: none;
+}
+
+.navAvatar{
+  display: flex;
+  width: 100%;
+  margin-top: 64px;
+}
+
+.content {
+  flex-grow: 1;
+}
\ No newline at end of file