@php
    $pagename = $pagename ?? '';
@endphp


@section('menu')

    <style>
        .navbar-nav .nav-item.active .nav-link {
            font-weight: bold;
        }
    </style>

    <nav class="navbar navbar-expand-lg navbar-light sticky-top bg-primary py-2">
        <div class="container">
            <a class="navbar-brand" href="{{ route('home') }}">
                <img src="images/demo/default/logo/logo2.png" alt="Interlam_logo" style="max-height: 3em;" id="navbar-logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="ml-5 collapse navbar-collapse justify-content-start" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item {{ $pagename == 'index' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('home') }}">Home</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'prodotti forestali' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('prodotti.forestali') }}">Attrezzature Forestali</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'ricambi agricoli' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('prodotti.agricoli') }}">Ricambi Agricoli</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'storia' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('storia') }}">Storia</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'dovesiamo' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('dovesiamo') }}">Dove Siamo</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'contatti' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('contatti') }}">Contatti</a>
                    </li>
                    <li class="nav-item {{ $pagename == 'video' ? 'active' : '' }}">
                        <a class="nav-link btn btn-primary ml-2 text-left" style="font-size: 1.1rem; color: #222222;"
                            href="{{ route('video') }}">Video</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script>
        window.addEventListener('scroll', function() {
            const logo = document.getElementById('navbar-logo');
            if (window.scrollY > 0) {
                logo.style.transition = 'max-height 0.3s ease';
                logo.style.maxHeight = '2em';
            } else {
                logo.style.transition = 'max-height 0.3s ease';
                logo.style.maxHeight = '3em';
            }
        });
    </script>
    <script>
            const navbar = document.querySelector('nav');

            window.addEventListener('scroll', function() {
                if ('{{ $pagename }}' == 'pdfviewer') {
                    if (window.scrollY > 0) {
                        // Scrolling down
                        navbar.style.transition = 'transform 0.1s ease-in-out';
                        navbar.style.transform = 'translateY(-100%)';
                    } else {
                        // Scrolling up
                        navbar.style.transition = 'transform 0.1s ease-in-out';
                        navbar.style.transform = 'translateY(0)';
                    }
                }
            });
        </script>

@endsection