Skip to content

Commit

Permalink
bug fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@yours7himanshu
yours7himanshu committed Feb 3, 2025
1 parent f5888e5 commit 7b68a34
Showing 1 changed file with 144 additions and 137 deletions.
281 changes: 144 additions & 137 deletions admin/src/shared/Sidebar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

/*
Copyright 2024 Himanshu Dinkar
Expand All @@ -15,10 +16,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import { useState, useContext } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { Tooltip } from "@mui/material";
import { useState ,useContext} from "react";
import { useLocation, useNavigate } from "react-router-dom";
// import { ContextStore } from "../store/ContextStore";
import Logo from "../components/Dashboard/Logo";
import Lottie from "lottie-react";
import loadingAnimation from "../assets/loading.json";
Expand All @@ -30,167 +30,173 @@ import EventNoteIcon from '@mui/icons-material/EventNote';
import QuizIcon from '@mui/icons-material/Quiz';
import AssignmentIcon from '@mui/icons-material/Assignment';
import Modal from "../components/Model";

const Sidebar = () => {
const { userRole } = useContext(RoleContext);

const {userRole} = useContext(RoleContext);
const location = useLocation();
const [isModalOpen, setIsModalOpen] = useState(false);
const navigate = useNavigate();

// Loader state
const [isLoading, setIsLoading] = useState(false);


const isActive = (path) => location.pathname === path;


const handleNavigation = (path) => {
if (location.pathname !== path) {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
navigate(path);
}, 1500);
}, 1500);
}
};

const MenuItem = ({ path, icon: Icon, label, onClick, show = true }) => {
if (!show) return null;

return (
<Tooltip title={label} placement="right">
<motion.li
whileHover={{ x: 5 }}
whileTap={{ scale: 0.95 }}
onClick={onClick}
className={`list-style-none flex items-center gap-4 font-medium p-4 mx-2
rounded-xl cursor-pointer transition-all duration-300 group
${isActive(path)
? "bg-white text-indigo-800 shadow-lg"
: "text-white hover:bg-white/10"}`}
>
<div className={`p-2 rounded-lg ${isActive(path) ? "bg-indigo-100" : "group-hover:bg-white/5"}`}>
<Icon className={`w-6 h-6 ${isActive(path) ? "text-indigo-600" : ""}`} />
</div>
<span className="text-sm font-medium">{label}</span>
</motion.li>
</Tooltip>
);
};

return (
<div className="flex max-md:hidden">
<motion.div
initial={{ x: -100 }}
animate={{ x: 0 }}
className="sidebar fixed top-0 left-0 h-screen flex flex-col w-[280px]
bg-gradient-to-br from-indigo-900 via-indigo-800 to-blue-900
shadow-2xl"
>
<div className="p-6">
<div className="flex max-md:hidden ">
{/* Sidebar */}
<div className="sidebar fixed top-0 left-0 h-screen flex flex-col w-[20%] bg-gradient-to-tr from-indigo-800 to-blue-700 text-white">
<ul className="flex flex-col ml-10 gap-5">
<Logo />
</div>
<div className="flex gap-4" >
<li
onClick={() => handleNavigation("/dashboard")}
className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer hover:text-gray-700 transition-all duration-75 ${
isActive("/dashboard")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<DashboardIcon/>
Dashboard
</li>
</div>


<nav className="flex-1 mt-6">
<ul className="flex flex-col gap-2">
<MenuItem
path="/dashboard"
icon={DashboardIcon}
label="Dashboard"
onClick={() => handleNavigation("/dashboard")}
/>

<MenuItem
path="/add-teachers"
icon={AssignmentIcon}
label="Add Teachers"
onClick={() => handleNavigation("/add-teachers")}
show={userRole === 'Director'}
/>

<MenuItem
path="/enroll-students"
icon={AssignmentIcon}
label="Enroll Students"
onClick={() => handleNavigation("/enroll-students")}
show={userRole === 'Registrar'}
/>

<MenuItem
path="/announcement"
icon={CampaignIcon}
label="Announcement"
onClick={() => handleNavigation("/announcement")}
show={userRole === 'Teacher' || userRole === 'Director'}
/>

<MenuItem
path="/timetable"
icon={EventNoteIcon}
label="Time Table"
onClick={() => handleNavigation("/timetable")}
show={userRole === 'Teacher'}
/>

<MenuItem
path="/post-quiz"
icon={QuizIcon}
label="Quiz"
onClick={() => handleNavigation("/post-quiz")}
show={userRole === 'Teacher'}
/>

<MenuItem
path="/post-assignment"
icon={AssignmentIcon}
label="Assignment"
onClick={() => handleNavigation("/post-assignment")}
show={userRole === 'Teacher'}
/>

<MenuItem
path="/student-detail"
icon={AssignmentIcon}
label="Student Details"
onClick={() => handleNavigation("/student-detail")}
show={userRole === 'Registrar'}
/>

<MenuItem
path="/teachers"
icon={AssignmentIcon}
label="Teacher Details"
onClick={() => handleNavigation("/teachers")}
show={userRole === 'Registrar'}
/>

{(userRole === 'Teacher' || userRole === 'Director') && (
<motion.div
whileHover={{ scale: 1.02 }}
className="mx-2 mt-4"
>
<button
onClick={() => setIsModalOpen(true)}
className="w-full flex items-center gap-3 px-4 py-3
bg-gradient-to-r from-blue-500 to-indigo-500
text-white rounded-xl shadow-lg hover:shadow-xl
transition-all duration-300"
>
<LiveTvIcon />
<span>Go Live Class</span>
</button>
</motion.div>
)}
</ul>
</nav>
</motion.div>
{userRole==='Director' && <li
onClick={() => handleNavigation("/add-teachers")}
className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/add-teachers")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
Add Teachers
</li> }


{userRole==='Registrar' && <li
onClick={() => handleNavigation("/enroll-students")}
className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/enroll-students")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
Enroll Students
</li>}

{(userRole==='Teacher'||userRole==='Director') && <li
onClick={() => handleNavigation("/announcement")}
className={`list-style-none flex items-center gap-2 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/announcement")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<CampaignIcon/>
Announcement
</li>}


{userRole==='Teacher'&& <li
onClick={() => handleNavigation("/timetable")}
className={`list-style-none flex gap-4 items-center font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/timetable")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<EventNoteIcon/>
Time Table
</li>}


{userRole ==='Teacher' && <li
onClick={() => handleNavigation("/post-quiz")}
className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/post-quiz")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<QuizIcon/>
Quiz
</li>}


{userRole==='Teacher'&& <li
onClick={() => handleNavigation("/post-assignment")}
className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/post-assignment")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<AssignmentIcon/>
Assignment
</li>}


{userRole === 'Registrar' && <li
onClick={() => handleNavigation("/student-detail")}
className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/admin-live")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
Student Details
</li>}

{userRole === 'Registrar' && <li
onClick={() => handleNavigation("/teachers")}
className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/admin-live")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
Teacher Details
</li>}

{(userRole === 'Teacher'|| userRole==='Director') && <div className="flex items-center gap-4" >
<li
onClick={() => setIsModalOpen(true)}
className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
isActive("/admin-live")
? "bg-white text-black border rounded-md"
: "text-white"
}`}
>
<LiveTvIcon />
Go Live Class
</li>
</div>}

</ul>
</div>

<Modal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onSubmit={() => console.log("Handle Room Join")}
email=""
setEmail={() => { }}
setEmail={() => {}}
roomId=""
setRoomId={() => { }}
setRoomId={() => {}}
loading={false}
/>

Expand All @@ -202,10 +208,11 @@ const Sidebar = () => {
loop={true}
className="w-20 h-20"
/>

</div>
)}
</div>
);
};

export default Sidebar;
export default Sidebar;

0 comments on commit 7b68a34

Please sign in to comment.