Skip to content

Commit 75bbc4d

Browse files
AmandaKholAmandaKhol
committed
feat: add new links in the nav
1 parent 7bdc810 commit 75bbc4d

5 files changed

Lines changed: 89 additions & 19 deletions

File tree

‎apps/commons/static/commons/css/override.scss‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ hr {
2020
}
2121
}
2222

23+
2324
.message.is-info .message-body {
2425
border-color: #c8dfec;
2526
}
@@ -28,12 +29,31 @@ hr {
2829
background-color: #f3f3f7;
2930
}
3031

32+
.collapsable--close{
33+
display: none;
34+
}
35+
36+
.nav-menu{
37+
display:flex;
38+
justify-content: center;
39+
align-items: center;
40+
}
41+
42+
.navbar-dropdown{
43+
background-color: $header-bg;
44+
}
45+
46+
.navbar-burger{
47+
color: $header-fg;
48+
}
49+
3150
.navbar {
51+
3252
.navbar-brand {
3353
background: $header-bg;
3454
.navbar-item {
3555
padding: 0.35rem 1rem;
36-
56+
3757
.logo {
3858
margin-top: 2px; // offset logo
3959
max-height: $header-height;
@@ -56,20 +76,22 @@ hr {
5676
}
5777
}
5878

59-
a.navbar-item,
79+
.navbar-item,
6080
.navbar-link {
6181
color: $header-fg;
82+
background: $header-bg;
6283
}
6384

64-
a.navbar-item:hover,
85+
.navbar-item:hover,
6586
.navbar-link:hover {
6687
background: darken($header-bg, 5%);
6788
}
6889

69-
a.navbar-item.is-active,
90+
.navbar-item.is-active,
7091
.navbar-link.is-active {
7192
background: darken($header-bg, 10%);
7293
font-weight: bold;
94+
color: $header-fg;
7395
}
7496

7597
i {
@@ -90,3 +112,4 @@ hr {
90112
background-color: rgba(0, 0, 0, 0.03);
91113
}
92114
}
115+

‎apps/commons/static/commons/js/general/collapsable.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict'
2+
3+
function init() {
4+
const collapsableItems = document.querySelectorAll('.js-nav-item')
5+
for (const collapsableItem of collapsableItems) {
6+
collapsableItem.addEventListener('click', (ev) => {
7+
ev.preventDefault()
8+
const clickedItem = ev.currentTarget
9+
const clickedCollapsable = clickedItem.parentNode
10+
11+
const allCollapsables = document.querySelectorAll('.js-nav-dropdown')
12+
for (const collapsable of allCollapsables) {
13+
// compruebo si es el collapsable pulsado
14+
if (clickedCollapsable === collapsable.parentNode) {
15+
// si es el pulsado, le hago un toggle
16+
console.log(collapsable)
17+
collapsable.classList.toggle('collapsable--close')
18+
} else {
19+
console.log('else')
20+
// si no es el pulsado, lo cierro
21+
collapsable.classList.add('collapsable--close')
22+
}
23+
}
24+
})
25+
}
26+
}
27+
28+
export default {
29+
init,
30+
}

‎apps/commons/static/commons/js/general/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import NavbarBurger from './navbar-burger'
22
import Notifications from './notifications'
3+
import Collapsable from './collapsable'
34

45
export default {
56
init: () => {
67
NavbarBurger.init()
78
Notifications.init()
8-
}
9+
Collapsable.init()
10+
},
911
}

‎apps/commons/templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<link rel="stylesheet" href="{{ assets|get_asset_key:'commons/vendor.min.css' }}">
1919
{% block style %}{% endblock %}
2020
</head>
21-
<body class="{% block body_class %}{% endblock %}">
21+
<body class="{% block body_class %}{% endblock %} has-navbar-fixed-top">
2222

2323
{% include "header.html" %}
2424

‎apps/commons/templates/header.html‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load utils %}
22

3-
<nav class="header-page navbar is-paddingless">
3+
<nav class="header-page navbar is-paddingless is-fixed-top">
44
<div class="navbar-brand">
55
<a class="navbar-item" href="/">
66
<img class="logo" src="{{ assets|get_asset_key:'commons/img/logo-python-canarias-white.svg' }}" alt="{{ organization.name }}" />
@@ -14,18 +14,32 @@
1414
</div>
1515

1616
<div class="navbar-menu" id="navMenu">
17-
<div class="navbar-end has-text-centered">
18-
<a class="navbar-item {% is_active 'about:index' %}" href="{% url 'about:index' %}">
19-
<i class="fas fa-user-friends"></i>
20-
Asociación
21-
</a>
22-
<a class="navbar-item {% is_active 'events:index' %}" href="{% url 'events:index' %}">
23-
<i class="fas fa-birthday-cake"></i>
24-
Eventos
25-
</a>
17+
<div class="navbar-end">
18+
<div class="navbar-item has-dropdown is-hoverable">
19+
<a class="navbar-item {% is_active 'about:index' %} js-nav-item" href="{% url 'about:index' %}">
20+
<i class="fas fa-user-friends"></i>
21+
Asociación
22+
</a>
23+
<div class="navbar-dropdown is-boxed js-nav-dropdown collapsable--close">
24+
<a class="navbar-item {% is_active 'about:index' %}" href="{% url 'about:index' %}">Información</a>
25+
<a class="navbar-item {% is_active 'about:history' %}" href="{% url 'about:history' %}">Historia</a>
26+
<a class="navbar-item {% is_active 'about:join' %}" href="{% url 'about:join' %}">¡Únete!</a>
27+
</div>
28+
</div>
29+
<div class="navbar-item has-dropdown is-hoverable">
30+
<a class="navbar-item {% is_active 'events:index' %} js-nav-item" href="{% url 'events:index' %}">
31+
<i class="fas fa-birthday-cake"></i>
32+
Eventos
33+
</a>
34+
<div class="navbar-dropdown is-boxed js-nav-dropdown collapsable--close">
35+
<a class="navbar-item {% is_active 'events:index' %}" href="{% url 'events:index' %}">Próximo evento</a>
36+
<a class="navbar-item {% is_active 'events:past_events' %}" href="{% url 'events:past_events' %}">Eventos pasados</a>
37+
</div>
38+
</div>
39+
2640
<a class="navbar-item {% is_active 'jobs:index' %}" href="{% url 'jobs:index' %}">
27-
<i class="fas fa-laptop-code"></i>
28-
Empleo
41+
<i class="fas fa-laptop-code"></i>
42+
Empleo
2943
</a>
3044

3145
{% if request.user.is_authenticated %}
@@ -40,4 +54,5 @@
4054
{% endif %}
4155
</div>
4256
</div>
43-
</nav>
57+
</div>
58+
</nav>

0 commit comments

Comments
 (0)