<div class="w-full sticky-top">
    <div class="w-full shadow-sm bg-black text-white">
        <header class="container-lg lh-1 py-2 py-md-3">
            <div class=" d-flex justify-content-between align-items-center">


                <button type="button" class="btn d-block d-md-none" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">

                    <svg viewBox='0 0 35 30' width='25'>
                        <line x1='0' y1='5' x2='35' y2='5' stroke='#fff'
                            stroke-width='3' />
                        <line x1='0' y1='15' x2='35' y2='15' stroke='#fff'
                            stroke-width='3' />
                        <line x1='0' y1='25' x2='35' y2='25' stroke='#fff'
                            stroke-width='3' />
                    </svg>


                </button>

                <div class="w-full py-2 py-md-0 text-center text-md-start d-flex justify-content-between">
                    <a class="blog-header-logo text-decoration-none text-white" href="{{ route('front.home') }}">
                        <div class="fw-bolder fs-3 font-family-roboto-condensed text-uppercase">FutureWalker</div>
                    </a>
                </div>

                <div class="text-center text-md-end">
                    <div class="d-flex d-justify-content-end">
                        <div class="align-self-center d-none d-md-block">Important news shaping the digital future</div>

                        <button type="button"
                            class="align-self-center ms-1 btn btn-link text-white btn-lg px-1 hover-opacity"
                            onclick="window.location.reload()">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>

                        <share-to-friends></share-to-friends>
                    </div>

                </div>
            </div>
        </header>
    </div>
    <div class="w-full d-block d-md-none">
        <div class="collapse navbar-collapse w-full bg-black text-white" id="navbarSupportedContent">
            <div class="text-center">Important news shaping the digital future</div>
            <div class="w-full border-bottom pb-2"></div>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-4 font-family-roboto-condensed text-uppercase">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('front.home') }}">Home</a>
                </li>
                @foreach ($categories as $category)
                    <li class="nav-item">
                        <a class="nav-link"
                            href="{{ route('front.category', ['category_slug' => $category->slug]) }}">{{ $category->name }}</a>
                    </li>
                @endforeach

            </ul>
        </div>
    </div>


    <div class="w-full bg-dark text-white d-none d-md-block">
        <div class="container-lg text-center py-2">
            <a class="text-white mx-3 font-family-roboto-condensed text-uppercase"
                href="{{ route('front.home') }}">Home</a>
            @foreach ($categories as $category)
                <a href="{{ route('front.category', ['category_slug' => $category->slug]) }}"
                    class="text-white mx-3 font-family-roboto-condensed text-uppercase">{{ $category->name }}</a>
            @endforeach
        </div>
    </div>
</div>
