Skip to content

Commit

Permalink
♻️ Refactor main navbar
Browse files Browse the repository at this point in the history 
Not working on tactile yet
  • Loading branch information
@kraiss
kraiss committed Nov 5, 2023
1 parent 8590812 commit c5551d8
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 374 deletions.
10 changes: 0 additions & 10 deletions public/js/homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,6 @@ $(document).ready(function () {
}
}, 0);

// Scrolling
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

$(function () {
$(document).on('click', 'a.page-scroll', function (event) {
var $anchor = $(this);
Expand All @@ -43,7 +34,6 @@ $(document).ready(function () {
scrollTop: $(href).offset().top
}, 1500, 'easeInOutExpo');

$(".navbar-collapse.collapse.in").removeClass("in");
event.preventDefault();
});
});
Expand Down
108 changes: 42 additions & 66 deletions src/components/Menu.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,71 +8,47 @@ const path_fr = path.indexOf('/en/') < 0 ? '/fr'+path : path.replace('/en/','/fr
const path_en = path.replace('/fr/','/');
---
<header>
<div id="snc-header" class="snc-header menu">
<div class="snc-header-inner">
<div class="container">
<div class="row">
<div class="col-xs-12">
<nav class="navbar navbar-default snc-navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand snc-logo">
<a href={'/'+lang+'/'} class="snc-scroll">
<img src="/img/alpes-snow-full-illustration.webp" alt="Logo">
</a>
</div>
</div>
<div class="navbar-expand">
<ul class="nav navbar-nav snc-nav">
<li class="dropdown">
<a href="#" class="snc-scroll dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true"
aria-expanded="false">Snowcamp <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="page-scroll" href={'/'+lang+'/snowcamp/#what'}>
{t("what_is_this")}</a></li>
<li><a class="page-scroll" href={'/'+lang+'/organisation/'}>Organisation</a></li>
<li><a class="page-scroll" href={'/'+lang+'/previous-editions/'}>{t("past_editions")}</a></li>
</ul>
</li>
{ cfp.status !== "published" ?
<li><a class="page-scroll" href={'/'+lang+'/#program'}>{t("program_translation" )}</a></li>
:
<li><a class="page-scroll" href={'/'+lang+'/#program'}>{t("schedule_translation")}</a></li>
}
<li class="dropdown">
<a href="#snc-sponsors" class="snc-scroll dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Sponsors <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="page-scroll" href={'/'+lang+'/#sponsors'}>{ t("our_sponsors")}</a></li>
<li><a href={'/'+lang+'/sponsors/'}> {t("become_sponsor")} </a></li>
</ul>
</li>
<li><a class="page-scroll" href={'/'+lang+'/#venue'}> {t("venue")} </a></li>
<li><a href={'/'+lang+'/tickets/'}>{t("tickets")}</a></li>
<li><a href="https://www.youtube.com/channel/UCvRA5NSOfGOPet90fdV7uuw/videos" target="_blank">{t("videos")}</a></li>
<li><a href={'/'+lang+'/coc/'}>{t("coc")}</a></li>
{ lang == "fr" ?
<li>
<a href={path_en}>
<img class="snc-flag" src="/img/gb.svg" alt="Switch to English">&nbsp;
</a>
</li>
:
<li>
<a href={path_fr}>
<img class="snc-flag" src="/img/fr.svg" alt="Switch to French">&nbsp;
</a>
</li>
}
</ul>
</div>
</div>
</nav>
</div>
<nav id="snc-header" class="navbar navbar-expand-lg">
<a class="navbar-brand" href={'/'+lang+'/'}>
<img src="/img/alpes-snow-full-illustration.webp" alt="Logo">
</a>

<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navSnowcampDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Snowcamp <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navSnowcampDropdown">
<a class="dropdown-item" href={'/'+lang+'/snowcamp/#what'}>{t("what_is_this")}</a>
<a class="dropdown-item" href={'/'+lang+'/organisation/'}>Organisation</a>
<a class="dropdown-item" href={'/'+lang+'/previous-editions/'}>{t("past_editions")}</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href={'/'+lang+'/#program'}>
{ cfp.status !== "published" ? t("program_translation") : t("schedule_translation") }
</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href={'/'+lang+'/#sponsors'} id="navSponsorsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sponsors <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navSponsorsDropdown">
<a class="dropdown-item" href={'/'+lang+'/#sponsors'}>{t("our_sponsors")}</a>
<a class="dropdown-item" href={'/'+lang+'/sponsors/'}> {t("become_sponsor")} </a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href={'/'+lang+'/#venue'}> {t("venue")} </a></li>
<li class="nav-item"><a class="nav-link" href={'/'+lang+'/tickets/'}>{t("tickets")}</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.youtube.com/channel/UCvRA5NSOfGOPet90fdV7uuw/videos" target="_blank">{t("videos")}</a></li>
<li class="nav-item"><a class="nav-link" href={'/'+lang+'/coc/'}>{t("coc")}</a></li>
<li class="nav-item"><a class="nav-link" href={lang == "fr" ? path_en : path_fr}>
{ lang == "fr" ?
<img class="snc-flag" src="/img/gb.svg" alt="Switch to English">
:
<img class="snc-flag" src="/img/fr.svg" alt="Switch to French">
}
</a></li>
</ul>
</div>
</header>
</nav>
</header>
4 changes: 0 additions & 4 deletions src/styles/button.less
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
@import "colors";

.snc-btn, .snc-btn:hover, .snc-header .snc-toggle, .snc-heading-brand .heading, .snc-heading-brand .text {
color: @white
}

.snc-row {
padding: 11rem 0;
}
Expand Down
Loading

0 comments on commit c5551d8

Please sign in to comment.