Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 3x 10x 10x 10x | import { useState } from 'react'
import Link from 'next/link'
const Sidenav = ({ t }) => {
console.log(t)
const [open, setOpen] = useState(false)
return (
<div
className={`fixed transition-all duration-500 ${
open ? 'left-0' : 'left-[-260px]'
}`}
>
<button
aria-label="toggle side menu"
className="w-8 h-8 absolute left-[265px] space-y-1 bg-gray-900 p-2 cursor-pointer rounded hover:bg-gray-800"
onClick={(e) => setOpen(!open)}
>
<div
className={`w-4 h-0.5 bg-gray-200 ${
open ? 'absolute top-[15px] left-[9px] rotate-45' : ''
}`}
></div>
<div className={`w-4 h-0.5 bg-gray-200 ${open ? 'hidden' : ''}`}></div>
<div
className={`w-4 h-0.5 bg-gray-200 ${
open ? 'absolute top-[11px] left-[9px] -rotate-45' : ''
}`}
></div>
</button>
<div className="p-2 flex flex-col gap-4 fixed w-64 min-h-full bg-[#373737] text-white text-xl tracking-wide">
<Link href="/home">
<a className="hover:bg-periwinkle px-2">{t.home}</a>
</Link>
<label
tabIndex={0}
htmlFor="about-us"
className="flex flex-col px-2 cursor-pointer"
onKeyDown={(e) =>
e.key === 'Enter'
? (document.getElementById('about-us').checked ^= 1)
: null
}
>
<div className="flex items-center hover:bg-periwinkle">
{t.aboutUs} <span className="text-[9px] ml-2">▼</span>
</div>
<input
id="about-us"
type="checkbox"
className="items-center peer hidden"
></input>
<Link href="">
<a className="hidden peer-checked:block hover:bg-periwinkle px-5">
{t.ourCoaches}
</a>
</Link>
<Link href="">
<a className="hidden peer-checked:block hover:bg-periwinkle px-5">
{t.serviceCatalogue}
</a>
</Link>
</label>
<label
tabIndex={0}
htmlFor="dojo-assessment"
className="flex flex-col px-2 cursor-pointer"
onKeyDown={(e) =>
e.key === 'Enter'
? (document.getElementById('dojo-assessment').checked ^= 1)
: null
}
>
<div className="flex items-center hover:bg-periwinkle">
{t.dojoAssessment} <span className="text-[9px] ml-2">▼</span>
</div>
<input
id="dojo-assessment"
type="checkbox"
className="items-center peer hidden"
></input>
<Link href="">
<a className="hidden peer-checked:block hover:bg-periwinkle px-5">
{t.beltSystem}
</a>
</Link>
</label>
<label
tabIndex={0}
htmlFor="dojo-engagement"
className="flex flex-col px-2 cursor-pointer"
onKeyDown={(e) =>
e.key === 'Enter'
? (document.getElementById('dojo-engagement').checked ^= 1)
: null
}
>
<div className="flex items-center hover:bg-periwinkle">
{t.dojoEngagement} <span className="text-[9px] ml-2">▼</span>
</div>
<input
id="dojo-engagement"
type="checkbox"
className="items-center peer hidden"
></input>
<Link href="">
<a className="hidden peer-checked:block hover:bg-periwinkle px-5">
{t.startTeam}
</a>
</Link>
</label>
<Link href="">
<a className="hover:bg-periwinkle px-2">{t.events}</a>
</Link>
<Link href="">
<a className="hover:bg-periwinkle px-2">{t.tools}</a>
</Link>
<Link href="">
<a className="hover:bg-periwinkle px-2">{t.faq}</a>
</Link>
<Link href="">
<a className="hover:bg-periwinkle px-2">{t.contactUs}</a>
</Link>
</div>
</div>
)
}
export default Sidenav
|