Skip to content

Commit 27027bb

Browse files
towfiq-ultowfiq-ul
committed
fix in navbar and contact card
 - menu for mobile - navbar name and titile - hide contact item name in mobile
1 parent c6972a9 commit 27027bb

File tree

4 files changed

+1475
-1434
lines changed

4 files changed

+1475
-1434
lines changed

‎v2/src/components/navbar/navbar.module.css‎

Lines changed: 159 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,230 +1,232 @@
11
.navbar {
2-
position: fixed;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
z-index: 1000;
7-
padding: var(--space-4) 0;
8-
transition: all 0.3s var(--ease-out);
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
z-index: 1000;
7+
padding: var(--space-4) 0;
8+
transition: all 0.3s var(--ease-out);
99
}
1010

1111
.navbar.scrolled {
12-
background: rgba(255, 255, 255, 0.1);
13-
backdrop-filter: blur(6px);
14-
-webkit-backdrop-filter: blur(6px);
15-
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
16-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
12+
background: rgba(255, 255, 255, 0.1);
13+
backdrop-filter: blur(6px);
14+
-webkit-backdrop-filter: blur(6px);
15+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
16+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
1717
}
1818

1919
@media (prefers-color-scheme: dark) {
20-
.navbar.scrolled {
21-
background: rgba(0, 0, 0, 0.3);
22-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
23-
}
20+
.navbar.scrolled {
21+
background: rgba(0, 0, 0, 0.3);
22+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
23+
}
2424
}
2525

2626
.navContainer {
27-
max-width: 1400px;
28-
margin: 0 auto;
29-
padding: 0 var(--space-6);
30-
display: flex;
31-
justify-content: space-between;
32-
align-items: center;
27+
max-width: 1400px;
28+
margin: 0 auto;
29+
padding: 0 var(--space-6);
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: center;
3333
}
3434

3535
.logo {
36-
display: flex;
37-
flex-direction: column;
38-
align-items: flex-start;
39-
gap: 2px;
40-
background: none;
41-
border: none;
42-
cursor: pointer;
43-
padding: 0;
44-
color: inherit;
45-
transition: transform 0.2s var(--ease);
36+
display: flex;
37+
flex-direction: column;
38+
align-items: flex-start;
39+
gap: 2px;
40+
background: none;
41+
border: none;
42+
cursor: pointer;
43+
padding: 0;
44+
color: inherit;
45+
transition: transform 0.2s var(--ease);
4646
}
4747

4848
.logo:hover {
49-
transform: scale(1.05);
49+
transform: scale(1.05);
5050
}
5151

5252
.logoText {
53-
font-size: var(--font-size-3);
54-
font-weight: 700;
55-
color: var(--color-accent-11);
56-
letter-spacing: -0.02em;
53+
font-size: var(--font-size-3);
54+
font-weight: 700;
55+
color: var(--color-accent-11);
56+
letter-spacing: -0.02em;
5757
}
5858

5959
.logoSubtext {
60-
font-size: var(--font-size-0);
61-
color: var(--color-neutral-11);
62-
font-weight: 500;
60+
font-size: var(--font-size-0);
61+
color: var(--color-neutral-11);
62+
font-weight: 500;
6363
}
6464

6565
.navLinks {
66-
display: flex;
67-
gap: var(--space-2);
68-
align-items: center;
66+
display: flex;
67+
gap: var(--space-2);
68+
align-items: center;
6969
}
7070

