created sidebar and dropdown for dashboard

src/App.js

@@ -14,6 +14,7 @@ import ViewFormPage from "./pages/ViewForm/ViewFormPage";
 import { AuthProvider } from "./components/context/Auth";
 import VillagesList from "./pages/VillagesList/VillagesList";
 import RouteAuth from "./components/context/RouteAuth";
+import VillageOverview from "./pages/Dashboard/VillageOverview/VillageOverview";
 
 export default function App() {
   return (
@@ -45,6 +46,11 @@ export default function App() {
               <Route element={<RouteAuth allowedRoles={["admin", "user"]} />}>
                 <Route path="/form" element={<FormPage />} />
               </Route>
+              <Route
+                element={<RouteAuth allowedRoles={["admin", "GOVTOff"]} />}
+              >
+                <Route path="/dashboard" element={<VillageOverview/>} />
+              </Route>
             </>
           ) : null}
           <Route path="*" element={<NoPage />} />

src/components/Dashboard/DashboardDropdown/DashboardDropdown.css

@@ -0,0 +1,49 @@
+.dropdown {
+  position: relative;
+}
+.dropdownBtn {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #e3e6f9;
+  border: none;
+  border-radius: 0.5rem;
+  width: 200px;
+}
+.dropdownBtn h6 {
+  margin-top: 0.4rem;
+}
+.menu {
+  position: absolute;
+  list-style-type: none;
+  margin: 5px 0;
+  padding: 0;
+  border-radius: 1rem;
+  overflow: hidden;
+  border-radius: 1rem;
+  width: 180px;
+}
+
+.menu > li {
+  margin: 0;
+  background-color: #e3e6f9;
+}
+
+.menu > li:hover {
+  background-color: #956ef8;
+  color: #ffff;
+}
+
+.menu > li > button {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 5px;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+}

src/components/Dashboard/DashboardDropdown/DashboardDropdown.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import "./DashboardDropdown.css";
+import { BsFillCaretDownFill } from "react-icons/bs";
+const villages = [
+  "Lasudiya Khas",
+  "Gawa Kheda",
+  "Beda Khedi",
+  "Mana Khedi",
+  "Nipaniya Kalan",
+];
+const DashboardDropdown = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedVillage, setSelectedVillage] = useState("Select Village");
+  const handleOpen = () => {
+    setOpen(!open);
+  };
+
+  const handleMenu = (village) => {
+    setSelectedVillage(village);
+    setOpen(false);
+  };
+
+  return (
+    <div className="dropdown">
+      <button className="dropdownBtn" onClick={handleOpen}>
+        <h6>{selectedVillage}</h6>
+        <BsFillCaretDownFill />
+      </button>
+      {open ? (
+        <ul className="menu">
+          {villages.map((village, index) => {
+            return (
+              <li key={index} className="menu-item">
+                <button onClick={()=>handleMenu(village)}>{village}</button>
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </div>
+  );
+};
+
+export default DashboardDropdown;

src/components/Dashboard/Sidebar/Sidebar.css

@@ -0,0 +1,48 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding-left: 1rem;
+  height: 100vh;
+  width: 250px;
+  background-color: #ffff;
+  border-top-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+.sidebarLogo {
+  margin-top: 1rem;
+  margin-left: 1rem;
+}
+.sidebarLogo img {
+  width: 150px;
+  border-bottom: 2px solid #58585e;
+  padding: 1rem;
+}
+.sidebarMenus .sidebarMenusList {
+  font-size: 15px;
+  font-family: "Roboto", sans-serif;
+  font-style: regular;
+  line-height: 29px;
+  color: #9d9cba;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.listActive{
+  font-size: 16px;
+  font-family: "Roboto", sans-serif;
+  font-style: regular;
+  line-height: 29px;
+  color: #692dfb;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.sidebarMenus .sidebarMenusList:hover {
+  color: #692dfb;
+}
+.sidebarMenus ul {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}

src/components/Dashboard/Sidebar/Sidebar.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import "./Sidebar.css";
+const Sidebar = () => {
+  const data = [
+    "Village Overview",
+    "General Household Info",
+    "Family Members Info",
+    "Government Schemes",
+    "Basic Amenities",
+    "Land and Agriculture",
+    "Other",
+  ];
+  const [element, setElement] = useState("Village Overview");
+  return (
+    <div className="sidebar">
+      <div className="sidebarLogo">
+        <a href="https://heritians.vercel.app/">
+          <img
+            src={require("../../../assets/images/dashboardLogo.png")}
+            alt="logo"
+          />
+        </a>
+      </div>
+      <div className="sidebarMenus">
+        <ul>
+          {data.map((elem, index) => {
+            return (
+              <li
+                className={elem === element ? "listActive" : "sidebarMenusList"}
+                onClick={() => setElement(elem)}
+                key={index}
+              >
+                {elem}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/Dropdown/DropdownMenuItems.js

@@ -10,6 +10,11 @@ const DropdownMenuItems = {
       title: "Villages List",
       path: "/villages",
     },
+    {
+      id: 3,
+      title: "Dashboard",
+      path: "/dashboard",
+    }
   ],
   user: [
     {
@@ -39,6 +44,11 @@ const DropdownMenuItems = {
       title: "Fill the form",
       path: "/form",
     },
+    {
+      id: 5,
+      title: "Dashboard",
+      path: "/dashboard",
+    }
   ],
 };
 

src/pages/Dashboard/VillageOverview/VillageOverview.css

@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.villageOverviewContainer{
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    background-color: #F0F2F9;
+}
+.sidebarRightSide{
+    width: 90%;
+}
+.sidebarRightSideTop{
+    width: 90%;
+    margin: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.dashboardTitle h2{
+    font-family: "Roboto", sans-serif;
+}

src/pages/Dashboard/VillageOverview/VillageOverview.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './VillageOverview.css'
+import Sidebar from '../../../components/Dashboard/Sidebar/Sidebar'
+import DashboardDropdown from '../../../components/Dashboard/DashboardDropdown/DashboardDropdown'
+const VilageOverview = () => {
+  return (
+    <div className="villageOverviewContainer">
+      <Sidebar />
+      <div className="sidebarRightSide">
+        <div className="sidebarRightSideTop">
+          <div className="dashboardTitle">
+            <h2>Dashboard - Village Overview</h2>
+          </div>
+          <DashboardDropdown/>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VilageOverview