From 7d19dcf1be67a81cb0175fcada8093b9a975ff69 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Mon, 13 Mar 2023 00:27:21 +0000
Subject: [PATCH] Added mavMenu
---
.../src/components/navigation/NavProvider.tsx | 22 ++++++--
.../src/styles/NavigationProvider.module.css | 55 ++++++++++++++-----
2 files changed, 56 insertions(+), 21 deletions(-)
diff --git a/daily-thought-frontend/src/components/navigation/NavProvider.tsx b/daily-thought-frontend/src/components/navigation/NavProvider.tsx
index 914e1fe5..c4d78c6b 100644
--- a/daily-thought-frontend/src/components/navigation/NavProvider.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavProvider.tsx
@@ -1,15 +1,18 @@
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"
+import NavMenuItem from "./NavMenuItem";
+import { AiOutlineUser } from 'react-icons/ai'
+
type NavProviderProps = {
+ navState: boolean
}
const NavigationProvider: FC<PropsWithChildren<NavProviderProps>> = ({
children,
+ navState
}) => {
- const [navState, setNavState] = useState<boolean>(false);
let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
@@ -18,11 +21,18 @@ const NavigationProvider: FC<PropsWithChildren<NavProviderProps>> = ({
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.nav} style={{width: navState? "300px" : "0px"}}>
+ <div className={styles.navContent}>
<div className={styles.navAvatar}>
- <Avatar User={user}/>
+ <Avatar User={user} ShowInitial/>
+ </div>
+ <div className={styles.userInfo}>
+ <p className={styles.name}>{user.FirstName} {user.LastName}</p>
+ <p className={styles.username}>{`@${user.Username}`}</p>
+ <p className={styles.friends}><span className={styles.friendsValue}>{`283`}</span> Friends</p>
+ </div>
+ <div className={styles.menuItems}>
+ <NavMenuItem label="Profile" icon={<AiOutlineUser size={20}/>}/>
</div>
</div>
</div>
diff --git a/daily-thought-frontend/src/styles/NavigationProvider.module.css b/daily-thought-frontend/src/styles/NavigationProvider.module.css
index 1abaf629..0beff025 100644
--- a/daily-thought-frontend/src/styles/NavigationProvider.module.css
+++ b/daily-thought-frontend/src/styles/NavigationProvider.module.css
@@ -1,40 +1,65 @@
.navProvider {
display: flex;
height: 100vh;
+ box-sizing: border-box;
}
.nav {
transition: 0.2s;
border-radius: 24px;
- box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
display: flex;
flex-direction: column;
- padding: 8px;
- padding-top: 16px;
+
+ box-sizing: border-box;
+ overflow: hidden;
}
-.navColapsed{
+.navContent {
+ margin: 24px;
+ margin-top: 48px;
+}
+
+.navAvatar{
display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- max-width: 56px;
+ width: 100%;
+ margin-bottom: 8px;
+}
+.userInfo {
+ margin-bottom: 16px;
}
+.name {
+ font-weight: light;
+ white-space: nowrap;
+ margin-bottom: 4px;
+ font-weight: bolder;
+}
+.username {
+ font-size: smaller;
+ white-space: nowrap;
+ color:rgb(100 116 139);
+ margin-bottom: 8px;
+}
-.navButton{
- background: none;
- border: none;
+.friends {
+ white-space: nowrap;
+ font-size: smaller;
+ color:rgb(100 116 139);
}
-.navAvatar{
- display: flex;
- width: 100%;
- margin-top: 64px;
+.friendsValue {
+ color: black;
+ font-weight: bold;
}
.content {
flex-grow: 1;
+}
+
+.menuItems{
+ padding-top: 8px;
+ border-top:1px solid rgb(226 232 240)
}
\ No newline at end of file
--
GitLab