7171
.navLink {
72-
display: flex;
73-
align-items: center;
74-
gap: var(--space-2);
75-
padding: var(--space-2) var(--space-4);
76-
border-radius: var(--radius-3);
77-
background: rgba(255, 255, 255, 0.1);
78-
backdrop-filter: blur(10px);
79-
-webkit-backdrop-filter: blur(10px);
80-
border: 1px solid rgba(255, 255, 255, 0.2);
81-
color: var(--color-neutral-12);
82-
font-size: var(--font-size-1);
83-
font-weight: 500;
84-
cursor: pointer;
85-
transition: all 0.3s var(--ease);
86-
position: relative;
87-
overflow: hidden;
72+
display: flex;
73+
align-items: center;
74+
gap: var(--space-2);
75+
padding: var(--space-2) var(--space-4);
76+
border-radius: var(--radius-3);
77+
background: rgba(255, 255, 255, 0.1);
78+
backdrop-filter: blur(10px);
79+
-webkit-backdrop-filter: blur(10px);
80+
border: 1px solid rgba(255, 255, 255, 0.2);
81+
color: var(--color-neutral-12);
82+
font-size: var(--font-size-1);
83+
font-weight: 500;
84+
cursor: pointer;
85+
transition: all 0.3s var(--ease);
86+
position: relative;
87+
overflow: hidden;
8888
}
8989

9090
@media (prefers-color-scheme: dark) {
91-
.navLink {
92-
background: rgba(0, 0, 0, 0.2);
93-
border: 1px solid rgba(255, 255, 255, 0.1);
94-
}
91+
.navLink {
92+
background: rgba(0, 0, 0, 0.2);
93+
border: 1px solid rgba(255, 255, 255, 0.1);
94+
}
9595
}
9696

9797
.navLink::before {
98-
content: "";
99-
position: absolute;
100-
top: 0;
101-
left: -100%;
102-
width: 100%;
103-
height: 100%;
104-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
105-
transition: left 0.5s var(--ease);
98+
content: "";
99+
position: absolute;
100+
top: 0;
101+
left: -100%;
102+
width: 100%;
103+
height: 100%;
104+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
105+
transition: left 0.5s var(--ease);
106106
}
107107

108108
.navLink:hover::before {
109-
left: 100%;
109+
left: 100%;
110110
}
111111

112112
.navLink:hover {
113-
background: var(--color-accent-9);
114-
color: var(--color-accent-contrast);
115-
border-color: var(--color-accent-9);
116-
transform: translateY(-2px);
117-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
113+
background: var(--color-accent-9);
114+
color: var(--color-accent-contrast);
115+
border-color: var(--color-accent-9);
116+
transform: translateY(-2px);
117+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
118118
}
119119

120120
.navLink.active {
121-
background: transparent;
122-
color: var(--color-accent-11);
123-
/*border-color: var(--color-accent-9);*/
124-
position: relative;
121+
background: transparent;
122+
color: var(--color-accent-11);
123+
/*border-color: var(--color-accent-9);*/
124+
position: relative;
125125
}
126126

127127
.navLink.active::after {
128-
content: "";
129-
position: absolute;
130-
bottom: -2px;
131-
left: 50%;
132-
transform: translateX(-50%);
133-
width: 80%;
134-
height: 3px;
135-
background: linear-gradient(
136-
90deg,
137-
var(--color-accent-11),
138-
var(--color-accent-9),
139-
var(--color-accent-7),
140-
var(--color-accent-9),
141-
var(--color-accent-11)
142-
);
143-
background-size: 200% 100%;
144-
animation: gradientFlow 4s ease-in-out infinite;
145-
border-radius: var(--radius-2);
128+
content: "";
129+
position: absolute;
130+
bottom: -2px;
131+
left: 50%;
132+
transform: translateX(-50%);
133+
width: 80%;
134+
height: 3px;
135+
background: linear-gradient(
136+
90deg,
137+
var(--color-accent-11),
138+
var(--color-accent-9),
139+
var(--color-accent-7),
140+
var(--color-accent-9),
141+
var(--color-accent-11)
142+
);
143+
background-size: 200% 100%;
144+
animation: gradientFlow 4s ease-in-out infinite;
145+
border-radius: var(--radius-2);
146146
}
147147

148148
@keyframes gradientFlow {
149-
0%,
150-
100% {
151-
background-position: 0% 50%;
152-
}
153-
50% {
154-
background-position: 100% 50%;
155-
}
149+
0%,
150+
100% {
151+
background-position: 0% 50%;
152+
}
153+
50% {
154+
background-position: 100% 50%;
155+
}
156156
}
157157

