Skip to content

Commit b100706

Browse files
lexxus0lexxus0
authored
Merge pull request #18 from GoIT-Python-Web/header
Header menu & search input
2 parents 8f4b918 + 7150b5e commit b100706

File tree

4 files changed

+189
-58
lines changed

4 files changed

+189
-58
lines changed

‎src/components/Header/Header.jsx‎

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Container from "../container/Container.jsx";
22
import Logo from "../Logo/Logo.jsx";
33
import Button from "../UI/buttons/Button.jsx";
4+
import Input from "../UI/inputs/Input.jsx";
45
import css from "./Header.module.css";
56
import { useState } from "react";
67
// import sprite from "/public/sprite.svg";
@@ -48,6 +49,7 @@ const Header = () => {
4849
<p className={css.userName}>Ім'я</p>
4950
<div className={css.settingsIcon}>⚙️</div>
5051
</div>
52+
5153
<Button
5254
size="sm"
5355
variant="primary"
@@ -58,35 +60,42 @@ const Header = () => {
5860
<span>Додати світлину</span>
5961
<img src="/public/Plus@2x.png" width={20} height={20} alt="Plus" />
6062
</Button>
61-
<nav className={`sidebar ${menuIsOpen ? "open" : ""}`}>
62-
<div className={css.sidebarHeader}>
63-
<div className={css.userIcon}></div>
64-
<p className={css.userName}>Ім'я</p>
65-
<div className={css.settingsIcon}></div>
66-
</div>
67-
<ul className={css.sidebarList}>
68-
<li className={css.sidebarItem}>
69-
<a href="#" className={css.sidebarLink}>
70-
Світлини
71-
</a>
72-
</li>
73-
<li className={css.sidebarItem}>
74-
<a href="#" className={css.sidebarLink}>
75-
Мій профіль
76-
</a>
77-
</li>
78-
<li className={css.sidebarItem}>
79-
<a href="#" className={css.sidebarLink}>
80-
Про нас
81-
</a>
82-
</li>
83-
{/* <li className={css.sidebarItem}>
63+
64+
<input className={css.searchInput} placeholder={"🔍"} />
65+
66+
{menuIsOpen ? (
67+
<nav className={css.sidebarOpen}>
68+
<div className={css.sidebarHeader}>
69+
<div className={css.userIcon}>👤</div>
70+
<p className={css.userName}>Ім'я</p>
71+
<div className={css.settingsIcon}>⚙️</div>
72+
</div>
73+
<ul className={css.sidebarList}>
74+
<li className={css.sidebarItem}>
75+
<a href="#" className={css.sidebarLink}>
76+
Світлини
77+
</a>
78+
</li>
79+
<li className={css.sidebarItem}>
80+
<a href="#" className={css.sidebarLink}>
81+
Мій профіль
82+
</a>
83+
</li>
84+
<li className={css.sidebarItem}>
85+
<a href="#" className={css.sidebarLink}>
86+
Про нас
87+
</a>
88+
</li>
89+
{/* <li className={css.sidebarItem}>
8490
<a href="#" className={css.sidebarLink}>
8591
Користувачі
8692
</a>
8793
</li> */}
88-
</ul>
89-
</nav>
94+
</ul>
95+
</nav>
96+
) : (
97+
<nav className={css.sidebar} />
98+
)}
9099
</div>
91100
</Container>
92101
</header>

‎src/components/Header/Header.module.css‎

Lines changed: 151 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,110 @@
33
width: 100%;
44
height: 60px;
55
margin: 0 auto;
6-
padding: 10px 14px;
6+
padding: 10px 16px;
77
backdrop-filter: blur(4px);
88
background: var(--header-footer);
99
}
1010

11-
.logo {
12-
display: none;
13-
}
14-
1511
.headerWrap {
12+
position: relative;
1613
display: flex;
1714
align-items: center;
1815
justify-content: space-between;
16+
padding-inline: 16px;
1917
}
2018

