53 lines
3.6 KiB
TypeScript
53 lines
3.6 KiB
TypeScript
import { HStack, Image, Text, VStack } from "@chakra-ui/react";
|
|
import React, { FC } from "react";
|
|
import { RiNotificationLine } from "react-icons/ri";
|
|
import { NavLink, useLocation, useNavigate } from "react-router-dom";
|
|
import { nav } from "../Routes/Nav";
|
|
import logo from '../assets/logo.svg';
|
|
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
|
|
import { Avatar } from "../components/ui/avatar";
|
|
|
|
const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
|
|
|
|
|
|
|
|
return (
|
|
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
|
|
|
|
<VStack zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'scroll'} >
|
|
<HStack w={'100%'} p={3} h={'8%'} justifyContent={'center'}>
|
|
<Image w={55} src={logo} />
|
|
</HStack>
|
|
<VStack w={'100%'} p={4} pt={0}>
|
|
{nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
|
|
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
|
|
<AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
|
|
<AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
|
|
<AccordionItemTrigger className="Oxygen" color={'#fff'} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
|
|
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
|
|
</AccordionItem>
|
|
</AccordionRoot>)}
|
|
</VStack>
|
|
</VStack>
|
|
<VStack gap={0} h="100%" w="85%" >
|
|
<HStack h={'8%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
|
|
<NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
|
|
<HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
|
|
<Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
|
|
<VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
|
|
<Text fontSize={'sm'} fontWeight={'bold'}>Ritesh Pandey</Text>
|
|
<Text fontSize={'xs'} >ritesh.pandey@wdimails.com</Text>
|
|
</VStack>
|
|
</HStack>
|
|
</HStack>
|
|
{children}
|
|
</VStack>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default DefaultLayout;
|