Skip to content

Commit 02d0cff

Browse files
TR-04TR-04
committed
added interactive animations for dropdown menu
1 parent 6881889 commit 02d0cff

File tree

2 files changed

+101
-21
lines changed

2 files changed

+101
-21
lines changed

‎frontend/src/components/Hamburger.tsx

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import Link from 'next/link';
3+
import { motion } from 'framer-motion';
34
import {
45
DropdownMenu,
56
DropdownMenuContent,
@@ -8,62 +9,86 @@ import {
89
} from "@/components/ui/dropdown-menu";
910

1011
export default function Hamburger() {
12+
const [isOpenDropdown, setIsOpenDropdown] = useState(false);
13+
14+
useEffect(() => {
15+
const handleResize = () => {
16+
setIsOpenDropdown(false);
17+
};
18+
19+
window.addEventListener('resize', handleResize);
20+
return () => window.removeEventListener('resize', handleResize);
21+
}, []);
1122

1223
return (
13-
<DropdownMenu modal={false}>
24+
<DropdownMenu modal={false} open={isOpenDropdown} onOpenChange={setIsOpenDropdown}>
1425
<DropdownMenuTrigger asChild>
15-
<button className="p-2 rounded-lg transition-all">
16-
<svg
17-
className="w-10 h-10 hover:scale-110 hover:rotate-2 transition-all"
18-
fill="none"
19-
stroke="white"
20-
viewBox="0 0 24 24"
21-
xmlns="http://www.w3.org/2000/svg"
22-
>
23-
<path strokeLinecap="round"
24-
strokeLinejoin="round"
25-
d="M4 6h16M4 12h16m-7 6h7"
26+
<button className="p-2 rounded-lg">
27+
<div className="w-10 h-10 flex flex-col justify-center items-center">
28+
<motion.div
29+
className="h-0.5 w-6 bg-white"
30+
animate={{
31+
rotate: isOpenDropdown ? 45 : 0,
32+
y: isOpenDropdown ? 2 : -4,
33+
}}
34+
transition={{ duration: 0.3, ease: "easeInOut" }}
35+
/>
36+
<motion.div
37+
className="h-0.5 w-6 bg-white"
38+
animate={{
39+
opacity: isOpenDropdown ? 0 : 1,
40+
x: isOpenDropdown ? -10 : 0,
41+
}}
42+
transition={{ duration: 0.2, ease: "easeInOut" }}
43+
/>
44+
<motion.div
45+
className="h-0.5 w-6 bg-white"
46+
animate={{
47+
rotate: isOpenDropdown ? -45 : 0,
48+
y: isOpenDropdown ? -2 : 4,
49+
}}
50+
transition={{ duration: 0.3, ease: "easeInOut" }}
2651
/>
27-
</svg>
52+
</div>
2853
</button>
2954
</DropdownMenuTrigger>
3055

3156
<DropdownMenuContent
3257
align="end"
33-
className="w-44 bg-[#3977F9] border-none shadow-lg rounded-2xl text-white"
58+
className="w-44 bg-[#3977F9] border-none shadow-lg rounded-2xl text-white dropdown-content overflow-hidden"
3459
>
3560

36-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
61+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
3762
<Link href="/about" className="w-full block">
3863
About Us
3964
</Link>
4065
</DropdownMenuItem>
4166

42-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
67+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
4368
<Link href="/events" className="w-full block">
4469
Events
4570
</Link>
4671
</DropdownMenuItem>
4772

48-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
73+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
4974
<Link href="/resources" className="w-full block">
5075
Resources
5176
</Link>
5277
</DropdownMenuItem>
5378

54-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
79+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
5580
<Link href="/sponsors" className="w-full block">
5681
Sponsors
5782
</Link>
5883
</DropdownMenuItem>
5984

60-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
85+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
6186
<Link href="/contact-us" className="w-full block">
6287
Contact Us
6388
</Link>
6489
</DropdownMenuItem>
6590

66-
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer">
91+
<DropdownMenuItem asChild className="text-white text-lg py-2 px-4 rounded-2xl focus:bg-white/10 hover:bg-white/10 cursor-pointer dropdown-item">
6792
<a
6893
target="_blank"
6994
href="https://csesoc-merch.square.site/"

‎frontend/src/styles/globals.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,58 @@ body {
2929
.hover-animate:hover {
3030
transform: scale(1.03);
3131
}
32+
33+
@keyframes expandDown {
34+
from {
35+
max-height: 0;
36+
opacity: 0;
37+
}
38+
to {
39+
max-height: auto;
40+
opacity: 1;
41+
}
42+
}
43+
44+
@keyframes smoothClose {
45+
from {
46+
max-height: auto;
47+
opacity: 1;
48+
}
49+
to {
50+
max-height: 0;
51+
opacity: 0;
52+
}
53+
}
54+
55+
@keyframes fadeInUp {
56+
from {
57+
opacity: 0;
58+
transform: translateY(-8px);
59+
}
60+
to {
61+
opacity: 1;
62+
transform: translateY(0);
63+
}
64+
}
65+
66+
.dropdown-content {
67+
animation: expandDown 1.2s ease-out;
68+
transform-origin: top;
69+
}
70+
71+
.dropdown-content[data-state="closed"] {
72+
animation: smoothClose 0.3s ease-in-out;
73+
transform-origin: top;
74+
}
75+
76+
.dropdown-item {
77+
opacity: 0;
78+
animation: fadeInUp 0.5s ease-out forwards;
79+
}
80+
81+
.dropdown-item:nth-child(1) { animation-delay: 0.1s; }
82+
.dropdown-item:nth-child(2) { animation-delay: 0.2s; }
83+
.dropdown-item:nth-child(3) { animation-delay: 0.3s; }
84+
.dropdown-item:nth-child(4) { animation-delay: 0.4s; }
85+
.dropdown-item:nth-child(5) { animation-delay: 0.5s; }
86+
.dropdown-item:nth-child(6) { animation-delay: 0.6s; }

0 commit comments

Comments
 (0)