All files / components Sidenav.js

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
 
 
 
3x
10x
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react'
import Link from 'next/link'
 
const Sidenav = () => {
  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">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">
            About us <span className="text-[9px] ml-2">&#9660;</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">
              Our Coaches
            </a>
          </Link>
          <Link href="">
            <a className="hidden peer-checked:block hover:bg-periwinkle px-5">
              Service Catalogue
            </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">
            Dojo Assesment <span className="text-[9px] ml-2">&#9660;</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">
              Belt System
            </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">
            Dojo Engagement <span className="text-[9px] ml-2">&#9660;</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">
              Start team engagement
            </a>
          </Link>
        </label>
        <Link href="">
          <a className="hover:bg-periwinkle px-2">Events</a>
        </Link>
        <Link href="">
          <a className="hover:bg-periwinkle px-2">Tools &amp; Resources</a>
        </Link>
        <Link href="">
          <a className="hover:bg-periwinkle px-2">FAQ</a>
        </Link>
        <Link href="">
          <a className="hover:bg-periwinkle px-2">Contact us</a>
        </Link>
      </div>
    </div>
  )
}
 
export default Sidenav