bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navigation dropdown, homepage links and pricing links.

Browse source 
Convert Diensten nav link to Bootstrap dropdown with all 5 services.
Enable Bootstrap dropdown SCSS import and add dark-theme styles.
Switch to bootstrap.bundle.min.js (includes Popper.js for dropdown).
Add "Lees meer" links to recreatie, sport, evenementen homepage cards.
Add service page links in cat-specific pricing component.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Bob Vandevliet 2026-02-04 17:18:38 +01:00
parent 9ad7e0f881
commit cc36a2abdd
5 changed files with 44 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
public/includes/components/nav.html
View file

@ -8,8 +8,15 @@
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="/#diensten">Diensten</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/#diensten" role="button" data-bs-toggle="dropdown" aria-expanded="false">Diensten</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/bedrijfsvideo">Bedrijfsvideo</a></li>
<li><a class="dropdown-item" href="/vastgoed">Vastgoed</a></li>
<li><a class="dropdown-item" href="/recreatie">Recreatie</a></li>
<li><a class="dropdown-item" href="/sport">Sport</a></li>
<li><a class="dropdown-item" href="/evenementen">Evenementen</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/#prijzen">Prijzen</a>

2
public/includes/partials/head-content.html
View file

@ -49,5 +49,5 @@
</script>
<script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" defer></script>
<script src="/assets/js/scripts.min.js" async></script>

6
public/includes/pricing/cat-specific.html
View file

@ -4,9 +4,9 @@
<p class="card-text fs-4 ff-header">vanaf €450,-</p>
<p class="card-text">Vereist voor vluchten met een hoger risico of in gecontroleerd luchtruim:</p>
<ul>
<li>Recreatie</li>
<li>Sport</li>
<li>Evenementen</li>
<li><a href="/recreatie">Recreatie</a></li>
<li><a href="/sport">Sport</a></li>
<li><a href="/evenementen">Evenementen</a></li>
</ul>
<p class="card-text">Inclusief:</p>
<ul>

9
public/index.html
View file

@ -85,6 +85,9 @@
<p class="card-text">
Presenteer jouw attractiepark, camping of recreatiepark vanuit een ander perspectief met adembenemende dronebeelden.
</p>
<p style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="/recreatie#" class="btn btn-primary stretched-link">Lees meer</a>
</p>
</div>
</div>
</div>
@ -99,6 +102,9 @@
<p class="card-text">
Breng jouw sportevenement spectaculair in beeld met FPV actiebeelden op hoge snelheden en slechts centimeters van de actie verwijderd.
</p>
<p style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="/sport#" class="btn btn-primary stretched-link">Lees meer</a>
</p>
</div>
</div>
</div>
@ -113,6 +119,9 @@
<p class="card-text">
Leg de grootsheid, sfeer en energie van elk evenement vast. Denk aan aftermovie's, festivals en bruiloften, tot privé- en bedrijfsfeesten.
</p>
<p style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="/evenementen#" class="btn btn-primary stretched-link">Lees meer</a>
</p>
</div>
</div>
</div>

23
src/scss/styles.scss
View file

@ -43,12 +43,12 @@ $accordion-icon-width: 1rem;
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/alert";
// @import "bootstrap/scss/badge";
// @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/close";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/forms";
// @import "bootstrap/scss/modal"; // Requires transitions
// @import "bootstrap/scss/offcanvas"; // Requires transitions
@ -254,6 +254,23 @@ body.is-scrolled .navbar {
padding-bottom: var(--bs-nav-link-padding-y);
}
.dropdown-menu {
border: none;
background-color: rgba(22, 23, 25, 0.95);
@extend .text-center;
}
.dropdown-item {
color: var(--bs-navbar-color);
font-family: $ff-header;
&:hover,
&:focus {
color: var(--bs-navbar-hover-color);
background-color: rgba(255, 255, 255, 0.08);
}
}
.socials {
@extend .justify-content-center;
}
@ -261,6 +278,10 @@ body.is-scrolled .navbar {
// navbar-expand-lg
@include media-breakpoint-up(lg) {
.dropdown-menu {
text-align: left;
}
.btn:not(.btn+.btn),
.socials a:not(a+a) {
margin-left: var(--bs-navbar-nav-link-padding-x);