Enhance navbar , Dark and Light Theme #40

client/src/components/course/course-card-item.tsx

@@ -18,12 +18,13 @@ const CourseCardItem: FC<Props> = ({ item }) => {
       sx={{
         px: 1,
         py: 4,
+
       }}
     >
       <Box
         sx={{
           p: 2,
-          backgroundColor: 'background.paper',
+          //backgroundColor: 'background.paper',
           borderRadius: 4,
           transition: (theme) => theme.transitions.create(['box-shadow']),
           '&:hover': {
@@ -34,6 +35,9 @@ const CourseCardItem: FC<Props> = ({ item }) => {
               boxShadow: 2,
             },
           },
+          backgroundColor:'var(--color-background)',
+          color: 'var(--color-text)',
+      // transition: 'background-color 0.3s, color 0.3s',
         }}
       >
         <Box

client/src/components/footer/footer.tsx

@@ -10,7 +10,11 @@ const Footer: FC = () => {
   return (
     <Box
       component="footer"
-      sx={{ backgroundColor: 'primary.main', py: { xs: 6, md: 10 }, color: 'primary.contrastText' }}
+      sx={{ 
+      backgroundColor: 'primary.main',
+      py: { xs: 6, md: 10 }, 
+      color: 'primary.contrastText' 
+      }}
     >
       <Container>
         <Grid container spacing={1}>

client/src/components/header/header.tsx

@@ -16,7 +16,13 @@ const Header: FC = () => {
     setVisibleMenu(visibleMenu => !visibleMenu);
 };
   return (
-    <Box sx={{ backgroundColor: 'background.paper', position: 'sticky', top: 0, zIndex: 1000 }}>
+    <Box sx={{ 
+    //  backgroundColor: 'background.paper',
+      backgroundColor:'var(--color-background)',
+      color: 'var(--color-text)',
+      transition: 'background-color 0.3s, color 0.3s',
+     position: 'sticky', top: 0, zIndex: 1000 
+     }}>
       <Container sx={{ py: { xs: 2, md: 3 } }}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
           <Logo />

client/src/components/home/feature.tsx

@@ -37,7 +37,13 @@ const BorderLinearProgress = styled(LinearProgress, {
 
 const HomeFeature: FC = () => {
   return (
-    <Box id="feature" sx={{ py: { xs: 10, md: 14 }, backgroundColor: 'background.paper' }}>
+    <Box id="feature" sx={{ py: { xs: 10, md: 14 }, 
+    // backgroundColor: 'background.paper' 
+    backgroundColor:'var(--color-background)',
+    color: 'var(--color-text)',
+    transition: 'background-color 0.3s, color 0.3s',
+
+    }}>
       <Container>
         <Grid container spacing={3}>
           <Grid item xs={12} md={5}>

client/src/components/home/hero.tsx

@@ -49,7 +49,12 @@ const ExpItem: FC<ExpItemProps> = ({ item }) => {
 
 const HomeHero: FC = () => {
   return (
-    <Box id="hero" sx={{ backgroundColor: 'background.paper', position: 'relative', pt: 4, pb: { xs: 8, md: 10 } }}>
+    <Box id="hero" sx={{ 
+      // backgroundColor: 'background.paper', 
+      backgroundColor:'var(--color-background)',
+      color: 'var(--color-text)',
+      transition: 'background-color 0.3s, color 0.3s',
+    position: 'relative', pt: 4, pb: { xs: 8, md: 10 } }}>
       <Container maxWidth="lg">
         <Grid container spacing={0} sx={{ flexDirection: { xs: 'column', md: 'unset' } }}>
           <Grid item xs={12} md={7}>

client/src/components/home/mentors.tsx

@@ -87,7 +87,10 @@ const HomeOurMentors: FC = () => {
           xs: 8,
           md: 12,
         },
-        backgroundColor: '#ecf3f3',
+        // backgroundColor: '#ecf3f3',
+        backgroundColor:'var(--color-background-paper)',
+        color: 'var(--color-text)',
+        transition: 'background-color 0.3s, color 0.3s',
       }}
     >
       <Container maxWidth="lg">

client/src/components/home/newsletter.tsx

@@ -7,7 +7,12 @@ import { StyledButton } from '../styled-button'
 
 const HomeNewsLetter: FC = () => {
   return (
-    <Box sx={{ backgroundColor: 'background.paper', py: { xs: 8, md: 10 } }}>
+    <Box sx={{ 
+      // backgroundColor: 'background.paper',
+      backgroundColor:'var(--color-background)',
+      color: 'var(--color-text)',
+      transition: 'background-color 0.3s, color 0.3s',
+      py: { xs: 8, md: 10 } }}>
       <Container>
         <Box
           sx={{

client/src/components/home/popular-courses.tsx

@@ -86,7 +86,10 @@ const HomePopularCourse: FC = () => {
           md: 8,
         },
         pb: 14,
-        backgroundColor: 'background.default',
+        // backgroundColor: 'background.default',
+        backgroundColor:'var(--color-background-paper)',
+        color: 'var(--color-text)',
+        transition: 'background-color 0.3s, color 0.3s',
       }}
     >
       <Container maxWidth="lg">

client/src/components/home/testimonial.tsx

@@ -63,7 +63,12 @@ const HomeTestimonial: FC = () => {
   }
 
   return (
-    <Box id="testimonial" sx={{ pb: { xs: 6, md: 10 }, backgroundColor: 'background.paper' }}>
+    <Box id="testimonial" sx={{ pb: { xs: 6, md: 10 }, 
+    // backgroundColor: 'background.paper' 
+    backgroundColor:'var(--color-background)',
+      color: 'var(--color-text)',
+      transition: 'background-color 0.3s, color 0.3s',
+    }}>
       <Container>
         <Grid container spacing={5}>
           <Grid item xs={12} md={6}>

client/src/components/logo/logo.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import Link from 'next/link'
 import { Box, Typography } from '@mui/material'
 
 interface Props {
@@ -8,15 +9,19 @@ interface Props {
 
 const Logo: FC<Props> = ({ onClick, variant }) => {
   return (
-    <Box onClick={onClick}>
-      <Typography
-        variant="h4"
-        component="h1"
-        sx={{ fontWeight: 700, '& span': { color: variant === 'primary' ? 'primary.main' : 'unset' } }}
-      >
-        Big<span>Ohhh</span>
-      </Typography>
-    </Box>
+    <Link href="/" >
+      <Box component="a" onClick={onClick} sx={{ cursor: 'pointer', textDecoration: 'none' }}>
+        <Typography
+          variant="h4"
+          component="h1"
+          sx={{ fontWeight: 700, 
+          '& span': { color: 'primary.main'} 
+          }}
+        >
+          Big<span>Ohhh</span>
+        </Typography>
+      </Box>
+    </Link>
   )
 }
 

client/src/components/mentor/mentor-card-item.tsx

@@ -21,7 +21,16 @@ const MentorCardItem: FC<Props> = ({ item }) => {
         my:2,
         borderRadius: 8,
         boxShadow: 6,
-        backgroundColor: 'white',
+        // backgroundColor: 'white',
+        // transition: 'transform 0.3s, box-shadow 0.3s',
+        '&:hover': {
+          transform: 'scale(1.05)',
+          boxShadow: 4,
+        },
+
+        backgroundColor:'var(--color-background)',
+        color: 'var(--color-text)',
+        transition: 'background-color 0.3s, color 0.3s',
       }}
     >
       <Box

client/src/components/navigation/navigation.data.ts

@@ -3,7 +3,7 @@ import type { Navigation } from '@/interfaces/navigation'
 export const navigations: Navigation[] = [
   {
     label: 'Home',
-    path: '#', // '/',
+    path: 'hero', // '/',
   },
   {
     label: 'Courses',

client/src/components/navigation/navigation.tsx

@@ -1,14 +1,39 @@
-import React, { FC } from 'react'
+import React, { FC,useState,useEffect } from 'react'
 import Box from '@mui/material/Box'
 import { Link as ScrollLink } from 'react-scroll'
 import { navigations } from './navigation.data'
+import IconButton from '@mui/material/IconButton'
+import { Sun, Moon } from 'react-feather'
 
 interface NavigationToggle {
   toggleMenu: () => void; // Function to toggle the visibility of the navigation box
 }
 const Navigation: FC<NavigationToggle> = ({toggleMenu}) => {
+
+  const [isDayMode, setIsDayMode] = useState(true);
+
+  const handleToggleMode = () => {
+    setIsDayMode((prevMode) => !prevMode);
+  };
+
+  useEffect(() => {
+    if (isDayMode) {
+      document.body.classList.remove('night-mode');
+    } else {
+      document.body.classList.add('night-mode');
+    }
+  }, [isDayMode]);
+
   return (
-    <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' } }}>
+    <Box sx={{ 
+      display: 'flex', 
+      flexDirection: { xs: 'column', md: 'row' } ,
+      alignItems: 'center',
+      backgroundColor:'var(--color-background)',
+      color: 'var(--color-text)',
+      transition: 'background-color 0.3s, color 0.3s',
+    }}>
+
       {navigations.map(({ path: destination, label }) => (
         <Box
           component={ScrollLink}
@@ -20,7 +45,7 @@ const Navigation: FC<NavigationToggle> = ({toggleMenu}) => {
           duration={350}
           sx={{
             position: 'relative',
-            color: 'text.disabled',
+            color: 'inherit',
             cursor: 'pointer',
             fontWeight: 600,
             display: 'inline-flex',
@@ -30,7 +55,7 @@ const Navigation: FC<NavigationToggle> = ({toggleMenu}) => {
             mb: { xs: 3, md: 0 },
             fontSize: { xs: '1.2rem', md: 'inherit' },
             ...(destination === '/' && {
-              color: 'primary.main',
+              color: isDayMode ? 'primary.main' : 'primary.light', // Adjust color for active link based on mode,
             }),
 
             '& > div': { display: 'none' },
@@ -60,6 +85,9 @@ const Navigation: FC<NavigationToggle> = ({toggleMenu}) => {
           {label}
         </Box>
       ))}
+      <IconButton onClick={handleToggleMode} sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 3, md: 0 } }}>
+        {isDayMode ? <Sun color="var(--color-icon)" /> : <Moon color="var(--color-icon)" />}
+      </IconButton>
     </Box>
   )
 }

client/src/pages/_app.tsx

@@ -11,6 +11,8 @@ import '@/styles/globals.css'
 import '@/styles/react-slick.css'
 import { NextPageWithLayout } from '@/interfaces/layout'
 import Script from 'next/script'
+
+import '../styles/globals.css'
 // import 'slick-carousel/slick/slick-theme.css'
 
 // Client-side cache, shared for the whole session of the user in the browser.

client/src/styles/globals.css

@@ -1,7 +1,30 @@
+/* styles/globals.css */
 :root {
-  --color-background: #f5f5f9;
+  --color-background: #ffffff;
+  --color-text: #000000;
   --color-scrollbar: rgb(224, 224, 224);
   --color-scrollbar-hover: #bbb;
+  --color-icon: #ffcc00;
+
+  --color-background-paper:#f5f5f9;
+  --color-background-footer:
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+/* Night mode */
+body.night-mode {
+  --color-background: #000000;
+  --color-text: #ffffff;
+  --color-scrollbar: #333;
+  --color-scrollbar-hover: #666;
+  --color-icon: #ffffff;
+
+  --color-background-paper:#a0a0a0;
 }
 
 ::-webkit-scrollbar {
@@ -23,10 +46,11 @@
   border-radius: 10px;
 }
 
-body {
-  /* background-color: var(--color-background); */
+/* body {
+  background-color: var(--color-background); 
   background-color: '#fff';
-}
+} */
+
 html {
   scroll-behavior: smooth;
 }