Skip to content

Commit 0fec281

Browse files
ArceenArceen
authored
Arceen: Fortune and Random header not showing fix (#46)
* Arceen: Fortune and Random header not showing fix * Arceen: Navbar has height now * removed previously added margins
1 parent b5a1c7e commit 0fec281

File tree

4 files changed

+172
-182
lines changed

4 files changed

+172
-182
lines changed

‎src/components/common/Navbar.js‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -59,42 +59,30 @@ export const Navbar = () => {
5959
}, [location])
6060

6161
return (
62+
<div className="navbar-wrapper">
6263
<div className="navbar-root">
63-
<div className="navbar-heading">
64-
<Link
65-
to="/"
66-
className="nav-logo"
67-
>
68-
<img src={logo} alt="ACM Fun Logo" />
69-
<h1>ACM FUN</h1>
70-
</Link>
71-
</div>
72-
<ul>
73-
{
74-
navbarOptions.map((item, i) => {
75-
76-
return (
77-
<li
78-
key={i}
79-
className="list "
80-
>
81-
<Link
82-
to={item.url}
83-
class="navbar-item"
84-
>
85-
<span class="icon">
86-
<img src={item.icon} alt={item.title} />
87-
</span>
88-
<span class="text">
89-
{item.title}
90-
</span>
91-
</Link>
92-
</li>
93-
)
94-
})
95-
}
96-
< div class="indicator"></div>
97-
</ul>
64+
<div className="navbar-heading">
65+
<Link to="/" className="nav-logo">
66+
<img src={logo} alt="ACM Fun Logo" />
67+
<h1>ACM FUN</h1>
68+
</Link>
69+
</div>
70+
<ul>
71+
{navbarOptions.map((item, i) => {
72+
return (
73+
<li key={i} className="list ">
74+
<Link to={item.url} class="navbar-item">
75+
<span class="icon">
76+
<img src={item.icon} alt={item.title} />
77+
</span>
78+
<span class="text">{item.title}</span>
79+
</Link>
80+
</li>
81+
);
82+
})}
83+
<div class="indicator"></div>
84+
</ul>
9885
</div>
99-
)
86+
</div>
87+
);
10088
}

‎src/styles/components/common/Navbar.css‎

Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,155 @@
11
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
font-family: 'Poppins', sans-serif;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
66
}
77

88
:root {
9-
--clr: #ffffff;
9+
--clr: #ffffff;
1010
}
1111

12+
.navbar-wrapper {
13+
height: 110px;
14+
}
1215
.navbar-root {
13-
margin-left: auto;
14-
margin-right: auto;
15-
top: 40px;
16-
background: var(--clr);
16+
margin-left: auto;
17+
margin-right: auto;
18+
top: 40px;
19+
background: var(--clr);
1720

18-
position: relative;
19-
width: 400px;
20-
height: 70px;
21-
background: #88847e;
22-
display: flex;
23-
justify-content: center;
24-
align-items: center;
25-
border-radius: 20px;
21+
position: relative;
22+
width: 400px;
23+
height: 70px;
24+
background: #88847e;
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
border-radius: 20px;
2629
}
2730

2831
.navbar-heading {
29-
display: flex;
30-
flex-direction: row;
31-
align-items: center;
32-
flex-basis: 30%;
32+
display: flex;
33+
flex-direction: row;
34+
align-items: center;
35+
flex-basis: 30%;
3336
}
3437

3538
.navbar-heading img {
36-
height: 50px;
37-
width: 50px;
39+
height: 50px;
40+
width: 50px;
3841
}
3942

4043
.navbar-heading h1 {
41-
font-size: 22px;
42-
color: #fff;
43-
margin-bottom: 0px;
44-
display: flex;
45-
flex-direction: row;
44+
font-size: 22px;
45+
color: #fff;
46+
margin-bottom: 0px;
47+
display: flex;
48+
flex-direction: row;
4649
}
4750

4851
.navbar-root ul {
49-
display: flex;
50-
width: 350px;
51-
padding-left: 30px;
52+
display: flex;
53+
width: 350px;
54+
padding-left: 30px;
5255
}
5356

5457
.navbar-root li {
55-
position: relative;
56-
list-style: none;
57-
width: 70px;
58-
height: 70px;
59-
z-index: 1;
58+
position: relative;
59+
list-style: none;
60+
width: 70px;
61+
height: 70px;
62+
z-index: 1;
6063
}
6164

