Op mobiele scherm uitklappen drop-down menu kan mooier

[Rogue-Juan]

Op de oude website zorgt het uitklappen van de drop-down menu ervoor dat de andere navigatiebalk elementen opschuiven naar beneden en zo 'ruimte maken' voor de uitgeklapte menu elementen. In de huidige code klapt de drop-down menu uit 'over' de andere elementen heen, waardoor je die niet meer ziet (eerst had ik een transparente achtergrond ingesteld, maar dan staan de drop-down menu items en de navigatiebalk elementen qua tekst door elkaar). We kunnen proberen dit te maken zoals op de oude website. Kijk hierbij vooral hoe dit gedaan wordt bij de oude website; de code hiervoor staat in bestand app/resources/views/components/navigation/header.blade.php vanaf line 156. De relevante code hiervoor op de nieuwe website is in CSS en staat in NavigatieBalk.vue. Deze begint vanaf line 336:

...
@media screen and (max-width: 768px) {

    /* Mobile styles */
    .navbar-toggler {
        position: relative !important;
        margin-top: 3.5vh !important;
        color: white !important;
    }

    .scrolled .navbar-toggler {
        position: relative !important;
        margin-top: 3.5vh !important;
        color: #970046 !important;
    }

    /* Styles when the condition is true */
    .navbar {
        background-color: white;
        padding-top: 0;
        color: #970046;
        padding-bottom: 5vh;
        box-shadow: 0px -9px 20px black;
        -moz-box-shadow: 0px -9px 20px black;
        -webkit-box-shadow: 0px -9px 20px black;
    }

    .navbar a {
        color: gray;
        text-shadow: none;
        right: 0;
        left: auto;
        z-index: 1000;
    }

    .navbar li {
        border-right-color: #970046;
    }

    .navbar-brand {
        color: #970046;
        text-shadow: none;
    }

    .navbar-brand img {
        filter: none;
    }

    .dropdowninhoud {
        background-color: white;
        margin-top: 0;
        box-shadow: 0px 13px 30px -6px rgba(0, 0, 0, 0.56);
        -webkit-box-shadow: 0px 13px 30px -6px rgba(0, 0, 0, 0.56);
        -moz-box-shadow: 0px 13px 30px -6px rgba(0, 0, 0, 0.56);
        clip-path: inset(0px -50px -50px -50px);
        z-index: 1000;
    }

    .dropdowninhoud a {
        color: #970046 !important;
        border-left-color: #970046;
        right: 0;
        left: auto;
        z-index: 1000;
    }

    .scrolled .dropdowninhoud {
        transition: all 0.3s ease;
        position: absolute;
        /* Zorg ervoor dat de inhoud onder de knop terechtkomt en de knop niet van plek veranderd */
        list-style-type: none;
        /* Geen bolletjes bij de opties */
        /* padding gebruiken ipv margin zodat mouseleave niet triggert bij de witruimte */
        padding: 30px;
        padding-top: 0px;
        padding-bottom: 10px;
        background-color: white;
        margin: 0px;
        text-align: left;
        white-space: nowrap;
    }

    .scrolled .dropdowninhoud::before {
        transition: all 0.3s ease;
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        height: calc(100% - 0px);
        /* Adjust the height of the line as needed */
        width: 1px;
        /* Adjust the width of the line as needed */
        background-color: rgb(151, 0, 70);
        transition: width 0.3s;
    }

}