1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / Account / Dashboard /
Filename : SidebarLayout.jsx
back
'use client'

import Image from 'next/image'
import { useState } from 'react'
import LogoWhite from '@/app/assets/images/logo-white.png'
import ProfilePlaceholder from '@/app/assets/images/profile-placeholder.jpg'
// import SideNavButton from '@/components/Common/SideNavButton'
import Link from 'next/link'
import cn from '@/helpers/cn'

const Sidebar = ({ children }) => {
    const [isDrawerOpen, setIsDrawerOpen] = useState(false)

    const toggleDrawer = () => {
        setIsDrawerOpen(!isDrawerOpen)
    }

    return (
        <>
            <div
                className={cn('w-full h-[100dvh] overflow-y-auto no-scrollbar block md:row-span-2 fixed md:relative top-0 left-0 transition-[visibility] duration-500 z-[9999]', {
                    'collapse md:visible': !isDrawerOpen,
                    visible: isDrawerOpen,
                })}>
                <div
                    className={cn('bg-white h-[100dvh] p-4 no-scrollbar max-w-[300px] overflow-y-auto overflow-x-hidden break-words relative z-[100] transition-transform duration-500', {
                        '-translate-x-[calc(100%+60px)] md:translate-x-0': !isDrawerOpen,
                        'translate-x-0': isDrawerOpen,
                    })}>
                    <Link href='/' className='flex justify-center items-center p-2'>
                        <Image src={LogoWhite} className='w-4/5' />
                    </Link>

                    <div className='flex flex-col'>{children}</div>
                </div>
                <div
                    className={cn('w-full h-full block md:hidden bg-black bg-opacity-60 fixed top-0 left-0 transition-opacity duration-500 z-[99]', {
                        'opacity-0': !isDrawerOpen,
                        'opacity-100': isDrawerOpen,
                    })}
                    onClick={() => toggleDrawer(old => !old)}></div>
            </div>
            <div className='w-full h-14 col-start-1 md:col-start-2 p-3 flex justify-between items-center'>
                <button
                    className='z-50 bg-gray-50 hover:bg-gray-100 border border-transparent focus:bg-gray-100 focus:border-gray-200 text-white p-2 rounded md:hidden flex flex-col justify-center items-center gap-[3px] h-[40px]'
                    onClick={toggleDrawer}>
                    <i className='block w-7 h-1 bg-primary rounded-full'></i>
                    <i className='block w-7 h-1 bg-primary rounded-full'></i>
                    <i className='block w-7 h-1 bg-primary rounded-full'></i>
                </button>
                <a href='/' target='_blank' className='block text-sm py-[5px] px-5 border text-primary border-primary-light hover:bg-primary-lighter rounded-md'>
                    Visit Website
                </a>
                <div className='relative'>
                    <button className='flex justify-center items-center gap-2 cursor-pointer peer/pdd1'>
                        <span className='text-primary font-semibold text-sm'>User Name</span>
                        <Image src={ProfilePlaceholder} sizes='100%' className='w-10 aspect-square bg-gray-500 rounded-full' />
                    </button>
                    <div className='absolute top-full right-0 min-w-max w-[200px] bg-white rounded-md border border-gray-200 shadow-md z-50 peer-focus/pdd1:top-[calc(100%+10px)] hover:top-[calc(100%+10px)] peer-focus/pdd1:opacity-100 hover:opacity-100 peer-focus/pdd1:visible hover:visible opacity-0 collapse transition-[opacity,visibility,top]'>
                        <div class='card-body p-0 py-2'>
                            <Link href='#' class='block text-gray-600 px-4 py-[6px] hover:bg-primary-light hover:text-white'>
                                Profile
                            </Link>
                            <Link href='#' class='block text-gray-600 px-4 py-[6px] hover:bg-primary-light hover:text-white'>
                                Settings
                            </Link>
                        </div>
                        <Link href='/' class='block text-sm text-center py-2 mb-2 mx-2 border rounded-lg border-primary-light text-primary hover:bg-primary-light hover:text-white'>
                            Logout
                        </Link>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Sidebar