Skip to content

Commit 98ae85c

Browse files
SUVAJIT-KARMAKARSUVAJIT-KARMAKAR
committed
component(navigation)(MS1): add sidebar for mobile; cosmetic change in globals
1 parent ac16f27 commit 98ae85c

File tree

3 files changed

+183
-29
lines changed

3 files changed

+183
-29
lines changed

‎client/src/components/General/NavigationBar/Navigation.styles.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,18 @@
66
@apply text-black rounded-xl shadow-lg border-1 p-3;
77
}
88
.MOBILE-LINKS {
9-
@apply font-semibold rounded-xl bg-white/20 shadow-lg ring-2 ring-black/10 p-3;
9+
@apply font-semibold rounded-xl bg-white/20 shadow-lg ring-2 ring-black/10 p-2;
10+
}
11+
.MOBILE-LINKS-HOVER {
12+
@apply font-semibold rounded-xl hover:bg-white/20 hover:shadow-lg hover:ring-2 hover:ring-black/10 p-2;
1013
}
1114

1215
/* Button */
1316
.BUTTON {
1417
@apply font-semibold rounded-2xl bg-white shadow-lg ring-2 px-4 py-4;
1518
}
19+
20+
/* Border */
21+
.BORDER-LEFT-CORNER-3XL {
22+
@apply border-l-3 border-white rounded-l-2xl;
23+
}

‎client/src/components/General/NavigationBar/NavigationBar.tsx

Lines changed: 113 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,129 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { NavLink, Link } from 'react-router-dom';
33

44
// ICONS
5-
import { HiMenuAlt3 } from 'react-icons/hi';
5+
import { HiMenuAlt3, HiX } from 'react-icons/hi';
66
// UTILS
77
import Logo from '../../../utils/Logo/Logo';
88
// DATA
99
import NAVIGATION_LINKS from '../../../data/NavigationLinks/NavigationLinks';
1010

1111
const NavigationBar: React.FC = () => {
12+
// STATES
13+
const [toggleSidebar, setToggleSidebar] = useState(() => false);
14+
15+
// STATE HANDLER FUNCTION
16+
const handleOpenSidebar = () => {
17+
setToggleSidebar(!toggleSidebar);
18+
};
19+
const handleCloseSidebar = () => {
20+
setToggleSidebar(false);
21+
};
22+
23+
// RENDER
1224
return (
13-
<div className="w-full h-[9vh] BG-BLACK-PRIMARY FLEX-BETWEEN PADDING">
14-
<Logo className="font-style-logo text-4xl TEXT-WHITE-PRIMARY" />
15-
{/* Desktop Navigation Bar */}
16-
<div className="hidden FLEX-CENTER-LG gap-4">
17-
<div className="DESKTOP-LINKS">
18-
<ul className="TEXT-COLOR-PRIMARY FLEX-CENTER gap-6">
19-
{NAVIGATION_LINKS.map(({ name, path }, id) => (
20-
<li key={id} className="GRAY-300 TEXT-WHITE-PRIMARY-HOVER">
21-
<NavLink
22-
to={path}
23-
className={({ isActive }) =>
24-
isActive ? 'DESKTOP-LINKS-ACTIVE BG-WHITE-PRIMARY' : ''
25-
}
26-
>
27-
{name}
28-
</NavLink>
29-
</li>
30-
))}
31-
</ul>
25+
<>
26+
<div className="FULL h-[9vh] BG-BLACK-PRIMARY FLEX-BETWEEN PADDING">
27+
<Logo className="font-style-logo text-4xl TEXT-WHITE-PRIMARY" />
28+
{/* Desktop Navigation Bar */}
29+
<div className="hidden FLEX-CENTER-LG gap-4">
30+
<div className="DESKTOP-LINKS">
31+
<ul className="TEXT-COLOR-PRIMARY FLEX-CENTER gap-6">
32+
{NAVIGATION_LINKS.map(({ name, path }, id) => (
33+
<li key={id} className="GRAY-300 TEXT-WHITE-PRIMARY-HOVER">
34+
<NavLink
35+
to={path}
36+
className={({ isActive }) =>
37+
isActive ? 'DESKTOP-LINKS-ACTIVE BG-WHITE-PRIMARY' : ''
38+
}
39+
>
40+
{name}
41+
</NavLink>
42+
</li>
43+
))}
44+
</ul>
45+
</div>
46+
<Link to="/contact-us" className="TEXT-BLACK-PRIMARY BUTTON POINTER">
47+
Contract
48+
</Link>
3249
</div>
33-
<Link to="/contact-us" className="TEXT-BLACK-PRIMARY BUTTON POINTER">
34-
Contract
35-
</Link>
50+
{/* Mobile Navigation Bar */}
51+
<button
52+
className="lg:hidden MOBILE-LINKS-HOVER POINTER"
53+
onClick={handleOpenSidebar}
54+
>
55+
<HiMenuAlt3 size={30} className="TEXT-WHITE-PRIMARY" />
56+
</button>
3657
</div>
37-
{/* Mobile Navigation Bar */}
38-
<div className="lg:hidden MOBILE-LINKS POINTER">
39-
<HiMenuAlt3 size={20} className="TEXT-WHITE-PRIMARY" />
58+
59+
{/* Mobile Sidebar Toggle with Overlay */}
60+
<div
61+
className={`FIXED inset-0 z-50 lg:hidden transition-opacity D-300 EASE ${
62+
toggleSidebar
63+
? 'opacity-100 pointer-events-auto'
64+
: 'opacity-0 pointer-events-none'
65+
}`}
66+
>
67+
{/* Backdrop */}
68+
<div
69+
className="ABSOLUTE inset-0 BG-BLACK-PRIMARY backdrop-blur-3xl transition-opacity D-300 EASE"
70+
onClick={handleCloseSidebar}
71+
/>
72+
73+
{/* Sidebar */}
74+
<div
75+
className={`ABSOLUTE BORDER-LEFT-CORNER-3XL T0 R0 h-full w-80 max-w-[85vw] BG-BLACK-PRIMARY TEXT-WHITE-PRIMARY TRANSFORM D-300 EASE ${
76+
toggleSidebar ? 'translate-x-0' : 'translate-x-full'
77+
}`}
78+
>
79+
{/* Sidebar Header */}
80+
<div className="FLEX-BETWEEN PADDING h-[9vh] border-b border-gray-500">
81+
<Logo className="font-style-logo text-3xl TEXT-WHITE-PRIMARY" />
82+
<button
83+
onClick={handleCloseSidebar}
84+
className="TEXT-WHITE-PRIMARY POINTER p-2 WHITE-20-HOVER rounded-xl COLORS D-300"
85+
>
86+
<HiX size={30} />
87+
</button>
88+
</div>
89+
90+
{/* Sidebar Content */}
91+
<div className="p-6">
92+
{/* Navigation Links */}
93+
<nav className="mb-8">
94+
<ul className="space-y-4">
95+
{NAVIGATION_LINKS.map(({ name, path }, id) => (
96+
<li key={id}>
97+
<NavLink
98+
to={path}
99+
onClick={handleCloseSidebar}
100+
className={({ isActive }) =>
101+
`BLOCK px-4 py-3 rounded-xl ALL D-300 ${
102+
isActive
103+
? 'BG-WHITE-PRIMARY TEXT-BLACK-PRIMARY SEMIBOLD'
104+
: 'TEXT-WHITE-PRIMARY WHITE-20-HOVER'
105+
}`
106+
}
107+
>
108+
{name}
109+
</NavLink>
110+
</li>
111+
))}
112+
</ul>
113+
</nav>
114+
115+
{/* Contact Button */}
116+
<Link
117+
to="/contact-us"
118+
onClick={handleCloseSidebar}
119+
className="BLOCK FULL CENTER TEXT-BLACK-PRIMARY BUTTON POINTER TRANSFROM D-300 hover:scale-105"
120+
>
121+
Contract
122+
</Link>
123+
</div>
124+
</div>
40125
</div>
41-
</div>
126+
</>
42127
);
43128
};
44129

