Merge pull request #18 from tirzah-dev/hamburger-menu

Hamburger menu
VSchool · Feb 29, 2024 · 9327c17 · 9327c17
2 parents c845287 + fda2c7a
commit 9327c17
Show file tree

Hide file tree

Showing 12 changed files with 648 additions and 747 deletions.
diff --git a/apps/frontend/src/app/UIContext.tsx b/apps/frontend/src/app/UIContext.tsx
@@ -0,0 +1,25 @@
+import React, { createContext, useState, ReactNode } from 'react';
+
+interface UIContextType {
+  displaySideBar: boolean;
+  toggleSideBar: () => void;
+}
+
+export const UIContext = createContext<UIContextType>({ 
+  displaySideBar: false, 
+  toggleSideBar: () => {} 
+});
+
+
+
+export const UIProvider = ({ children }: { children: ReactNode }) => {
+  const [displaySideBar, setDisplaySideBar] = useState(false);
+
+  const toggleSideBar = () => setDisplaySideBar(prev => !prev);
+
+  return (
+    <UIContext.Provider value={{ displaySideBar, toggleSideBar }}>
+      {children}
+    </UIContext.Provider>
+  );
+};
diff --git a/apps/frontend/src/app/app.module.scss b/apps/frontend/src/app/app.module.scss
@@ -1,135 +1,13 @@
 /* Your styles goes here. */
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
+// body {
+//   min-height: 100vh;
+//   display: flex;
+//   flex-direction: column;
+// }
+
+// .page {
+//   height: 100vh;
+//   display: grid;
+//   grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px;
+// }
 
-.page {
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px;
-}
-
-.dashboard-root {
-  width: 100%;
-  height: auto;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 0;
-  padding: 0;
-  border-radius: 0;
-}
-
-.dashboard-content {
-  padding-top: 5vh;
-  display: grid;
-  grid-template-rows: auto 1fr 1fr 1fr;
-  grid-template-columns: 1fr;
-  height: 100vh;
-  grid-row: 3 / span 10;
-  grid-column: 1 / span 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5vh;
-}
-
-.hamburger-menu-section {
-  padding-top: 8vh;
-  grid-row: 1 / span 1;
-  grid-column: 1 / span 1;
-  width: 80%;
-  align-items: center;
-}
-
-.profile-image {
-  width: 2rem;
-  border-radius: 0.75rem;
-}
-
-.greeting-text {
-  font-size: 2rem;
-  margin-top: 1rem;
-  text-align: center;
-  font-weight: 500;
-}
-
-.net-worth-section {
-  display: flex;
-  flex-direction: column;
-  margin-left: 20px;
-  gap: 6px;
-  justify-content: center;
-  font-family: 'Raleway', sans-serif;
-}
-
-.net-worth-value {
-  font-size: 2rem;
-  font-weight: 800;
-  text-align: center;
-}
-
-.net-worth-label {
-  font-family: 'Raleway', sans-serif;
-  width: 100%;
-  font-size: 1.5rem;
-  font-weight: 300;
-  justify-content: center;
-  text-align: center;
-}
-
-.buttons-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1.5rem;
-  width: 75%;
-  align-items: center;
-  text-align: center;
-}
-
-.dashboard-button {
-  font-size: 1rem;
-  font-weight: bold;
-  font-family: 'Sofia Pro', sans-serif;
-  color: white;
-  background-color: #148cfb;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 3rem;
-  cursor: pointer;
-  align-items: center;
-  text-align: center;
-  border-radius: 100px;
-}
-
-.dashboard-button:hover {
-  font-size: 1.5rem;
-}
-
-.first-time-user-text {
-  padding: 50px;
-  margin-top: 10vh;
-  font-family: 'Sofia Pro', sans-serif;
-  font-size: 1rem;
-  font-weight: 800;
-  letter-spacing: 0px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-width: 2px;
-  padding: 0.5rem 1rem;
-  height: 2rem;
-  border-color: black;
-  border-radius: 20px;
-}
-
-.first-time-user-text:hover {
-  text-decoration: underline;
-}
diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
+import { UIProvider } from './UIContext';
 import Footer from './components/footer/footer';
-// import Header from './components/header/header';
+import Header from './components/header/header';
 import Router from './views/router/router';
 import './app.module.scss';
 
@@ -14,7 +15,6 @@ export function App() {
   const [user, setUser] = React.useState<any>({firstName: null, lastName: null, id: null, joinDate: null, email: null, userType: 'Reader', picture: null, name: null, roles: ['None']});
 
 
-
   useEffect(() => {
     const user = localStorage.getItem('user');
     if(user){
@@ -38,15 +38,17 @@ export function App() {
 
   return (
     <UserContext.Provider value={{user, setUser}}>
-    <BrowserRouter>
-      <div className="flex flex-col h-screen">
-        <div style={{ flex: '1 1 0' }}>
-          {/* <Header></Header> */}
-          <Router></Router>
-        </div>
-        <Footer></Footer>
-      </div>
-    </BrowserRouter>
+      <UIProvider>
+        <BrowserRouter>
+          <div className="flex flex-col h-screen">
+            <div style={{ flex: '1 1 0' }}>
+              <Header></Header>
+              <Router></Router>
+            </div>
+            {/* <Footer></Footer> */}
+          </div>
+        </BrowserRouter>
+      </UIProvider>
     </UserContext.Provider>
   );
 }

diff --git a/apps/frontend/src/app/components/authlayout/AuthLayout.tsx b/apps/frontend/src/app/components/authlayout/AuthLayout.tsx
@@ -4,21 +4,19 @@ import backgroundImage from './background-auth.jpg'
 
 export function AuthLayout({ children }: any) {
   return (
-    <div>
-      <div className="relative flex min-h-full justify-center md:px-12 lg:px-0">
-        <div className="relative z-10 flex flex-1 flex-col bg-white px-4 py-3 shadow-xl sm:justify-center md:flex-none md:px-28">
-          <div className="mx-auto max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
-            {children}
-          </div>
-        </div>
-        <div className="hidden sm:contents lg:relative lg:block lg:flex-1">
-          <img
-            className="absolute inset-0 h-full w-full object-cover"
-            src={backgroundImage}
-            alt="blue background"
-          />
+    <div className="relative flex min-h-full justify-center md:px-0">
+      <div className="relative z-10 flex flex-1 flex-col bg-white px-4 py-3 shadow-xl sm:justify-center md:flex-none md:px-0 md:w-full">
+        <div className="mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
+          {children}
         </div>
       </div>
+      <div className="hidden sm:contents lg:relative lg:block lg:flex-1">
+        <img
+          className="absolute inset-0 h-full w-full object-cover"
+          src={backgroundImage}
+          alt="blue background"
+        />
+      </div>
     </div>
   )
 }