From a0cb77c0916894598e5191d1f78c85306f8909c8 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Sun, 12 Mar 2023 19:44:50 +0000
Subject: [PATCH] Added navProvider component and stylings
---
.../src/components/navigation/NavProvider.tsx | 36 +++++++++++++++++
.../src/styles/NavigationProvider.module.css | 40 +++++++++++++++++++
2 files changed, 76 insertions(+)
create mode 100644 daily-thought-frontend/src/components/navigation/NavProvider.tsx
create mode 100644 daily-thought-frontend/src/styles/NavigationProvider.module.css
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 00000000..914e1fe5
--- /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 00000000..1abaf629
--- /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
--
GitLab