From bf6bc30f3a96089a725f671282726aa7c83cdefd Mon Sep 17 00:00:00 2001
From: tahmid-saj <tahmid.saj@gmail.com>
Date: Fri, 21 Jun 2024 19:42:09 -0400
Subject: [PATCH] adjusting app bar

---
 .../mui/hidden-drawer/hidden-drawer.component.jsx      |  7 +++++--
 .../shared/mui/hidden-drawer/hidden-drawer.styles.scss |  4 ++++
 .../schedule-calendar/schedule-calendar.component.jsx  |  2 +-
 src/pages/shared/home/home.component.jsx               | 10 +++++-----
 src/pages/shared/home/home.styles.jsx                  |  3 +--
 src/routes/shared/navigation/navigation.component.jsx  |  6 ++++--
 src/routes/shared/navigation/navigation.styles.jsx     |  5 +++--
 src/utils/constants/shared.constants.js                |  1 +
 8 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
index 290ea63..58ad885 100644
--- a/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
+++ b/src/components/shared/mui/hidden-drawer/hidden-drawer.component.jsx
@@ -151,8 +151,11 @@ export default function HiddenDrawer() {
   );
 
   return (
-    <div>
-      <Button onClick={toggleDrawer(true)}>
+    <div className="nutrition-tracker-app-bar">
+      <Button sx={{ position: "fixed", top: "0", width: "100%", justifyContent: "left", 
+        backgroundColor: COLOR_CODES.general["9"] 
+        }}
+        onClick={toggleDrawer(true)}>
         <div className='nutrition-tracker-title'>
           <MenuIcon/>
           <Typography sx={{ marginLeft: "10px", color: COLOR_CODES.general["0"] }} variant="h6">
diff --git a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss b/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
index d7dba7f..198ffed 100644
--- a/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
+++ b/src/components/shared/mui/hidden-drawer/hidden-drawer.styles.scss
@@ -6,4 +6,8 @@ ion-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.nutrition-tracker-app-bar {
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
index 58898a8..38b5f87 100644
--- a/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
+++ b/src/components/signed-in/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx
@@ -57,7 +57,7 @@ const ScheduleCalendar = () => {
   }
 
   return (
-    <div className="calories-burned-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+    <div className="calories-burned-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
       <Typography sx={{ display: "flex", marginLeft: "1%" }} 
         variant="h6">{`Calories burned calendar`}</Typography>
       <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
diff --git a/src/pages/shared/home/home.component.jsx b/src/pages/shared/home/home.component.jsx
index 8022bdb..08f86bd 100644
--- a/src/pages/shared/home/home.component.jsx
+++ b/src/pages/shared/home/home.component.jsx
@@ -11,7 +11,7 @@ import { selectCurrentUser } from "../../../store/shared/user/user.selector.js";
 import { COLOR_CODES, NAV_LINKS } from "../../../utils/constants/shared.constants.js";
 
 const styles = {
-  width: 350,
+  width: 360,
   height: 450,
   backgroundColor: COLOR_CODES.general["0"],
   marginBottom: "6%"
@@ -79,8 +79,8 @@ const Home = () => {
   }
 
   return (
-    <Fragment>
-      <div className="container">
+    <div className="container">
+      <HomeContainer>
         <div className="row justify-content-center align-items-center">
           <div className="col-sm-12 col-md-6 col-lg-4">
             <MediaCard styles={ styles } header={ homeCardContent.chatbot.header } imageUrl={ homeCardContent.chatbot.imageUrl } 
@@ -127,8 +127,8 @@ const Home = () => {
             imageTitle={ homeCardContent.summary.header } path={ homeCardContent.summary.path } content={ homeCardContent.summary.description }></MediaCard>
           </div>
         </div>
-      </div>
-    </Fragment>
+      </HomeContainer>
+    </div>
   );
 };
 
diff --git a/src/pages/shared/home/home.styles.jsx b/src/pages/shared/home/home.styles.jsx
index ca533f6..6052b0a 100644
--- a/src/pages/shared/home/home.styles.jsx
+++ b/src/pages/shared/home/home.styles.jsx
@@ -1,8 +1,7 @@
 import styled from "styled-components"
 
 export const HomeContainer = styled.div`
-  display: flex;
+  display: block;
   justify-content: center;
   align-items: center;
-  margin: 3%;
 `
\ No newline at end of file
diff --git a/src/routes/shared/navigation/navigation.component.jsx b/src/routes/shared/navigation/navigation.component.jsx
index 37ca18d..a21023f 100644
--- a/src/routes/shared/navigation/navigation.component.jsx
+++ b/src/routes/shared/navigation/navigation.component.jsx
@@ -2,7 +2,7 @@ import { Fragment, useContext, useState } from "react";
 import { Outlet, Link, useNavigate } from "react-router-dom";
 
 import "./navigation.styles.jsx";
-import { OutletContainer } from "./navigation.styles.jsx";
+import { DrawerContainer } from "./navigation.styles.jsx";
 
 import { signOutUser } from "../../../utils/firebase/firebase.utils";
 import MiniDrawer from "../../../components/shared/mui/drawer/drawer.component.jsx";
@@ -40,7 +40,9 @@ const Navigation = () => {
         }
       >
       </MiniDrawer> */}
-      <HiddenDrawer></HiddenDrawer>
+      <DrawerContainer>
+        <HiddenDrawer></HiddenDrawer>
+      </DrawerContainer>
 
       {/* <div className="navigation">
         <Link className="logo" to="/"
diff --git a/src/routes/shared/navigation/navigation.styles.jsx b/src/routes/shared/navigation/navigation.styles.jsx
index 4bdfc56..3cbe79d 100644
--- a/src/routes/shared/navigation/navigation.styles.jsx
+++ b/src/routes/shared/navigation/navigation.styles.jsx
@@ -1,5 +1,6 @@
 import styled from "styled-components"
+import { COMMON_SPACING } from "../../../utils/constants/shared.constants"
 
-export const OutletContainer = styled.div`
-  padding-left: 3%;
+export const DrawerContainer = styled.div`
+  margin-bottom: 60px;
 `
\ No newline at end of file
diff --git a/src/utils/constants/shared.constants.js b/src/utils/constants/shared.constants.js
index 910d029..7bc3d9b 100644
--- a/src/utils/constants/shared.constants.js
+++ b/src/utils/constants/shared.constants.js
@@ -204,6 +204,7 @@ export const COMMON_SPACING = {
   screenWidthOnDrawerClose: 500,
   navBarWidth: 225,
   navBarMargin: 230,
+  hiddenAppBarMarginTop: 60,
   pageContent: {
     margin: {
       top: "0%",