158158
.navIcon {
159-
width: 18px;
160-
height: 18px;
159+
width: 18px;
160+
height: 18px;
161161
}
162162

163163
.mobileMenuToggle {
164-
display: none;
165-
background: rgba(255, 255, 255, 0.1);
166-
backdrop-filter: blur(10px);
167-
-webkit-backdrop-filter: blur(10px);
168-
border: 1px solid rgba(255, 255, 255, 0.2);
169-
padding: var(--space-2);
170-
border-radius: var(--radius-2);
171-
color: var(--color-neutral-12);
172-
cursor: pointer;
173-
transition: all 0.3s var(--ease);
164+
display: none;
165+
background: rgba(255, 255, 255, 0.1);
166+
backdrop-filter: blur(10px);
167+
-webkit-backdrop-filter: blur(10px);
168+
border: 1px solid rgba(255, 255, 255, 0.2);
169+
padding: var(--space-2);
170+
border-radius: var(--radius-2);
171+
color: var(--color-neutral-12);
172+
cursor: pointer;
173+
transition: all 0.3s var(--ease);
174174
}
175175

176176
@media (prefers-color-scheme: dark) {
177-
.mobileMenuToggle {
178-
background: rgba(0, 0, 0, 0.2);
179-
border: 1px solid rgba(255, 255, 255, 0.1);
180-
}
177+
.mobileMenuToggle {
178+
background: rgba(0, 0, 0, 0.2);
179+
border: 1px solid rgba(255, 255, 255, 0.1);
180+
}
181181
}
182182

183183
.mobileMenuToggle:hover {
184-
background: var(--color-accent-9);
185-
color: var(--color-accent-contrast);
186-
border-color: var(--color-accent-9);
184+
background: var(--color-accent-9);
185+
color: var(--color-accent-contrast);
186+
border-color: var(--color-accent-9);
187187
}
188188

189189
@media (max-width: 768px) {
190-
.mobileMenuToggle {
191-
display: block;
192-
}
193-
194-
.navLinks {
195-
position: fixed;
196-
top: 80px;
197-
left: 0;
198-
right: 0;
199-
flex-direction: column;
200-
background: rgba(255, 255, 255, 0.95);
201-
backdrop-filter: blur(20px);
202-
-webkit-backdrop-filter: blur(20px);
203-
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
204-
padding: var(--space-5);
205-
gap: var(--space-3);
206-
transform: translateY(-100%);
207-
opacity: 0;
208-
pointer-events: none;
209-
transition: all 0.3s var(--ease-out);
210-
}
190+
.mobileMenuToggle {
191+
display: block;
192+
}
211193

212-
@media (prefers-color-scheme: dark) {
213194
.navLinks {
214-
background: rgba(0, 0, 0, 0.95);
215-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
195+
width: 50%;
196+
position: absolute;
197+
justify-content: flex-end;
198+
position: fixed;
199+
top: 70px;
200+
left: 0;
201+
right: 0;
202+
flex-direction: column;
203+
background: rgba(255, 255, 255, 0.95);
204+
backdrop-filter: blur(20px);
205+
-webkit-backdrop-filter: blur(20px);
206+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
207+
padding: var(--space-5);
208+
gap: var(--space-3);
209+
transform: translateY(100%)translateX(100%);
210+
opacity: 0;
211+
pointer-events: none;
212+
transition: all 0.3s var(--ease-out);
213+
}
214+
215+
@media (prefers-color-scheme: dark) {
216+
.navLinks {
217+
background: rgba(0, 0, 0, 0.95);
218+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
219+
}
216220
}
217-
}
218221

219-
.navLinks.mobileOpen {
220-
transform: translateY(0);
222+
.mobileOpen {
223+
transform: translateY(0)translateX(100%);
221224
opacity: 0.90;
222225
pointer-events: all;
223-
width: 50%;
224226
}
225227

226-
.navLink {
227-
width: 100%;
228-
justify-content: center;
229-
}
228+
.navLink {
229+
width: 100%;
230+
justify-content: flex-start;
231+
}
230232
}

0 commit comments

Comments
 (0)