Skip to content

Commit e3bf784

Browse files
cesardlinxcesardlinx
committed
fix: mejora de estilos y animaciones para navbar
- Uso de css modules y resaltado del navlink activo - Animaciones para navbar
1 parent 176741c commit e3bf784

7 files changed

Lines changed: 124 additions & 88 deletions

File tree

‎src/components/header/Logo.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/components/header/Logo/logo.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import escudo from "../../../images/logo-escudo-ec.svg";
3+
import styles from './logo.module.css';
4+
5+
const Logo = () => (
6+
<div className={styles.logo}>
7+
<h1>
8+
<span className={styles.shield}>
9+
<img src={escudo} alt="Logo de Javascript Ecuador" />
10+
</span>
11+
<span className={styles.legend}>Ecuador.js</span>
12+
</h1>
13+
</div>
14+
);
15+
16+
export default Logo;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.logo {
2+
height: 80px;
3+
margin: 0;
4+
padding: 0;
5+
flex-basis: 20%;
6+
background-size: 150em;
7+
}
8+
9+
.logo h1 {
10+
margin: 0;
11+
display: inline-flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
.shield {
18+
transform: scale(0.9);
19+
}
20+
21+
.legend {
22+
font-family: "Roboto", sans-serif;
23+
font-weight: bold;
24+
font-size: 1.5em;
25+
font-size: clamp(18px, 1vw, 28px);
26+
}

src/components/header/Nav.css renamed to src/components/header/header.css

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap");
2-
31
header {
42
background-color: transparent;
53
}
@@ -9,7 +7,7 @@ header {
97
flex-wrap: wrap;
108
align-items: center;
119
justify-content: space-between;
12-
10+
overflow: hidden;
1311
max-width: 76rem;
1412
padding: 1rem;
1513
margin-left: auto;
@@ -69,35 +67,55 @@ header {
6967
.navbar {
7068
justify-content: center;
7169
width: 100%;
70+
height: 0;
7271
font-size: 0.75rem;
7372
font-weight: 700;
7473
font-family: "Open Sans", sans-serif, system-ui, -apple-system,
7574
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
7675
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
7776
"Noto Color Emoji";
77+
transition: height 300ms ease-in-out;
78+
}
79+
80+
.navbar.expanded {
81+
height: 275px;
7882
}
7983

8084
.nav__item {
8185
display: block;
82-
margin-top: 1rem;
86+
padding-top: 1rem;
8387
--text-opacity: 1;
8488
color: #000;
8589
color: rgba(0, 0, 0, var(--text-opacity));
8690
text-decoration: none;
91+
position: relative;
92+
box-sizing: border-box;
93+
}
94+
95+
.nav__item::after {
96+
content: '';
97+
position: absolute;
98+
display: block;
99+
height: 5px;
100+
background-color: #f7e018;
101+
width: 0;
102+
bottom: -5px;
103+
transition: all 250ms ease-in-out;
87104
}
88105

89-
.nav__item:hover {
90-
border-bottom: 3px solid #f7e018;
106+
.nav__item:hover::after {
107+
width: 100%;
91108
}
92109

93-
.nav__item a.active {
94-
border-bottom: 3px solid #f7e018;
110+
.nav__item.active::after {
111+
width: 100%;
95112
}
96113

97114
/*MD*/
98-
@media (min-width: 768px) {
115+
@media (min-width: 992px) {
99116
.nav-wrap {
100117
justify-content: center;
118+
overflow: visible;
101119
}
102120

103121
.nav__logo-image--sm {
@@ -124,16 +142,22 @@ header {
124142
display: inline-flex;
125143
flex-wrap: wrap;
126144
min-height: 100px;
145+
height: 180px;
127146
width: 100vh;
128147
display: flex;
129148
align-items: center;
130149
width: auto;
131150
justify-content: center;
132151
}
133152

153+
.navbar.expanded {
154+
height: 180px;
155+
}
156+
134157
.nav__item {
135158
display: inline-flex;
136159
margin-top: 0;
160+
padding-top: 0;
137161
align-items: center;
138162
justify-content: center;
139163
height: 80px;
@@ -142,12 +166,19 @@ header {
142166
text-align: center;
143167
order: 1;
144168
}
145-
.nav__item:hover {
146-
border-bottom: 5px solid #f7e018;
169+
170+
.nav__item::after {
171+
bottom: 0;
172+
width: 100%;
173+
transform: scaleX(0);
147174
}
148175

149-
.nav__item a.active {
150-
border-bottom: px solid #f7e018;
176+
.nav__item:hover::after{
177+
transform: scaleX(1);
178+
}
179+
180+
.nav__item.active::after {
181+
transform: scale(1);
151182
}
152183
}
153184

@@ -186,6 +217,10 @@ header {
186217
width: auto;
187218
}
188219

220+
.navbar.expanded {
221+
height: 100px;
222+
}
223+
189224
.nav__item {
190225
display: inline-flex;
191226
margin-top: 0;
@@ -196,11 +231,4 @@ header {
196231
align-items: center;
197232
text-align: center;
198233
}
199-
.nav__item:hover {
200-
border-bottom: 5px solid #f7e018;
201-
}
202-
203-
.nav__item a.active {
204-
border-bottom: px solid #f7e018;
205-
}
206234
}

‎src/components/header/header.js‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import { graphql, useStaticQuery, Link } from "gatsby";
1+
import { Link } from "gatsby";
22
import React, { useState } from "react";
3-
import "./Nav.css";
3+
import "./header.css";
44
import escudo from "../../images/logo-escudo-ec.svg";
5-
import Logo from "./Logo";
5+
import Logo from "./Logo/logo";
66

77
const Header = () => {
88
const [isExpanded, toggleExpansion] = useState(false);
9-
const { site } = useStaticQuery(graphql`
10-
query SiteTitleQuery {
11-
site {
12-
siteMetadata {
13-
title
14-
}
15-
}
16-
}
17-
`);
9+
let expanededClass = ''
10+
if (isExpanded) {
11+
expanededClass = 'expanded'
12+
}
1813

1914
return (
2015
<header>
2116
<div className="nav-wrap">
22-
<Link to="/" className="nav__logo-image--sm">
17+
<Link to="/" className="nav__logo-image--sm" activeClassName="active">
2318
<img className="nav__logo-image--sm" src={escudo} alt="Logo" />
2419
<h4 className="nav__logo-title--sm">Ecuador.js</h4>
2520
</Link>
@@ -37,36 +32,37 @@ const Header = () => {
3732
</svg>
3833
</button>
3934

40-
<nav className={`${isExpanded ? `block` : `hidden`} navbar `}>
41-
<Link className="nav__item" to="/" key="HOME">
35+
<nav className={`navbar ${expanededClass}`}>
36+
<Link className="nav__item" to="/" key="HOME" activeClassName="active">
4237
HOME
4338
</Link>
44-
<Link className="nav__item" to="/eventos" key="EVENTOS">
39+
<Link className="nav__item" to="/eventos" key="EVENTOS" activeClassName="active" partiallyActive={true}>
4540
EVENTOS
4641
</Link>
47-
<Link className="nav__item" to="/comunidad" key="COMUNIDAD">
42+
<Link className="nav__item" to="/comunidad" key="COMUNIDAD" activeClassName="active" partiallyActive={true}>
4843
COMUNIDAD
4944
</Link>
50-
<Link className="nav__item" to="/ciudades" key="CIUDADES">
45+
<Link className="nav__item" to="/ciudades" key="CIUDADES" activeClassName="active" partiallyActive={true}>
5146
CIUDADES
5247
</Link>
53-
<Link to="/" className="nav__logo">
48+
<Link to="/" className="nav__logo" activeClassName="active">
5449
<Logo />
5550
</Link>
56-
<Link className="nav__item" to="/blog" key="BLOG">
51+
<Link className="nav__item" to="/blog" key="BLOG" activeClassName="active" partiallyActive={true}>
5752
BLOG
5853
</Link>
5954
<Link
6055
className="nav__item"
6156
to="/code-of-conduct"
6257
key="CÓDIGO DE CONDUCTA"
58+
activeClassName="active"
6359
>
6460
CÓDIGO DE CONDUCTA
6561
</Link>
66-
<Link className="nav__item" to="/sponsors" key="SPONSORS">
62+
<Link className="nav__item" to="/sponsors" key="SPONSORS" activeClassName="active" partiallyActive={true}>
6763
SPONSORS
6864
</Link>
69-
<Link className="nav__item" to="/cuentas" key="CUENTAS">
65+
<Link className="nav__item" to="/cuentas" key="CUENTAS" activeClassName="active" partiallyActive={true}>
7066
CUENTAS
7167
</Link>
7268
</nav>

‎src/components/hero-section/hero-section.css‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,15 @@
1414
}
1515
}
1616

17-
@media only screen and (min-width: 1190px) {
17+
@media only screen and (min-width: 1059px) {
1818
.hero-section {
19-
padding-bottom: 7.5em;
19+
padding-bottom: 1em;
20+
}
21+
}
22+
23+
@media only screen and (min-width: 1296px) {
24+
.hero-section {
25+
padding-bottom: 7em;
2026
}
2127
}
2228

@@ -26,7 +32,7 @@
2632
animation: show-up 300ms ease-in-out forwards;
2733
}
2834

29-
@media (min-width: 1000px) {
35+
@media (min-width: 1059px) {
3036
.hero-text {
3137
width: 45%;
3238
padding-bottom: 0;
@@ -77,7 +83,7 @@
7783
width: 100%;
7884
}
7985

80-
@media only screen and (min-width: 1000px) {
86+
@media only screen and (min-width: 1059px) {
8187
.map-container {
8288
min-width: 35em;
8389
display: block;

‎src/components/layout/layout.module.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
background-position: right top;
99
}
1010

11+
@media only screen and (max-width: 992px) {
12+
.layout {
13+
background-size: 200%;
14+
}
15+
}
16+
1117
.mainContent {
1218
flex: 1;
1319
}

0 commit comments

Comments
 (0)