Add user context for managing user state; update header component

aelassas · Dec 30, 2024 · ce8113b · ce8113b
1 parent caeaa94
commit ce8113b
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 146 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from 'react'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import env from '@/config/env.config'
 import { GlobalProvider } from '@/context/GlobalContext'
+import { UserProvider } from '@/context/UserContext'
 import { RecaptchaProvider } from '@/context/RecaptchaContext'
 import { init as initGA } from '@/common/ga4'
 import ScrollToTop from '@/components/ScrollToTop'
@@ -10,6 +11,7 @@ if (env.GOOGLE_ANALYTICS_ENABLED) {
   initGA()
 }
 
+const Header = lazy(() => import('@/components/Header'))
 const SignIn = lazy(() => import('@/pages/SignIn'))
 const SignUp = lazy(() => import('@/pages/SignUp'))
 const Activate = lazy(() => import('@/pages/Activate'))
@@ -35,38 +37,42 @@ const Locations = lazy(() => import('@/pages/Locations'))
 const App = () => (
   <BrowserRouter>
     <GlobalProvider>
-      <RecaptchaProvider>
-        <ScrollToTop />
+      <UserProvider>
+        <RecaptchaProvider>
+          <ScrollToTop />
 
-        <div className="app">
-          <Suspense fallback={<></>}>
-            <Routes>
-              <Route path="/sign-in" element={<SignIn />} />
-              <Route path="/sign-up" element={<SignUp />} />
-              <Route path="/activate" element={<Activate />} />
-              <Route path="/forgot-password" element={<ForgotPassword />} />
-              <Route path="/reset-password" element={<ResetPassword />} />
-              <Route path="/" element={<Home />} />
-              <Route path="/search" element={<Search />} />
-              <Route path="/property" element={<Property />} />
-              <Route path="/checkout" element={<Checkout />} />
-              <Route path="/checkout-session/:sessionId" element={<CheckoutSession />} />
-              <Route path="/bookings" element={<Bookings />} />
-              <Route path="/booking" element={<Booking />} />
-              <Route path="/settings" element={<Settings />} />
-              <Route path="/notifications" element={<Notifications />} />
-              <Route path="/change-password" element={<ChangePassword />} />
-              <Route path="/about" element={<About />} />
-              <Route path="/tos" element={<ToS />} />
-              <Route path="/contact" element={<Contact />} />
-              <Route path="/agencies" element={<Agencies />} />
-              <Route path="/destinations" element={<Locations />} />
+          <div className="app">
+            <Suspense fallback={<></>}>
+              <Header />
 
-              <Route path="*" element={<NoMatch />} />
-            </Routes>
-          </Suspense>
-        </div>
-      </RecaptchaProvider>
+              <Routes>
+                <Route path="/sign-in" element={<SignIn />} />
+                <Route path="/sign-up" element={<SignUp />} />
+                <Route path="/activate" element={<Activate />} />
+                <Route path="/forgot-password" element={<ForgotPassword />} />
+                <Route path="/reset-password" element={<ResetPassword />} />
+                <Route path="/" element={<Home />} />
+                <Route path="/search" element={<Search />} />
+                <Route path="/property" element={<Property />} />
+                <Route path="/checkout" element={<Checkout />} />
+                <Route path="/checkout-session/:sessionId" element={<CheckoutSession />} />
+                <Route path="/bookings" element={<Bookings />} />
+                <Route path="/booking" element={<Booking />} />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/notifications" element={<Notifications />} />
+                <Route path="/change-password" element={<ChangePassword />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/tos" element={<ToS />} />
+                <Route path="/contact" element={<Contact />} />
+                <Route path="/agencies" element={<Agencies />} />
+                <Route path="/destinations" element={<Locations />} />
+
+                <Route path="*" element={<NoMatch />} />
+              </Routes>
+            </Suspense>
+          </div>
+        </RecaptchaProvider>
+      </UserProvider>
     </GlobalProvider>
   </BrowserRouter>
 )

diff --git a/frontend/src/assets/css/contact.css b/frontend/src/assets/css/contact.css
@@ -4,6 +4,7 @@ div.contact {
   flex: 1 0 auto;
   align-items: center;
   transform: translate3d(0, 0, 0);
+  min-height: 100vh;
 }
 
 div.contact .form {

diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
@@ -20,6 +20,14 @@
   margin-right: 10px;
 }
 
+.side-menu li {
+  cursor: pointer;
+}
+
+.side-menu li:hover {
+  background-color: #f1f1f1;
+}
+
 .header-action {
   margin-right: 20px;
 }
@@ -53,11 +61,12 @@
 
 .header .logo {
   text-decoration: none;
+  text-transform: none;
+  background: transparent;
   font-size: 18px;
   font-weight: 500;
   color: #121212;
 }
-
 /* Device width is greater than or equal to 960px */
 
 @media only screen and (width >=960px) {