feat: Timeline/Events page implementation #471

src/App.jsx

@@ -33,6 +33,7 @@ import UserTimestamps from "./features/UserTimestamps";
 import InternshipResponse from "./components/Dashboard/FormData/InternshipResponse";
 import EditPublicProfile from "./components/Dashboard/Profile/EditPublicProfile/EditPublicProfile";
 import Volunteer from "./components/Opportunities/Volunteer/Volunteer";
+import TimeLineEvent from "./components/Opportunities/TimeLineEvent/TimeLineEvent";
 import TheCyberXcel from "./components/Opportunities/TheCyberXcel/TheCyberXcel";
 import OpenSecProjects from "./components/Opportunities/OpenSecProjects/OpenSecProjects";
 import DashboardRoute from "./components/Dashboard/DashboardRoute";
@@ -137,6 +138,7 @@ const App = () => {
 
                         <Route exact path={"/volunteer"} element={<Volunteer />} />
                         <Route exact path={"/opensec-projects"} element={<OpenSecProjects />} />
+                        <Route exact path={"/timeline-events"} element={<TimeLineEvent />} />
                         <Route exact path={"/thecyberxcel"} element={<TheCyberXcel />} />
 
                         <Route exact path={"/CyberGames"} element={<CyberGames />} />

src/components/Dashboard/Sidebar/Sidebar.jsx

@@ -1,30 +1,73 @@
-import React from "react";
-import { DashboardSidebarContainer, RouteLink, SidebarTitle } from "./SidebarElements";
+import React, { useEffect, useState } from "react";
+import {
+    DashboardSidebarContainer,
+    RouteLink,
+    SidebarTitle,
+    ToggleButton,
+    BiHomeCircleIcon,
+    BiBookmarksIcon,
+    BiLogoBloggericon,
+    BiLogoAlgoliaIcon,
+    CiSettingsIcon,
+    BiSolidChevronLeftIcon,
+    BiSolidChevronRighIcon,
+    UserProfile,
+    UserProfileDescription,
+    BiSolidCircleIcon,
+} from "./SidebarElements";
+import { useDispatch, useSelector } from "react-redux";
+import { getAllUserDetails } from "../../../features/userDetail/userDetailSlice";
+import { cdnContentImagesUrl } from "../../../features/apiUrl";
 
 const Sidebar = () => {
+    const dispatch = useDispatch();
+    const { userDetails } = useSelector((state) => state.userDetail);
+    const { user } = useSelector((state) => state.auth);
+
+    useEffect(() => {
+        if (user) dispatch(getAllUserDetails());
+    }, [dispatch, user]);
+
+    const userDetail = userDetails?.find((userDetail) => userDetail?.user === user?._id);
+    const avatar = cdnContentImagesUrl("/user/" + (userDetail?.avatar || "avatarDummy.png"));
+
+    const [isOpen, setIsOpen] = useState(true);
+
+    const sidebarItems = [
+        { to: "/", icon: <BiHomeCircleIcon />, label: "Home" },
+        { to: "/dashboard/bookmarks", icon: <BiBookmarksIcon />, label: "Bookmarks" },
+        { to: "/dashboard/blogs", icon: <BiLogoBloggericon />, label: "User Blogs" },
+        { to: "/dashboard/goals", icon: <BiLogoAlgoliaIcon />, label: "Goals" },
+        { to: "/dashboard/settings/profile", icon: <CiSettingsIcon />, label: "Settings" },
+    ];
+
     return (
-        <DashboardSidebarContainer>
+        <DashboardSidebarContainer isOpen={isOpen}>
+            <UserProfile isOpen={isOpen}>
+                <div className="user-profile-image">
+                    <img src={avatar} alt={userDetail?.username + " Profile Picture"} />
+                    <BiSolidCircleIcon />
+                </div>
+                <UserProfileDescription isOpen={isOpen}>
+                    <h3>{userDetail?.name}</h3>
+                    <span>@{userDetail?.username}</span>
+                </UserProfileDescription>
+
+                <ToggleButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+                    {isOpen ? <BiSolidChevronLeftIcon /> : <BiSolidChevronRighIcon />}
+                </ToggleButton>
+            </UserProfile>
+
             <section className={"heading"}>
-                <p> Dashboard</p>
+                <p> {isOpen && "Dashboard"}</p>
             </section>
-            <RouteLink to={"/"}>
-                <SidebarTitle> Home </SidebarTitle>
-            </RouteLink>
-            <RouteLink to={"/dashboard/bookmarks"}>
-                <SidebarTitle> Bookmarks </SidebarTitle>
-            </RouteLink>
-            <RouteLink to={"/dashboard/blogs"}>
-                <SidebarTitle> User Blogs </SidebarTitle>
-            </RouteLink>
-            <RouteLink to={"/dashboard/goals"}>
-                <SidebarTitle> Goals </SidebarTitle>
-            </RouteLink>
-            <RouteLink to={"/dashboard/settings/profile"}>
-                <SidebarTitle> Settings </SidebarTitle>
-            </RouteLink>
-
-            {/* <SidebarTitle> Analytics </SidebarTitle> */}
-            {/* <SidebarTitle> Settings </SidebarTitle> */}
+
+            {sidebarItems.map((item) => (
+                <RouteLink key={item.to} to={item.to} isOpen={isOpen}>
+                    {item.icon}
+                    {isOpen && <SidebarTitle isOpen={isOpen}> {item.label} </SidebarTitle>}
+                </RouteLink>
+            ))}
         </DashboardSidebarContainer>
     );
 };

src/components/Dashboard/Sidebar/SidebarElements.jsx

@@ -1,13 +1,22 @@
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
+import {
+    BiHomeCircle,
+    BiBookmarks,
+    BiLogoBlogger,
+    BiLogoAlgolia,
+    BiCog,
+    BiSolidChevronLeft,
+    BiSolidChevronRight,
+    BiSolidCircle
+} from "react-icons/bi";
 
 export const DashboardSidebarContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding: 25px;
+    padding: 24px;
     background: #090909;
-    width: 300px;
     height: 100vh;
     border-radius: 10px;
     color: #f5f5f5;
@@ -17,22 +26,109 @@ export const DashboardSidebarContainer = styled.div`
     // stick to the top
     position: sticky;
     top: 0;
+    width: ${props => props.isOpen ? '40%' : '10%'}; 
+    transition: width 0.3s ease-in-out;
+
+    .heading {
+        margin-top: 32px;
+        margin-bottom: 0;
+    }
 `;
 
-export const RouteLink = styled(Link)`
+export const RouteLink = styled(NavLink)`
     text-decoration: none;
     color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    height: 80px;
+    padding-left: ${props => props.isOpen ? '24px' : '0'}; 
+    transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
+    width: 100%;
+    justify-content: ${props => props.isOpen ? 'unset' : 'center'};
+
+    &:hover, &.active {
+        background: ${props => props.isOpen ? '#4422EF' : ''};
+        color: ${props => props.isOpen ? '' : '#4422EF'};
+    }
 `;
 
 export const SidebarTitle = styled.h2`
     color: #f5f5f5;
     font-size: 1.2rem;
     font-weight: 600;
     cursor: pointer;
-    transition: 0.3s ease-in-out;
-    &:hover {
-        transition: 0.3s ease-in-out;
-        color: #f5f5f5;
-        scale: 1.1;
+    opacity: ${props => props.isOpen ? '1' : '0'};
+    transition: opacity 0.6s ease-in-out 0.2s;
+    margin-bottom: 0;
+    margin-left: 16px;
+    `;
+
+
+export const ToggleButton = styled.div`
+    cursor: pointer;
+    position: absolute;
+    right: ${props => props.isOpen ? '-32px' : '-68px'};
+    background-color: ${props => props.isOpen ? '#000000' : '#090909'};
+    padding: 12px;
+    border-radius: ${props => props.isOpen ? '12px' : '0 12px 12px 0'};
+`;
+
+export const UserProfile = styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    height: 120px;
+    margin-left: ${props => props.isOpen ? '0' : '8px'};
+
+    .user-profile-image {
+        position: relative;
+
+        img {
+         width: 80px;
+         height: 80px;
+         border-radius: 100%;
+         object-fit: cover;
+        }
+    }
+
+    h3 {
+        margin-bottom: 2px;
+        font-weight: 800;
     }
 `;
+
+export const UserProfileDescription = styled.div`
+    margin-left: ${props => props.isOpen ? '16px' : '0'};
+    opacity: ${props => props.isOpen ? '1' : '0'};
+    transform: ${props => props.isOpen ? 'translateX(0)' : 'translateX(-100%)'};
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    visibility: ${props => props.isOpen ? 'visible' : 'hidden'}; 
+    width: ${props => props.isOpen ? 'unset' : '0'};
+`;
+
+const createStyledIcon = (IconComponent) => {
+    return styled(IconComponent)`
+        width: 28px;
+        height: 28px;
+    `;
+}
+
+
+export const BiSolidCircleIcon = styled(BiSolidCircle)`
+    width: 20px;
+    height: 20px;
+    color: #B9F62E;
+    position: absolute;
+    bottom: 4px;
+    right: 6px;
+`;
+
+export const BiHomeCircleIcon = createStyledIcon(BiHomeCircle);
+export const BiBookmarksIcon = createStyledIcon(BiBookmarks);
+export const BiLogoBloggericon = createStyledIcon(BiLogoBlogger);
+export const BiLogoAlgoliaIcon = createStyledIcon(BiLogoAlgolia);
+export const CiSettingsIcon = createStyledIcon(BiCog);
+export const BiSolidChevronLeftIcon = createStyledIcon(BiSolidChevronLeft);
+export const BiSolidChevronRighIcon = createStyledIcon(BiSolidChevronRight);

src/components/Header/Dropdowns/Dropdown.jsx

@@ -43,6 +43,11 @@ export default function Dropdown({
             to: "/thecyberspeak",
             desc: "Engage, Learn, Inspire. Speak or Attend and Be part of our Weekly Cyber Community Event.",
         },
+        {
+            title: "TheCyberEvents",
+            to: "/timeline-events",
+            desc: "Checkout our Weekly Cyber Community Event and start booking on our calender",
+        },
     ];
 
     const resources = [

src/components/Opportunities/TimeLineEvent/BookingListItem.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { BookingItem } from "./BookingListItemsElement";
+
+import {
+    AiFillClockCircleIcon,
+    MdLocationOnIcon,
+    BiChevronDownIcon,
+    BiSolidChevronUpIcon,
+    AiFillExclamationCircleIcon,
+} from "./TimeLineEventsElement";
+
+export const BookingItemList = (
+    { data, todayString, dayName, actions, openBookingIndex, setOpenBookingIndex, index }
+) => {
+
+    return (
+        <BookingItem isRequestedEvent={data.reschedule} key={index}>
+            <div className={data.date === todayString ? "date today-date" : "date"}>
+                <p>{dayName}</p>
+                <p className="date-digit">
+                    {data.date.split("-")[2]}
+                </p>
+            </div>
+            <div className="time-line">
+                <div className="time-line-detail">
+                    <AiFillClockCircleIcon />
+                    <p>{data.startTime} - {data.endTime}</p>
+                    {data.reschedule &&
+                        <div className="time-line-request">
+                            <AiFillExclamationCircleIcon />
+                        </div>
+                    }
+                </div>
+
+                <div className="time-line-detail">
+                    <MdLocationOnIcon />
+                    <p className="text-over-flow">{data.location}</p>
+                </div>
+            </div>
+            <div className="details">
+                <div>
+                    <p>{data.eventName}</p>
+                    <div className="details-profile">
+                        {data.participants.map((participant, pIndex) => (
+                            <img src={participant.profileURL} alt={participant.name} key={pIndex} />
+                        ))}
+                    </div>
+                </div>
+                {data.reschedule &&
+                    <div className="details-request">
+                        15:30 - 16:00 requested
+                    </div>}
+            </div>
+            <div className="action">
+                <div onClick={() => setOpenBookingIndex(openBookingIndex === index ? null : index)}
+                    className="action-edit">
+                    <p>Edit</p>
+                    {openBookingIndex === index ? <BiSolidChevronUpIcon /> : <BiChevronDownIcon />}
+                </div>
+
+                {openBookingIndex === index && (
+                    <div className="action-dropdown">
+                        {actions.map(({ icon: Icon, text }) => (
+                            <div onClick={() => setOpenBookingIndex(openBookingIndex === index ? null : index)}
+                                className="action-dropdown-list" key={text}>
+                                <Icon />
+                                <p>{text}</p>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </BookingItem>
+    );
+};