21-
.userSettings {
19+
.logo,
20+
.searchInput,
21+
.userSettings,
22+
.sidebar {
2223
display: none;
2324
}
2425

2526
.burgerBtn {
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
padding: 0;
2631
background: none;
2732
border: none;
33+
z-index: 100;
34+
}
35+
36+
.sidebarOpen {
37+
position: absolute;
38+
top: 0;
39+
left: 0;
40+
visibility: visible;
41+
z-index: 99;
42+
width: 100%;
43+
height: 321px;
44+
border-radius: 8px;
45+
padding: 80px 16px 20px;
46+
backdrop-filter: blur(4px);
47+
background: linear-gradient(
48+
90deg,
49+
rgba(73, 101, 161, 0.96) 0%,
50+
rgba(7, 47, 134, 0.96) 100%
51+
);
52+
transition: all 0.5s ease-in-out;
53+
}
54+
55+
.sidebarHeader {
56+
display: flex;
57+
align-items: center;
58+
column-gap: 13px;
59+
min-width: 148px;
60+
height: 48px;
61+
border-bottom: 0.4px solid var(--additional-text);
62+
padding-bottom: 4px;
63+
width: 328px;
64+
height: 52px;
65+
margin-bottom: 32px;
66+
}
67+
68+
.userIcon {
69+
width: 48px;
70+
height: 48px;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
border: 1px solid #525252;
75+
border-radius: 8px;
76+
background-color: #fff;
77+
font-size: 20px;
78+
}
79+
80+
.userName {
81+
font-family: var(--font-family);
82+
font-weight: 500;
83+
font-size: 12px;
84+
color: #fff;
85+
}
86+
87+
.settingsIcon {
88+
font-size: 24px;
2889
cursor: pointer;
2990
}
3091

31-
nav {
32-
display: none;
92+
.sidebarList {
93+
display: flex;
94+
flex-direction: column;
95+
row-gap: 20px;
96+
}
97+
98+
.sidebarLink {
99+
font-family: var(--font-family);
100+
font-weight: 500;
101+
font-size: 18px;
102+
line-height: 1.5;
103+
color: var(--additional-text);
104+
text-decoration: none;
105+
}
106+
107+
.sidebarLink:hover {
108+
font-weight: 600;
109+
text-decoration: underline;
33110
}
34111

35112
@media only screen and (min-width: 768px) {
@@ -38,84 +115,129 @@ nav {
38115
height: 80px;
39116
padding: 20px 36px;
40117
}
118+
41119
.headerСontainer {
42120
display: flex;
43121
justify-content: space-between;
44122
align-items: center;
45123
}
124+
46125
.headerWrap {
47126
display: flex;
48127
flex-direction: row-reverse;
49128
align-items: start;
50129
justify-content: center;
51130
column-gap: 32px;
131+
padding: 0;
52132
}
133+
53134
.burgerIcon {
54135
max-width: 32px;
55136
max-height: 32px;
56137
}
138+
57139
.logo {
58140
display: flex;
59141
}
142+
143+
.sidebar {
144+
visibility: hidden;
145+
top: -100%;
146+
transition: all 0.5s ease-in-out;
147+
}
148+
149+
.sidebarOpen {
150+
top: -10px;
151+
left: -105px;
152+
padding: 80px 36px 20px;
153+
min-width: 372px;
154+
width: 372px;
155+
height: 337px;
156+
}
157+
158+
.sidebarList {
159+
row-gap: 28px;
160+
}
60161
}
61162

62163
@media only screen and (min-width: 1440px) {
63164
.header {
64165
min-width: 1196px;
65166
padding: 17.5px 72px;
66167
}
168+
67169
.headerWrap {
68170
align-items: center;
69171
}
172+
70173
.burgerBtn {
71174
display: none;
72175
}
73-
.userSettings {
176+
177+
.searchInput {
74178
display: flex;
75-
align-items: center;
76-
column-gap: 13px;
77-
}
78-
.userIcon {
79-
width: 48px;
179+
width: 54px;
80180
height: 48px;
81-
display: flex;
82-
align-items: center;
83-
justify-content: center;
84-
border: 1px solid #525252;
181+
padding: 8px;
182+
border: 1px solid var(--text);
85183
border-radius: 8px;
86-
background-color: #fff;
87-
font-size: 20px;
88-
}
89-
.userName {
184+
outline: none;
90185
font-family: var(--font-family);
91-
font-weight: 500;
92-
font-size: 12px;
93-
color: #fff;
186+
color: var(--additional-text);
187+
transition: border-color 0.3s ease, color 0.3s ease;
188+
background: linear-gradient(90deg, #4965a1 0%, #072f86 100%);
189+
}
190+
191+
.searchInput:focus {
192+
border-color: var(--button-hover);
193+
width: 100%;
94194
}
95-
.settingsIcon {
195+
196+
.searchInput::placeholder {
96197
font-size: 24px;
97-
cursor: pointer;
198+
text-align: center;
199+
opacity: 1;
200+
transition: all 0.3s ease;
98201
}
202+
203+
.searchInput:focus::placeholder {
204+
opacity: 0;
205+
}
206+
99207
.addBtn {
100208
border-radius: 9px;
101209
min-width: 181px;
102210
height: 42px;
103211
font-size: 20px;
104212
color: #141212;
105213
}
214+
215+
.userSettings {
216+
display: flex;
217+
align-items: center;
218+
column-gap: 13px;
219+
}
220+
221+
.userName {
222+
font-size: 14px;
223+
}
224+
106225
nav {
107226
display: flex;
108227
justify-content: space-between;
109228
align-items: center;
110229
}
111-
.sidebarHeader {
230+
231+
.sidebarOpen {
112232
display: none;
113233
}
234+
114235
.sidebarList {
115236
display: flex;
116237
column-gap: 16px;
117238
margin-right: 401px;
118239
}
240+
119241
.sidebarLink {
120242
text-decoration: none;
121243
font-family: var(--font-family);
@@ -124,6 +246,7 @@ nav {
124246
line-height: 1.5;
125247
color: #f3f2f2;
126248
}
249+
127250
.sidebarLink:hover {
128251
text-decoration: underline;
129252
}

‎src/components/Logo/Logo.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import css from "./Logo.module.css";
33
const Logo = () => {
44
return (
55
<>
6-
<div className={css.logobox}>
6+
<div className={css.logoBox}>
77
<a href="#" className={css.logoLink}>
88
<img className={css.logoImg} src="/favicon.svg" alt="Logo" />
99
<span className={css.logoTitle}>PhotoShare</span>

‎src/components/Logo/Logo.module.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.logobox {
1+
.logoBox {
22
display: none;
33
}
44

55
@media only screen and (min-width: 768px) {
6-
.logobox {
6+
.logoBox {
77
display: flex;
88
align-items: center;
99
justify-content: center;
@@ -37,10 +37,9 @@
3737
}
3838

3939
@media only screen and (min-width: 1440px) {
40-
.logobox {
40+
.logoBox {
4141
min-width: 236px;
4242
height: 46px;
43-
font-size: 30px;
4443
}
4544
.logoImg {
4645
width: 29px;

0 commit comments

Comments
 (0)