Skip to content

Comitted Home,Sidebar and Loader #14

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Comitted Home,Sidebar and Loader #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 8 additions & 2 deletions beneficiary-app/src/common/Loader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@


const Loader = () => {
return (
<div className="flex h-screen items-center justify-center bg-white dark:bg-black">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
<div className="flex h-screen items-center justify-center bg-gray-900">
<div className="flex space-x-2">
<div className="w-5 h-5 bg-gray-300 rounded-full animate-bounce"></div>
<div className="w-5 h-5 bg-gray-300 rounded-full animate-bounce"></div>
<div className="w-5 h-5 bg-gray-300 rounded-full animate-bounce"></div>
</div>
</div>
);
};
Expand Down
225 changes: 82 additions & 143 deletions beneficiary-app/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,32 @@ import React, { useEffect, useRef, useState } from 'react';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import Logo from '../images/swasth_logo.png';
import SidebarLinkGroup from './SidebarLinkGroup';
// import _ from 'lodash';
// import { useDispatch, useSelector } from 'react-redux';
// import { getParticipant } from '../api/RegistryService';
// import { RootState } from '../store';

interface SidebarProps {
sidebarOpen: boolean;
setSidebarOpen: (arg: boolean) => void;
}

const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
const Sidebar = ({ sidebarOpen, setSidebarOpen }) => {
const location = useLocation();
const { pathname } = location;

const trigger = useRef<any>(null);
const sidebar = useRef<any>(null);
const trigger = useRef(null);
const sidebar = useRef(null);

const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
const [sidebarExpanded, setSidebarExpanded] = useState(
storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
);

// close on click outside
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!sidebar.current || !trigger.current) return;
if (
!sidebarOpen ||
sidebar.current.contains(target) ||
trigger.current.contains(target)
)
return;
const clickHandler = ({ target }) => {
if (!sidebarOpen || !sidebar.current || !trigger.current) return;
if (sidebar.current.contains(target) || trigger.current.contains(target)) return;
setSidebarOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
});

// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }: KeyboardEvent) => {
if (!sidebarOpen || keyCode !== 27) return;
const keyHandler = ({ keyCode }) => {
if (keyCode !== 27 || !sidebarOpen) return;
setSidebarOpen(false);
};
document.addEventListener('keydown', keyHandler);
Expand All @@ -52,25 +36,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {

useEffect(() => {
localStorage.setItem('sidebar-expanded', sidebarExpanded.toString());
if (sidebarExpanded) {
document.querySelector('body')?.classList.add('sidebar-expanded');
} else {
document.querySelector('body')?.classList.remove('sidebar-expanded');
}
document.querySelector('body')?.classList.toggle('sidebar-expanded', sidebarExpanded);
}, [sidebarExpanded]);

const navigate = useNavigate();

return (
<aside
ref={sidebar}
className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
className={`absolute left-0 top-0 z-9999 flex flex-col h-screen w-72.5 overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
>
{/* <!-- SIDEBAR HEADER --> */}
<div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
<div className="flex items-center justify-between px-6 py-5.5 lg:py-6.5 gap-2">
<NavLink to="/home">
<img className="hidden w-40 dark:block" src={Logo} alt="Logo" />
<img className="w-40 hidden dark:block" src={Logo} alt="Logo" />
<img className="w-40 dark:hidden" src={Logo} alt="Logo" />
</NavLink>

Expand All @@ -86,7 +64,6 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
Expand All @@ -96,124 +73,86 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</svg>
</button>
</div>
{/* <!-- SIDEBAR HEADER --> */}

<div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
{/* <!-- Sidebar Menu --> */}
<div className="flex flex-col overflow-y-auto no-scrollbar duration-300 ease-linear">
<nav className="mt-5 py-4 px-4 lg:mt-9 lg:px-6">
{/* <!-- Menu Group --> */}
<div>
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
MENU
</h3>
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">MENU</h3>

<ul className="mb-6 flex flex-col gap-1.5">
{/* <!-- Menu Item Dashboard --> */}
<SidebarLinkGroup
activeCondition={
pathname === '/home' || pathname.includes('home')
}
>
{() => {
return (
<React.Fragment>
<div
className={`group relative flex items-center gap-2.5 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === '/home' || pathname.includes('home')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={() => {
navigate('/home')
setSidebarOpen(!sidebarOpen);
}}
>
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
fill="none"
stroke="white"
strokeWidth={4}
strokeMiterlimit={10}
points="32,3 2,33 11,33 11,63 23,63 23,47 39,47 39,63 51,63 51,33 62,33 "
/>
</svg>
Home
</div>
</React.Fragment>
);
activeCondition={pathname === '/home' || pathname.includes('home')}
onClick={() => {
navigate('/home');
setSidebarOpen(false);
}}
</SidebarLinkGroup>
<SidebarLinkGroup
activeCondition={
pathname === '/profile' || pathname.includes('profile')
icon={
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
fill="none"
stroke="white"
strokeWidth={4}
strokeMiterlimit={10}
points="32,3 2,33 11,33 11,63 23,63 23,47 39,47 39,63 51,63 51,33 62,33 "
/>
</svg>
}
>
{() => {
return (
<React.Fragment>
<div
className={`group relative flex items-center gap-2.5 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === '/profile' ||
pathname.includes('profile')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={() => {
navigate('/profile')
setSidebarOpen(!sidebarOpen);
}}
>
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.0002 7.79065C11.0814 7.79065 12.7689 6.1594 12.7689 4.1344C12.7689 2.1094 11.0814 0.478149 9.0002 0.478149C6.91895 0.478149 5.23145 2.1094 5.23145 4.1344C5.23145 6.1594 6.91895 7.79065 9.0002 7.79065ZM9.0002 1.7719C10.3783 1.7719 11.5033 2.84065 11.5033 4.16252C11.5033 5.4844 10.3783 6.55315 9.0002 6.55315C7.62207 6.55315 6.49707 5.4844 6.49707 4.16252C6.49707 2.84065 7.62207 1.7719 9.0002 1.7719Z"
fill=""
/>
<path
d="M10.8283 9.05627H7.17207C4.16269 9.05627 1.71582 11.5313 1.71582 14.5406V16.875C1.71582 17.2125 1.99707 17.5219 2.3627 17.5219C2.72832 17.5219 3.00957 17.2407 3.00957 16.875V14.5406C3.00957 12.2344 4.89394 10.3219 7.22832 10.3219H10.8564C13.1627 10.3219 15.0752 12.2063 15.0752 14.5406V16.875C15.0752 17.2125 15.3564 17.5219 15.7221 17.5219C16.0877 17.5219 16.3689 17.2407 16.3689 16.875V14.5406C16.2846 11.5313 13.8377 9.05627 10.8283 9.05627Z"
fill=""
/>
</svg>
Profile
</div>
</React.Fragment>
);
label="Home"
/>
<SidebarLinkGroup
activeCondition={pathname === '/profile' || pathname.includes('profile')}
onClick={() => {
navigate('/profile');
setSidebarOpen(false);
}}
</SidebarLinkGroup>
<SidebarLinkGroup activeCondition={false}>
{() => {
return (
<React.Fragment>
<div
className={`group relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === '/logout' ||
pathname.includes('logout')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={() => {
navigate("/")
setSidebarOpen(!sidebarOpen)
}}
>
<svg className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke="white"
strokeWidth={1}
strokeMiterlimit={10} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
Logout
</div>
</React.Fragment>
);
icon={
<svg
className="fill-current"
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.0002 7.79065C11.0814 7.79065 12.7689 6.1594 12.7689 4.1344C12.7689 2.1094 11.0814 0.478149 9.0002 0.478149C6.91895 0.478149 5.23145 2.1094 5.23145 4.1344C5.23145 6.1594 6.91895 7.79065 9.0002 7.79065ZM9.0002 1.7719C10.3783 1.7719 11.5033 2.84065 11.5033 4.16252C11.5033 5.4844 10.3783 6.55315 9.0002 6.55315C7.62207 6.55315 6.49707 5.4844 6.49707 4.16252C6.49707 2.84065 7.62207 1.7719 9.0002 1.7719Z"
fill=""
/>
<path
d="M10.8283 9.05627H7.17207C4.16269 9.05627 1.71582 11.5313 1.71582 14.5406V16.875C1.71582 17.2125 1.99707 17.5219 2.3627 17.5219C2.72832 17.5219 3.00957 17.2407 3.00957 16.875V14.5406C3.00957 12.2344 4.89394 10.3219 7.22832 10.3219H10.8564C13.1627 10.3219 15.0752 12.2063 15.0752 14.5406V16.875C15.0752 17.2125 15.3564 17.5219 15.7221 17.5219C16.0877 17.5219 16.3689 17.2407 16.3689 16.875V14.5406C16.2846 11.5313 13.8377 9.05627 10.8283 9.05627Z"
fill=""
/>
</svg>
}
label="Profile"
/>
<SidebarLinkGroup
activeCondition={false}
onClick={() => {
navigate('/');
setSidebarOpen(false);
}}
</SidebarLinkGroup>
icon={
<svg
className="h-6 w-6 text-red-500 fill-current"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="white"
strokeWidth={1}
strokeMiterlimit={10}
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
}
label="Logout"
/>
</ul>
</div>
</nav>
Expand Down
Loading