‎client/src/global.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,47 @@
1616
.TEXT-WHITE-PRIMARY-HOVER {
1717
@apply hover:text-white;
1818
}
19+
.WHITE-20 {
20+
@apply bg-white/20;
21+
}
22+
.WHITE-20-HOVER {
23+
@apply hover:bg-white/20;
24+
}
1925
.TEXT-BLACK-PRIMARY {
2026
@apply text-black;
2127
}
2228
.GRAY-300 {
2329
@apply text-gray-300;
2430
}
2531

32+
/* FONT */
33+
.SEMIBOLD {
34+
@apply font-semibold;
35+
}
36+
2637
/* UNIVERSAL */
38+
.ABSOLUTE {
39+
@apply absolute;
40+
}
41+
.FIXED {
42+
@apply fixed;
43+
}
44+
.FULL {
45+
@apply w-full;
46+
}
47+
.BLOCK {
48+
@apply block;
49+
}
50+
51+
/* POSITION */
52+
.T0 {
53+
@apply top-0;
54+
}
55+
.R0 {
56+
@apply right-0;
57+
}
58+
59+
/* FLEX */
2760
.FLEX-CENTER {
2861
@apply flex items-center justify-center;
2962
}
@@ -37,10 +70,38 @@
3770
@apply flex items-center justify-end;
3871
}
3972

73+
/* ALIGNMENT */
74+
.CENTER {
75+
@apply text-center;
76+
}
77+
78+
/* PADDING */
4079
.PADDING {
4180
@apply px-5;
4281
}
4382

83+
/* HOVER */
4484
.POINTER {
4585
@apply hover:cursor-pointer;
4686
}
87+
88+
/* EASE MOTION */
89+
.EASE {
90+
@apply ease-in-out;
91+
}
92+
93+
/* DURATION */
94+
.D-300 {
95+
@apply duration-300;
96+
}
97+
98+
/* TRANSITION */
99+
.TRANSFORM {
100+
@apply transition-transform;
101+
}
102+
.COLORS {
103+
@apply transition-colors;
104+
}
105+
.ALL {
106+
@apply transition-all;
107+
}

0 commit comments

Comments
 (0)