1
- import React from "react" ;
2
- import { AnimatePresence , motion , useCycle } from "framer-motion" ;
3
- import Link from "next/link" ;
4
-
5
- export default function Hamburger ( ) {
1
+ import React from 'react' ;
2
+ import { AnimatePresence , motion , useCycle } from 'framer-motion' ;
3
+ import Link from 'next/link' ;
6
4
5
+ export default function Hamburger ( ) {
7
6
const [ isOpen , toggleOpen ] = useCycle ( false , true ) ;
8
7
9
8
return (
10
- < button onClick = { ( ) => { toggleOpen ( ) } } className = "focus:outline-none" >
9
+ < button
10
+ onClick = { ( ) => {
11
+ toggleOpen ( ) ;
12
+ } }
13
+ className = "focus:outline-none"
14
+ >
11
15
< svg
12
16
className = "w-6 h-6"
13
17
fill = "none"
@@ -30,13 +34,21 @@ export default function Hamburger () {
30
34
exit = { { opacity : 0 , y : - 10 } }
31
35
transition = { { duration : 0.2 } }
32
36
className = "absolute top-16 right-0 bg-[#3977F9] p-4 shadow-lg w-40 rounded-2xl"
33
- style = { { height : " 85vh" } }
37
+ style = { { height : ' 85vh' } }
34
38
>
35
39
< ul >
36
- < li className = "py-2" > < Link href = { "#about" } > About Us</ Link > </ li >
37
- < li className = "py-2" > < Link href = { "#events" } > Events</ Link > </ li >
38
- < li className = "py-2" > < Link href = { "/resources" } > Resources</ Link > </ li >
39
- < li className = "py-2" > < Link href = { "#sponsors" } > Sponsors</ Link > </ li >
40
+ < li className = "py-2" >
41
+ < Link href = { '#about' } > About Us</ Link >
42
+ </ li >
43
+ < li className = "py-2" >
44
+ < Link href = { '#events' } > Events</ Link >
45
+ </ li >
46
+ < li className = "py-2" >
47
+ < Link href = { '/resources' } > Resources</ Link >
48
+ </ li >
49
+ < li className = "py-2" >
50
+ < Link href = { '#sponsors' } > Sponsors</ Link >
51
+ </ li >
40
52
</ ul >
41
53
</ motion . div >
42
54
) }
0 commit comments