Feature dashboard

package.json

@@ -17,6 +17,7 @@
     "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.9.0",
     "react-select": "^5.7.2"
   },

src/App.tsx

@@ -1,30 +1,40 @@
-import { useState } from "react"
-import reactLogo from "./assets/react.svg"
-import "./App.css"
-import { Route, Routes } from "react-router-dom"
-import Validate from "./Pages/Portal/User/Validate/Validate"
-import Onboarding from "./Pages/Portal/User/Onboarding/Onboarding"
-import Profile from "./Pages/Portal/User/Profile/Profile"
-import Success from "./Pages/Portal/User/Onboarding/Success"
-import Login from "./Pages/Portal/User/Authentication/Login"
-import ForgotPassword from "./Pages/Portal/User/Authentication/ForgotPassword"
-import ResetPassword from "./Pages/Portal/User/Authentication/ResetPassword"
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
+import { Route, Routes } from "react-router-dom";
+import Validate from "./Pages/Portal/User/Validate/Validate";
+import Onboarding from "./Pages/Portal/User/Onboarding/Onboarding";
+import Profile from "./Pages/Portal/User/Profile/Profile";
+import Success from "./Pages/Portal/User/Onboarding/Success";
+import Login from "./Pages/Portal/User/Authentication/Login";
+import ForgotPassword from "./Pages/Portal/User/Authentication/ForgotPassword";
+import ResetPassword from "./Pages/Portal/User/Authentication/ResetPassword";
 
-function App() {
+import {
+  DashboardRootLayout,
+  Dashboard,
+  LearningCircles,
+  MuLearnAdmin,
+} from "./views/DashboardView/exports";
 
+function App() {
   return (
     <Routes>
       <Route path="user/validate/:token" element={<Validate />} />
-      <Route
-        path="user/onboarding"
-        element={<Onboarding />}
-      />
+      <Route path="user/onboarding" element={<Onboarding />} />
       <Route path="user/profile" element={<Profile />} />
       <Route path="user/login" element={<Login />} />
       <Route path="user/forgot-password" element={<ForgotPassword />} />
       <Route path="user/reset-password" element={<ResetPassword />} />
+
+      {/* Dashboard */}
+      <Route path="dashboard" element={<DashboardRootLayout />}>
+        <Route index element={<Dashboard />} />
+        <Route path="learning-circles" element={<LearningCircles />} />
+        <Route path="admin" element={<MuLearnAdmin />} />
+      </Route>
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;

src/Components/CustomBtn.tsx

@@ -0,0 +1,24 @@
+import { Box, Button, Text } from "@chakra-ui/react";
+import { IconContext } from "react-icons/lib";
+
+interface CustomBtnProps {
+  name: string;
+  icon: any;
+  handleClick: () => void;
+}
+
+const CustomBtn = ({ name, icon, handleClick }: CustomBtnProps) => {
+  return (
+    <Button onClick={handleClick} p="1rem 4rem" colorScheme="orange">
+      <IconContext.Provider value={{ color: "white" }}>
+        <Box as="span">{icon}</Box>
+      </IconContext.Provider>
+
+      <Text ml={icon ? "0.5rem" : "0"} color="white">
+        {name}
+      </Text>
+    </Button>
+  );
+};
+
+export default CustomBtn;

src/index.css

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

src/views/DashboardView/components/DashboardTopBar.tsx

@@ -0,0 +1,44 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Heading,
+  HStack,
+  VStack,
+} from "@chakra-ui/react";
+
+interface DashboardTopBarProps {
+  title: string;
+}
+
+const DashboardTopBar: React.FC<DashboardTopBarProps> = ({ title }) => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      mb={8}
+    >
+      <Heading as="h1" size="lg">
+        {title}
+      </Heading>
+      <HStack>
+        <VStack spacing={0} mr={4} alignItems="flex-end">
+          <Heading as="h3" size="sm">
+            John Doe
+          </Heading>
+          <Button variant="link" size="sm">
+            MuLearn Admin
+          </Button>
+        </VStack>
+        <Avatar
+          size="md"
+          src="https://c0.wallpaperflare.com/preview/901/119/723/face-man-model-person-thumbnail.jpg"
+        />
+      </HStack>
+    </Box>
+  );
+};
+
+export default DashboardTopBar;

