Skip to content

Commit 9c95916

Browse files
Houssien-ZeineddineHoussien-Zeineddine
authored
Merge pull request #227 from Houssien-Zeineddine/sidebar-component
Sidebar component
2 parents 1429d06 + 02ea240 commit 9c95916

File tree

14 files changed

+1065
-197
lines changed

14 files changed

+1065
-197
lines changed

‎client/src/components/Dialogue/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Dialogue = ({
1212
if (!isOpen) return null;
1313

1414
return (
15-
<div className="dialogue-overlay">
15+
<div className="dialogue-backdrop">
1616
<div className="dialogue-content">
1717
<div className="dialogue-header">
1818
<h2>{title}</h2>

‎client/src/components/Dialogue/style.css‎

Lines changed: 144 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,155 @@
1-
.dialogue-overlay {
2-
position: fixed;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
bottom: 0;
7-
background-color: rgba(0, 0, 0, 0.5);
8-
display: flex;
9-
justify-content: center;
1+
.dialogue-backdrop {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
background-color: rgba(0, 0, 0, 0.5);
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
z-index: 9999 !important;
12+
overflow: hidden;
13+
}
14+
15+
.dialogue-content {
16+
background-color: white;
17+
border-radius: 12px;
18+
width: 600px;
19+
max-height: 80vh;
20+
display: flex;
21+
flex-direction: column;
22+
overflow: hidden;
23+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
24+
animation: dialogueEnter 0.3s ease-out;
25+
}
26+
27+
.dialogue-header {
28+
padding: 1.5rem;
29+
font-size: var(--font-size-header-4);
30+
color: var(--primary-color);
31+
font-weight: var(--font-weight-bold);
32+
border-bottom: 1px solid #eee;
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
}
37+
38+
.dialogue-header h2 {
39+
margin: 0;
40+
font-size: inherit;
41+
}
42+
43+
.close-button {
44+
background: none;
45+
border: none;
46+
font-size: 1.5rem;
47+
color: var(--primary-color);
48+
cursor: pointer;
49+
opacity: 0.7;
50+
transition: opacity 0.2s;
51+
}
52+
53+
.close-button:hover {
54+
opacity: 1;
55+
}
56+
57+
.dialogue-body {
58+
padding: 1.5rem;
59+
color: var(--primary-color);
60+
overflow-y: auto;
61+
flex-grow: 1;
62+
max-height: 60vh;
63+
}
64+
65+
.dialogue-footer {
66+
padding: 1.5rem;
67+
border-top: 1px solid #eee;
68+
display: flex;
69+
justify-content: flex-end;
70+
}
71+
72+
.yes-no-btn-wrapper {
73+
display: flex;
74+
gap: 1rem;
75+
}
76+
77+
@keyframes dialogueEnter {
78+
from {
79+
opacity: 0;
80+
transform: translateY(-20px);
81+
}
82+
83+
to {
84+
opacity: 1;
85+
transform: translateY(0);
86+
}
87+
}
88+
89+
/* Responsive styles */
90+
@media screen and (max-width: 767px) {
91+
.dialogue-backdrop {
1092
align-items: center;
11-
z-index: 1000;
1293
}
13-
94+
1495
.dialogue-content {
15-
background-color: white;
16-
padding: 2rem;
17-
border-radius: 10px;
18-
width: 50%;
19-
max-width: 600px;
20-
max-height: 80vh;
21-
overflow-y: auto;
22-
color: var(--primary-color);
23-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
24-
}
25-
96+
width: 90%;
97+
max-width: 450px;
98+
max-height: 85vh;
99+
margin: 10vh auto;
100+
}
101+
26102
.dialogue-header {
27-
display: flex;
28-
justify-content: space-between;
29-
align-items: center;
30-
margin-bottom: 1.5rem;
31-
border-bottom: 1px solid var(--border-color);
32-
padding-bottom: 1rem;
103+
padding: 1.25rem;
104+
font-size: 1.2rem;
105+
}
106+
107+
.close-button {
108+
font-size: 1.3rem;
109+
padding: 0.3rem;
110+
}
111+
112+
.dialogue-body {
113+
padding: 1.25rem;
114+
max-height: 65vh;
33115
}
34-
35-
.dialogue-header h2 {
36-
margin: 0;
37-
font-size: var(--font-size-header-4);
116+
117+
.dialogue-footer {
118+
padding: 1.25rem;
119+
}
120+
}
121+
122+
@media screen and (max-width: 480px) {
123+
.dialogue-backdrop {
124+
padding: 0 0.5rem;
38125
}
39-
126+
127+
.dialogue-content {
128+
width: 95%;
129+
max-height: 90vh;
130+
margin: 5vh auto;
131+
}
132+
133+
.dialogue-header {
134+
padding: 1rem;
135+
font-size: 1.1rem;
136+
}
137+
40138
.close-button {
41-
background: none;
42-
border: none;
43-
font-size: 1.5rem;
44-
cursor: pointer;
45-
color: var(--primary-color);
139+
font-size: 1.2rem;
46140
}
47-
141+
48142
.dialogue-body {
49-
display: flex;
50-
flex-direction: column;
51-
gap: 1rem;
143+
padding: 1rem;
144+
font-size: 0.95rem;
52145
}
53-
146+
54147
.dialogue-footer {
55-
display: flex;
56-
justify-content: flex-end;
57-
margin-top: 1rem;
58-
}
148+
padding: 1rem;
149+
}
150+
151+
.yes-no-btn-wrapper {
152+
width: 100%;
153+
justify-content: space-between;
154+
}
155+
}

‎client/src/components/Navbar/style.css‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@
7878

7979
.nav-link.active a {
8080
font-weight: bold;
81-
8281
border-bottom: 2px solid currentColor;
8382
padding-bottom: 4px;
8483
}
@@ -99,7 +98,7 @@
9998
background: none;
10099
border: none;
101100
padding: 0;
102-
z-index: 1002;
101+
z-index: 1020;
103102
}
104103

105104
.hamburger span {
@@ -130,10 +129,28 @@
130129
.hamburger {
131130
display: block;
132131
transform: scale(0.9);
132+
position: relative;
133+
width: 30px;
134+
height: 30px;
133135
}
134136

135137
.hamburger span {
136138
margin: 4px 0;
139+
position: absolute;
140+
left: 0;
141+
width: 25px;
142+
}
143+
144+
.hamburger span:nth-child(1) {
145+
top: 8px;
146+
}
147+
148+
.hamburger span:nth-child(2) {
149+
top: 16px;
150+
}
151+
152+
.hamburger span:nth-child(3) {
153+
top: 24px;
137154
}
138155

139156
.nav-items {
@@ -144,10 +161,17 @@
144161
height: 100vh;
145162
background-color: var(--primary-color);
146163
flex-direction: column;
147-
justify-content: center;
148-
padding: 2rem;
164+
justify-content: flex-start;
165+
padding: 4.5rem 2rem 2rem 2rem;
149166
transition: all 0.3s ease-in-out;
150167
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
168+
z-index: 1010;
169+
}
170+
171+
.hamburger.active {
172+
position: fixed;
173+
top: 1.5rem;
174+
right: 1.5rem;
151175
}
152176

153177
.navbar-logo {
@@ -186,15 +210,17 @@
186210
}
187211

188212
.hamburger.active span:nth-child(1) {
189-
transform: rotate(45deg) translate(6px, 6px);
213+
transform: rotate(45deg);
214+
top: 14px;
190215
}
191216

192217
.hamburger.active span:nth-child(2) {
193218
opacity: 0;
194219
}
195220

196221
.hamburger.active span:nth-child(3) {
197-
transform: rotate(-45deg) translate(7px, -7px);
222+
transform: rotate(-45deg);
223+
top: 14px;
198224
}
199225
}
200226

@@ -212,9 +238,14 @@
212238
transform: scale(0.8);
213239
}
214240

241+
.hamburger.active {
242+
top: 1.2rem;
243+
right: 1.2rem;
244+
}
245+
215246
.nav-items {
216247
width: 250px;
217-
padding: 1.5rem;
248+
padding: 4rem 1.5rem 1.5rem 1.5rem;
218249
}
219250

220251
.nav-link a {
@@ -230,4 +261,9 @@
230261
padding: 0.6rem 1.2rem;
231262
font-size: 0.9rem;
232263
}
264+
265+
.mobile-trigger {
266+
bottom: 1.5rem;
267+
left: 1.5rem;
268+
}
233269
}

0 commit comments

Comments
 (0)