Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Forntend/sidebar #8

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Forntend/sidebar #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7d7a1e
change list sidebar
DevanoAlif22 Nov 20, 2024
d501c14
change more list sidebar
DevanoAlif22 Nov 20, 2024
80eeff1
edit sidebar
DevanoAlif22 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 62 additions & 50 deletions src/containers/LeftSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,69 @@
import routes from '../routes/sidebar'
import { NavLink, Routes, Link , useLocation} from 'react-router-dom'
import SidebarSubmenu from './SidebarSubmenu';
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
import { useDispatch } from 'react-redux';
import routes from "../routes/sidebar";
import { NavLink, Routes, Link, useLocation } from "react-router-dom";
import SidebarSubmenu from "./SidebarSubmenu";
import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
import { useDispatch } from "react-redux";

function LeftSidebar(){
const location = useLocation();
function LeftSidebar() {
const location = useLocation();

const dispatch = useDispatch()
const dispatch = useDispatch();

const close = (e) => {
document.getElementById("left-sidebar-drawer").click();
};

const close = (e) => {
document.getElementById('left-sidebar-drawer').click()
}
return (
<div className="drawer-side z-30 ">
<label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label>
<ul className="menu pt-2 w-80 bg-base-100 min-h-full text-base-content">
<button
className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden"
onClick={() => close()}
>
<XMarkIcon className="h-5 inline-block w-5" />
</button>

return(
<div className="drawer-side z-30 ">
<label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label>
<ul className="menu pt-2 w-80 bg-base-100 min-h-full text-base-content">
<button className="btn btn-ghost bg-base-300 btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute lg:hidden" onClick={() => close()}>
<XMarkIcon className="h-5 inline-block w-5"/>
</button>

<li className="mb-2 font-semibold text-xl">

<Link to={'/app/welcome'}><img className="mask mask-squircle w-10" src="/logo192.png" alt="DashWind Logo"/>DashWind</Link> </li>
{
routes.map((route, k) => {
return(
<li className="" key={k}>
{
route.submenu ?
<SidebarSubmenu {...route}/> :
(<NavLink
end
to={route.path}
className={({isActive}) => `${isActive ? 'font-semibold bg-base-200 ' : 'font-normal'}`} >
{route.icon} {route.name}
{
location.pathname === route.path ? (<span className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
aria-hidden="true"></span>) : null
}
</NavLink>)
}

</li>
)
})
}

</ul>
</div>
)
<li className="mb-2 font-semibold text-xl">
<Link to={"/app/welcome"}>
<img
className="mask mask-squircle w-10"
src="/logo192.png"
alt="DashWind Logo"
/>
DashWind
</Link>{" "}
</li>
{routes.map((route, k) => {
return (
<li className="" key={k}>
{route.submenu ? (
<SidebarSubmenu {...route} />
) : (
<NavLink
end
to={route.path}
className={({ isActive }) =>
`${
isActive ? "font-semibold bg-base-200 " : "font-normal"
}`
}
>
{route.icon} {route.name}
{location.pathname === route.path ? (
<span
className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-yellow-200"
aria-hidden="true"
></span>
) : null}
</NavLink>
)}
</li>
);
})}
</ul>
</div>
);
}

export default LeftSidebar
export default LeftSidebar;
127 changes: 74 additions & 53 deletions src/containers/RightSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,81 @@
import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon'
import { useDispatch, useSelector } from 'react-redux'
import NotificationBodyRightDrawer from '../features/common/components/NotificationBodyRightDrawer'
import { closeRightDrawer } from '../features/common/rightDrawerSlice'
import { RIGHT_DRAWER_TYPES } from '../utils/globalConstantUtil'
import CalendarEventsBodyRightDrawer from '../features/calendar/CalendarEventsBodyRightDrawer'
import XMarkIcon from "@heroicons/react/24/solid/XMarkIcon";
import { useDispatch, useSelector } from "react-redux";
import NotificationBodyRightDrawer from "../features/common/components/NotificationBodyRightDrawer";
import { closeRightDrawer } from "../features/common/rightDrawerSlice";
import { RIGHT_DRAWER_TYPES } from "../utils/globalConstantUtil";
import CalendarEventsBodyRightDrawer from "../features/calendar/CalendarEventsBodyRightDrawer";

function RightSidebar() {
const { isOpen, bodyType, extraObject, header } = useSelector(
(state) => state.rightDrawer
);
const dispatch = useDispatch();

function RightSidebar(){
const close = (e) => {
dispatch(closeRightDrawer(e));
};

const {isOpen, bodyType, extraObject, header} = useSelector(state => state.rightDrawer)
const dispatch = useDispatch()
return (
<div
className={
" fixed overflow-hidden z-20 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out " +
(isOpen
? " transition-opacity opacity-100 duration-500 translate-x-0 "
: " transition-all delay-500 opacity-0 translate-x-full ")
}
>
<section
className={
"w-80 md:w-96 right-0 absolute bg-base-100 h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform " +
(isOpen ? " translate-x-0 " : " translate-x-full ")
}
>
<div className="relative pb-5 flex flex-col h-full">
{/* Header */}
<div className="navbar flex pl-4 pr-4 shadow-md ">
<button
className="float-left btn btn-circle btn-outline btn-sm"
onClick={() => close()}
>
<XMarkIcon className="h-5 w-5" />
</button>
<h1>Halo</h1>
<span className="ml-2 font-bold text-xl">{header}</span>
</div>

const close = (e) => {
dispatch(closeRightDrawer(e))
}



return(
<div className={" fixed overflow-hidden z-20 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out " + (isOpen ? " transition-opacity opacity-100 duration-500 translate-x-0 " : " transition-all delay-500 opacity-0 translate-x-full ")}>

<section className={ "w-80 md:w-96 right-0 absolute bg-base-100 h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform " + (isOpen ? " translate-x-0 " : " translate-x-full ")}>

<div className="relative pb-5 flex flex-col h-full">

{/* Header */}
<div className="navbar flex pl-4 pr-4 shadow-md ">
<button className="float-left btn btn-circle btn-outline btn-sm" onClick={() => close()}>
<XMarkIcon className="h-5 w-5"/>
</button>
<span className="ml-2 font-bold text-xl">{header}</span>
</div>


{/* ------------------ Content Start ------------------ */}
<div className="overflow-y-scroll pl-4 pr-4">
<div className="flex flex-col w-full">
{/* Loading drawer body according to different drawer type */}
{
{
[RIGHT_DRAWER_TYPES.NOTIFICATION] : <NotificationBodyRightDrawer {...extraObject} closeRightDrawer={close}/>,
[RIGHT_DRAWER_TYPES.CALENDAR_EVENTS] : <CalendarEventsBodyRightDrawer {...extraObject} closeRightDrawer={close}/>,
[RIGHT_DRAWER_TYPES.DEFAULT] : <div></div>
}[bodyType]
}

</div>
</div>
{/* ------------------ Content End ------------------ */}
</div>

</section>

<section className=" w-screen h-full cursor-pointer " onClick={() => close()} ></section>
{/* ------------------ Content Start ------------------ */}
<div className="overflow-y-scroll pl-4 pr-4">
<div className="flex flex-col w-full">
{/* Loading drawer body according to different drawer type */}
{
{
[RIGHT_DRAWER_TYPES.NOTIFICATION]: (
<NotificationBodyRightDrawer
{...extraObject}
closeRightDrawer={close}
/>
),
[RIGHT_DRAWER_TYPES.CALENDAR_EVENTS]: (
<CalendarEventsBodyRightDrawer
{...extraObject}
closeRightDrawer={close}
/>
),
[RIGHT_DRAWER_TYPES.DEFAULT]: <div></div>,
}[bodyType]
}
</div>
</div>
{/* ------------------ Content End ------------------ */}
</div>
)
</section>

<section
className=" w-screen h-full cursor-pointer "
onClick={() => close()}
></section>
</div>
);
}

export default RightSidebar
export default RightSidebar;
99 changes: 53 additions & 46 deletions src/containers/SidebarSubmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,56 @@
import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
import {useEffect, useState} from 'react'
import { Link, useLocation } from 'react-router-dom'


function SidebarSubmenu({submenu, name, icon}){
const location = useLocation()
const [isExpanded, setIsExpanded] = useState(false)


/** Open Submenu list if path found in routes, this is for directly loading submenu routes first time */
useEffect(() => {
if(submenu.filter(m => {return m.path === location.pathname})[0])setIsExpanded(true)
}, [])

return (
<div className='flex flex-col'>

{/** Route header */}
<div className='w-full block' onClick={() => setIsExpanded(!isExpanded)}>
{icon} {name}
<ChevronDownIcon className={'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ' + (isExpanded ? 'rotate-180' : '')}/>
</div>

{/** Submenu list */}
<div className={` w-full `+ (isExpanded ? "" : "hidden")}>
<ul className={`menu menu-compact`}>
{
submenu.map((m, k) => {
return(
<li key={k}>
<Link to={m.path}>
{m.icon} {m.name}
{
location.pathname == m.path ? (<span className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
aria-hidden="true"></span>) : null
}
</Link>
</li>
)
})
}
</ul>
</div>
</div>
import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
import { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";

function SidebarSubmenu({ submenu, name, icon }) {
const location = useLocation();
const [isExpanded, setIsExpanded] = useState(false);

/** Open Submenu list if path found in routes, this is for directly loading submenu routes first time */
useEffect(() => {
if (
submenu.filter((m) => {
return m.path === location.pathname;
})[0]
)
setIsExpanded(true);
}, []);

return (
<div className="flex flex-col">
{/** Route header */}
<div className="w-full block" onClick={() => setIsExpanded(!isExpanded)}>
{icon} {name}
<ChevronDownIcon
className={
"w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all " +
(isExpanded ? "rotate-180" : "")
}
/>
</div>

{/** Submenu list */}
<div className={` w-full ` + (isExpanded ? "" : "hidden")}>
<ul className={`menu menu-compact`}>
{submenu.map((m, k) => {
return (
<li key={k}>
<Link to={m.path}>
{m.icon} {m.name}
{location.pathname == m.path ? (
<span
className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
aria-hidden="true"
></span>
) : null}
</Link>
</li>
);
})}
</ul>
</div>
</div>
);
}

export default SidebarSubmenu
export default SidebarSubmenu;