diff --git a/daily-thought-frontend/src/components/navigation/NavProvider.tsx b/daily-thought-frontend/src/components/navigation/NavProvider.tsx new file mode 100644 index 0000000000000000000000000000000000000000..914e1fe53639818dc59add144806527f1fa262cb --- /dev/null +++ b/daily-thought-frontend/src/components/navigation/NavProvider.tsx @@ -0,0 +1,36 @@ +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 diff --git a/daily-thought-frontend/src/styles/NavigationProvider.module.css b/daily-thought-frontend/src/styles/NavigationProvider.module.css new file mode 100644 index 0000000000000000000000000000000000000000..1abaf629641837ec3d4791ecd5e72eea340a1429 --- /dev/null +++ b/daily-thought-frontend/src/styles/NavigationProvider.module.css @@ -0,0 +1,40 @@ +.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