6265
.navbar-root ul li .navbar-item {
63-
position: relative;
64-
display: flex;
65-
justify-content: center;
66-
align-items: center;
67-
flex-direction: column;
68-
width: 100%;
69-
text-align: center;
70-
font-weight: 500;
66+
position: relative;
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
flex-direction: column;
71+
width: 100%;
72+
text-align: center;
73+
font-weight: 500;
7174
}
7275

7376
.nav-logo {
74-
display: flex;
75-
text-decoration: none;
77+
display: flex;
78+
text-decoration: none;
7679
}
7780

7881
.navbar-root ul li .navbar-item .icon {
79-
position: relative;
80-
display: block;
81-
line-height: 75px;
82-
font-size: 1.5em;
83-
text-align: center;
84-
transition: 0.5s;
85-
color: var(--clr);
86-
width: 48px;
87-
height: 48px;
82+
position: relative;
83+
display: block;
84+
line-height: 75px;
85+
font-size: 1.5em;
86+
text-align: center;
87+
transition: 0.5s;
88+
color: var(--clr);
89+
width: 48px;
90+
height: 48px;
8891
}
8992

9093
.navbar-root ul li.active .navbar-item .icon {
91-
transform: translateY(-32px);
94+
transform: translateY(-32px);
9295
}
9396

9497
.navbar-root ul li .navbar-item .text {
95-
position: absolute;
96-
color: var(--clr);
97-
font-weight: 400;
98-
letter-spacing: 0.05em;
99-
transition: 0.5s;
100-
opacity: 0;
101-
transform: translateY(20px);
98+
position: absolute;
99+
color: var(--clr);
100+
font-weight: 400;
101+
letter-spacing: 0.05em;
102+
transition: 0.5s;
103+
opacity: 0;
104+
transform: translateY(20px);
102105
}
103106

104107
.navbar-root ul li.active .navbar-item .text {
105-
opacity: 1;
106-
transform: translateY(20px);
108+
opacity: 1;
109+
transform: translateY(20px);
107110
}
108111

109112
.indicator {
110-
position: absolute;
111-
top: -60%;
112-
width: 70px;
113-
height: 70px;
114-
background: #26b4ec;
115-
border-radius: 50%;
116-
border: 6px solid var(--clr);
117-
transition: 0.5s;
113+
position: absolute;
114+
top: -60%;
115+
width: 70px;
116+
height: 70px;
117+
background: #26b4ec;
118+
border-radius: 50%;
119+
border: 6px solid var(--clr);
120+
transition: 0.5s;
118121
}
119122

120123
.indicator::before {
121-
content: '';
122-
position: absolute;
123-
top: 60%;
124-
left: -22px;
125-
width: 23px;
126-
height: 20px;
127-
background-color: transparent;;
128-
border-top-right-radius: 20px;
129-
box-shadow: 0px -10px 0 0 var(--clr);
124+
content: "";
125+
position: absolute;
126+
top: 60%;
127+
left: -22px;
128+
width: 23px;
129+
height: 20px;
130+
background-color: transparent;
131+
border-top-right-radius: 20px;
132+
box-shadow: 0px -10px 0 0 var(--clr);
130133
}
131134

132135
.indicator::after {
133-
content: '';
134-
position: absolute;
135-
top: 60%;
136-
right: -22px;
137-
width: 23px;
138-
height: 20px;
139-
background-color: transparent;;
140-
border-top-left-radius: 20px;
141-
box-shadow: 0px -10px 0 0 var(--clr);
136+
content: "";
137+
position: absolute;
138+
top: 60%;
139+
right: -22px;
140+
width: 23px;
141+
height: 20px;
142+
background-color: transparent;
143+
border-top-left-radius: 20px;
144+
box-shadow: 0px -10px 0 0 var(--clr);
142145
}
143146

144147
.navbar-root ul li:nth-child(1).active ~ .indicator {
145-
transform: translateX(calc(70px * 0));
148+
transform: translateX(calc(70px * 0));
146149
}
147150
.navbar-root ul li:nth-child(2).active ~ .indicator {
148-
transform: translateX(calc(70px * 1));
151+
transform: translateX(calc(70px * 1));
149152
}
150153
.navbar-root ul li:nth-child(3).active ~ .indicator {
151-
transform: translateX(calc(70px * 2));
154+
transform: translateX(calc(70px * 2));
152155
}

0 commit comments

Comments
 (0)