src/views/DashboardView/components/Sidebar.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+
+import { NavLink } from "react-router-dom";
+import {
+  List,
+  ListItem,
+  ListIcon,
+  Text,
+  Box,
+  Image,
+  Flex,
+} from "@chakra-ui/react";
+import { BsGrid, BsGridFill } from "react-icons/bs";
+import {
+  AiOutlinePieChart,
+  AiFillPieChart,
+  AiOutlineUser,
+} from "react-icons/ai";
+
+interface SidebarProps {
+  setTitle: (title: string) => void;
+}
+
+export default function Sidebar({ setTitle }: SidebarProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleItemClick = (index: number, title: string) => {
+    setCurrentIndex(index);
+    setTitle(title); // Call setTitle to update title
+  };
+
+  return (
+    <Box
+      h="100%"
+      pt={{ lg: "20px" }}
+      border="2px"
+      borderColor="gray.200"
+      borderRadius="3xl"
+    >
+      <Image
+        src="https://ieeejobfair.com/assets/img/team/Logo.png"
+        alt="MuLearn Logo"
+        maxW="200px"
+        mx="auto"
+        px="6"
+        my="16"
+      />
+      <List spacing={8}>
+        {[
+          {
+            name: "Dashboard",
+            icon: BsGrid,
+            activeIcon: BsGridFill,
+            path: "",
+          },
+          {
+            name: "Learning Circles",
+            icon: AiOutlinePieChart,
+            activeIcon: AiFillPieChart,
+            path: "learning-circles",
+          },
+          {
+            name: "MuLearn Admin",
+            icon: AiOutlineUser,
+            activeIcon: AiOutlineUser,
+            path: "admin",
+          },
+        ].map((item, index) => (
+          <ListItem
+            key={index}
+            pl="4"
+            borderLeft="4px"
+            borderColor={currentIndex === index ? "orange.300" : "transparent"}
+            color={currentIndex === index ? "orange.300" : "gray.500"}
+            fontWeight="medium"
+          >
+            <NavLink
+              to={item.path}
+              onClick={() => handleItemClick(index, item.name)}
+            >
+              <ListIcon
+                as={currentIndex === index ? item.activeIcon : item.icon}
+                w="5"
+                h="5"
+              />
+              {item.name}
+            </NavLink>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}

src/views/DashboardView/exports.tsx

@@ -0,0 +1,6 @@
+import DashboardRootLayout from "./layouts/DashboardRootLayout";
+import Dashboard from "./pages/Dashboard";
+import LearningCircles from "./pages/LearningCircles";
+import MuLearnAdmin from "./pages/MuLearnAdmin";
+
+export { DashboardRootLayout, Dashboard, LearningCircles, MuLearnAdmin };

src/views/DashboardView/layouts/DashboardRootLayout.tsx

@@ -0,0 +1,30 @@
+import { Grid, GridItem, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { Outlet } from "react-router-dom";
+import DashboardTopBar from "../components/DashboardTopBar";
+import Sidebar from "../components/Sidebar";
+
+const DashboardRootLayout = () => {
+  const [title, setTitle] = useState("Dashboard");
+
+  return (
+    <Grid
+      templateColumns="repeat(12, 1fr)"
+      bg="gray.50"
+      p={{ base: "20px", lg: "30px" }}
+      gap={6}
+      minHeight={{ lg: "100vh" }}
+    >
+      <GridItem as="aside" colSpan={{ base: 12, lg: 3, xl: 2 }}>
+        <Sidebar setTitle={setTitle} />
+      </GridItem>
+
+      <GridItem as="main" colSpan={{ base: 12, lg: 9, xl: 10 }}>
+        <DashboardTopBar title={title} />
+        <Outlet />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default DashboardRootLayout;