Skip to content

Instantly share code, notes, and snippets.

@sulaimanwebdev

sulaimanwebdev/BasicDesignsiderbar.js

Created October 3, 2023 16:58
Show Gist options
  • Save sulaimanwebdev/7fc35e2f63d9c316c85e36b1b9d167cb to your computer and use it in GitHub Desktop.
Save sulaimanwebdev/7fc35e2f63d9c316c85e36b1b9d167cb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
BasicDesignsiderbar.js
import React from 'react'
import logodocument from '../../assets/images/logodocument.svg'
import { Link , useLocation} from 'react-router-dom'
export default function BasicDesignsiderbar({basicdesign ,setbasicdesign }) {
const { pathname } = useLocation();
return (
<>
<div onClick={()=>setbasicdesign(false)} className= {` ${ basicdesign ? "navbar-white" : "" } lg:hidden`} ></div>
<div className={` bg-white p-3 ${ basicdesign ? " w-[260px] " : " w-[60px] sm:w-[80px] " } z-10 rounded-[8px] sticky top-5 mt-3 h-[calc(100vh-30px)] transition-[width] `} >
<ul className= {` ${ basicdesign ? " " : " w-full justify-center " } inline-flex items-center mt-5`} >
<li>
<img src={logodocument} className=' w-[33px] h-[38px] ' />
</li>
{ basicdesign &&
<li className=' ml-3 ' >
<h3 className=' f-f-r text-black text-2xl ' >Basis Of Design</h3>
</li>
}
</ul>
<div className="border border-primary-light my-3 "></div>
{ basicdesign &&
<ul className=' inline-flex w-full items-center' >
<li className=' w-full ' >
<div className="w-full bg-gray-200 rounded-full h-1.5 ">
<div className="bg-primary h-1.5 rounded-full " style={{width: "45%"}}></div>
</div>
</li>
<li className=' ml-2 f-f-r text-black text-sm ' >
50%
</li>
</ul>
}
<div className=' bg-white-light sm:p-4 my-4 rounded-[8px] h-[53%] overflow-y-scroll w-full ' >
<ul>
<Link to="/documentoverview" >
<li>
{/* button started */}
<button className={` ${ basicdesign ? " px-3 " : " w-[26px] " } ${pathname== "/documentoverview" ? "bg-primary-vlight" : ""} w-full rounded-[8px] h-[40px] f-f-m text-black text-base` } >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Document Overview
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/sitediscussion" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] px-3 " } ${pathname== "/sitediscussion" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Site Discussion
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/setbackasumption" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/setbackasumption" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Setback Notes
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/shadinganalysis" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/shadinganalysis" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Shading Analysis
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/electricSizing" >
<li className=' mt-2' >
{/* button started */}
<button className={`${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/electricSizing" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Electrical Sizing
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/designsasupmtion" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/designsasupmtion" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Design Parameters
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/civildesign" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/civildesign" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Civil Design
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/temperaturedesign" >
<li className=' mt-2' >
{/* button started */}
<button className= {` ${basicdesign ? " px-3 w-[209px] " : " w-[26px] pl-[3px] " } ${pathname== "/temperaturedesign" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-primary rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Temperature Design
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/designdeviations" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/designdeviations" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-black-darkest rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Design Deviations
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/monitoringoverview" >
<li className=' mt-2' >
{/* button started */}
<button className= {` ${basicdesign ? " px-3 w-[209px] " : " w-[26px] pl-[3px] " } ${pathname== "/monitoringoverview" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight rounded-[8px] h-[40px] f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-black-darkest rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Monitoring Overview
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
<Link to="/designlife" >
<li className=' mt-2' >
{/* button started */}
<button className={` ${basicdesign ? " px-3 " : " w-[26px] pl-[3px] " } ${pathname== "/designlife" ? "bg-primary-vlight" : ""} hover:bg-primary-vlight w-full rounded-[8px] h-[40px] px-3 f-f-m text-black text-left text-base`} >
<ul className=' inline-flex items-center mt-1 ' >
<li>
<div className=' w-[20px] h-[20px] bg-black-darkest rounded-full ' >
</div>
</li>
{ basicdesign &&
<li className=' ml-3' >
Design Life
</li>
}
</ul>
</button>
{/* button edned */}
</li>
</Link>
</ul>
</div>
{ basicdesign && <>
<div className=' absolute w-[91%] bottom-[27px] ' >
<Link to="/preview" >
<button class=" mt-5 relative border bg-primary w-full text-center h-[48px] rounded-[8px] f-f-r text-lg text-white ">Preview</button>
</Link>
<button class=" mt-3 relative border border-primary w-full text-center h-[48px] rounded-[8px] f-f-r text-lg text-primary ">Save Changes</button>
</div>
</>
}
{/* open close started */}
<div onClick={()=>setbasicdesign(!basicdesign)} className=' w-[28px] h-[28px] bg-white rounded-[8px] text-center absolute top-[40px] right-[-13px] cursor-pointer shadow-lg ' >
<svg data-accordion-icon fill="#000000" className={` ${basicdesign ? "rotate-[-90deg]" : "rotate-[90deg]" } transition-rotate w-3 h-3 relative top-2 shrink-0 ml-auto mr-auto `} fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</div>
{/* open close ended */}
</div>
</>
)
}
Raw
Mainsection.js
import React,{useState} from 'react'
import BasicDesignsiderbar from '../DocumentOverview/BasicDesignsiderbar'
import Documentoverview from './Documentoverview'
export default function Mainsection() {
const [basicdesign, setbasicdesign] = useState(true)
return (
<>
<div className='relative mt-20 lg:mt-0 ' >
<ul className=' inline-flex w-full ' >
<li>
<BasicDesignsiderbar basicdesign={basicdesign} setbasicdesign={setbasicdesign} />
</li>
<li className='w-full' >
<div className= {`py-10 w-11/12 mx-auto ${basicdesign ? " " : " " } transition-[pl]`} >
<Documentoverview basicdesign={basicdesign} setbasicdesign={setbasicdesign} />
</div>
</li>
</ul>
</div>
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment