Untitled

import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'

export default function Header() {
    const [isSidebarOpen,SetIsSidebarOpen] = useState(false);
  return (
    <>
        <header id="desktopHeader" className="w-100 header-area">
            <div className="w-100 d-flex justify-content-between desktopHeaderWrapper container">
                <div className="desktopHeaderLogoWrapper">
                    <Link href="/">
                        <Image className="d-block" src="/img/logo.svg" width={45} height={45} alt="Sheba Platform Logo" />
                    </Link>
                </div>
                <div className="d-flex">
                    <nav className="d-flex flex-column justify-content-center">
                        <ul className="d-flex desktopHeaderUl mb-0">
                            <li className=""><Link className="" href="/#folderPageHeader1">Home</Link></li>
                            <li className=""><Link className="" href="/#folderPageHeader2">Story</Link></li>
                            <li className=""><Link className="" href="/#folderPageHeader3">Business</Link></li>
                            <li className=""><Link className="" href="/#folderPageHeader1">Feature</Link></li>
                            <li className=""><Link className="" href="/#folderPageHeader2">Video Library</Link></li>
                            <li className=""><Link className="" href="/#folderPageHeader3">Campaign</Link></li>
                        </ul>
                    </nav>
                    <div className="d-flex">
                        <Link className="loginButton" href="#">Login / SignUp</Link>
                        <p className="sidebarToggleBar d-none" onClick={() => SetIsSidebarOpen(!isSidebarOpen)} href="#"><i className="fa fa-list" style={{ 'fontSize': '22px'}}></i></p>
                    </div>
                </div>
            </div>
        </header>

        <div className={`sidebarOverlay ${isSidebarOpen ? 'd-block': ''}`} onClick={() => SetIsSidebarOpen(!isSidebarOpen)}></div>

        <div className={`sidebar ${isSidebarOpen ? 'sidebarToggle': ''}`} >
            <div className="sidebarContentWrapper">
                <div className="w-100 sidebarTop" style={{ 'textAlign':'end', paddingTop:'20px'}}>
                    <Link href="/"><img className="d-block" src="/img/logo.svg"
                        width="" height="30px" alt="Sheba Platform Logo" /></Link>    
                </div>
                <div className="w-100 sidebarMiddle">
                    <ul>
                        <li><i className="fa fa-home"></i><span>Home</span> </li>
                        <li><i className="fa fa-earth"></i><span>Story</span> </li>
                        <li><i className="fa fa-briefcase"></i><span>Business</span> </li>
                        <li><i className="fa fa-plus"></i><span>Feature</span> </li>
                        <li><i className="fa fa-video"></i><span>Video Library</span> </li>
                        <li><i className="fa fa-dolly"></i><span>Campaign</span> </li>
                        <li style={{ 'border': 'none'}}><i className="fa fa-sign-out"></i><span>Logout</span> </li>
                    </ul>
                </div>
                
            </div>
        </div>
    </>
  )
}