Skip to content

Commit f1d02c9

Browse files
TR-04TR-04
committed
removed space above navbar for all pages
1 parent c768fea commit f1d02c9

File tree

6 files changed

+75
-101
lines changed

6 files changed

+75
-101
lines changed

‎frontend/src/components/Event/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import EventGallery from './EventsGallery';
55

66
const Event = () => {
77
return (
8-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
8+
<section className="pb-8 xl:px-24 sm:px-10 px-5" id="events">
99
<div className="text-center my-10">
1010
<h1 className="font-bold text-6xl">EVENTS</h1>
1111
</div>

‎frontend/src/components/Hamburger.tsx‎

Lines changed: 71 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,78 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
2+
import { Menu, X } from 'lucide-react';
23
import Link from 'next/link';
3-
import { motion } from 'framer-motion';
4-
import {
5-
DropdownMenu,
6-
DropdownMenuContent,
7-
DropdownMenuItem,
8-
DropdownMenuTrigger,
9-
} from "@/components/ui/dropdown-menu";
104

11-
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-
}, []);
5+
export default function SideMenu() {
6+
const [isOpen, setIsOpen] = useState(false);
227

238
return (
24-
<DropdownMenu modal={false} open={isOpenDropdown} onOpenChange={setIsOpenDropdown}>
25-
<DropdownMenuTrigger asChild>
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" }}
51-
/>
52-
</div>
53-
</button>
54-
</DropdownMenuTrigger>
55-
56-
<DropdownMenuContent
57-
align="end"
58-
className="w-44 bg-[#3977F9] border-none shadow-lg rounded-2xl text-white dropdown-content overflow-hidden"
9+
<div className=''>
10+
<button
11+
className="p-2 z-50 relative"
12+
onClick={() => setIsOpen(!isOpen)}
5913
>
60-
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">
62-
<Link href="/about" className="w-full block">
63-
About Us
64-
</Link>
65-
</DropdownMenuItem>
66-
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">
68-
<Link href="/events" className="w-full block">
69-
Events
70-
</Link>
71-
</DropdownMenuItem>
72-
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">
74-
<Link href="/resources" className="w-full block">
75-
Resources
76-
</Link>
77-
</DropdownMenuItem>
78-
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">
80-
<Link href="/sponsors" className="w-full block">
81-
Sponsors
82-
</Link>
83-
</DropdownMenuItem>
84-
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">
86-
<Link href="/contact-us" className="w-full block">
87-
Contact Us
88-
</Link>
89-
</DropdownMenuItem>
90-
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">
92-
<a
93-
target="_blank"
94-
href="https://csesoc-merch.square.site/"
95-
className="w-full block"
96-
>
97-
Merch
98-
</a>
99-
</DropdownMenuItem>
100-
</DropdownMenuContent>
101-
</DropdownMenu>
14+
<Menu className="w-6 h-6 text-white" />
15+
</button>
16+
17+
{isOpen && (
18+
<>
19+
{/* Backdrop overlay */}
20+
<div
21+
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
22+
onClick={() => setIsOpen(false)}
23+
/>
24+
25+
{/* Sidebar */}
26+
<div className="fixed right-0 top-0 w-80 h-screen bg-[#3977F9] z-50">
27+
<button
28+
onClick={() => setIsOpen(false)}
29+
className="absolute top-[45px] right-[20px] text-white p-2"
30+
>
31+
<X className="w-6 h-6" />
32+
</button>
33+
34+
<div className="p-6 pt-20">
35+
<div className="space-y-4">
36+
<Link href="/about" onClick={() => setIsOpen(false)}>
37+
<div className="text-white text-lg p-3">
38+
About Us
39+
</div>
40+
</Link>
41+
42+
<Link href="/events" onClick={() => setIsOpen(false)}>
43+
<div className="text-white text-lg p-3">
44+
Events
45+
</div>
46+
</Link>
47+
48+
<Link href="/resources" onClick={() => setIsOpen(false)}>
49+
<div className="text-white text-lg p-3">
50+
Resources
51+
</div>
52+
</Link>
53+
54+
<Link href="/sponsors" onClick={() => setIsOpen(false)}>
55+
<div className="text-white text-lg p-3">
56+
Sponsors
57+
</div>
58+
</Link>
59+
60+
<Link href="/contact-us" onClick={() => setIsOpen(false)}>
61+
<div className="text-white text-lg p-3">
62+
Contact Us
63+
</div>
64+
</Link>
65+
66+
<a href="https://csesoc-merch.square.site/" target="_blank" onClick={() => setIsOpen(false)}>
67+
<div className="text-white text-lg p-3">
68+
Merch
69+
</div>
70+
</a>
71+
</div>
72+
</div>
73+
</div>
74+
</>
75+
)}
76+
</div>
10277
);
10378
}

‎frontend/src/components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44

55
const Layout = ({ children }: { children: React.ReactNode }) => {
66
return (
7-
<section className="flex flex-col min-h-screen justify-between py-8 relative">
7+
<section className="flex flex-col min-h-screen justify-between pb-8 relative">
88
<Navbar />
99

1010
<div className='xl:px-24 md:px-10 px-5 '>

‎frontend/src/components/PageBody.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
const PageBody = ({ children }: { children: React.ReactNode }) => {
44
return (
55
<div>
6-
<section className="py-8 xl:px-24 sm:px-10 px-5">
6+
<section className="pb-8 xl:px-24 sm:px-10 px-5">
77
{children}
88
</section>
99
</div>

‎frontend/src/pages/events.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function EventsPage() {
1111
<title>Events | CSESoc UNSW</title>
1212
</TabTitle>
1313

14-
<section className="flex flex-col min-h-screen justify-between py-8 relative">
14+
<section className="flex flex-col min-h-screen justify-between pb-8 relative">
1515
<Navbar />
1616

1717
<div className='xl:px-24 md:px-10 px-5 '>

‎frontend/src/pages/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default function HomePage() {
1313
</TabTitle>
1414

1515
<section>
16-
<div className="h-8"></div>
1716

1817
<Navbar />
1918

0 commit comments

Comments
 (0)