<!-- Navbar nav -->
<ul class="navbar-nav position-relative me-xl-n5">
    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    {{-- <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
        <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Home</a>
        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
                    <span class="fw-medium">Electronics Store</span>
                    <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/electronics-light.jpg" alt="Electronics Store">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/electronics-dark.jpg" alt="Electronics Store">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
                    <span class="fw-medium">Fashion Store v.1</span>
                    <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-1-light.jpg" alt="Fashion Store v.1">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-1-dark.jpg" alt="Fashion Store v.1">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
                    <span class="fw-medium">Fashion Store v.2</span>
                    <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/fashion-2-light.jpg" alt="Fashion Store v.2">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/fashion-2-dark.jpg" alt="Fashion Store v.2">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
                    <span class="fw-medium">Furniture Store</span>
                    <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/furniture-light.jpg" alt="Furniture Store">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/furniture-dark.jpg" alt="Furniture Store">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
                    <span class="fw-medium">Grocery Store</span>
                    <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
            <li class="hover-effect-opacity px-2 mx-n2">
                <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
                    <span class="fw-medium">Marketplace</span>
                    <span class="d-block fs-xs text-body-secondary">Product showcase + Category grid</span>
                    <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2" style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                        <img class="position-relative z-2 d-none-dark" src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
                        <img class="position-relative z-2 d-none d-block-dark" src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark" style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark" style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                    </div>
                </a>
            </li>
        </ul>
    </li> --}}
    <li class="nav-item dropdown position-static pb-lg-2 me-lg-n1 me-xl-0">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
        <div class="dropdown-menu p-4" style="--cz-dropdown-spacer: .75rem">
            <div class="row g-4">
                <div class="col-lg-3">
                    <h6 class="fs-base mb-3">Shop pages</h6>
                    <ul class="nav flex-column">
                        <li><a class="nav-link px-0 py-1" href="{{ route('root') }}">Shop Grid</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'list']) }}">Shop List</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'map']) }}">Shop with Map</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'no-sidebar']) }}">Shop No Sidebar</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wide']) }}">Shop Wide</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'single-product']) }}">Single Product</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h6 class="fs-base mb-3">Product pages</h6>
                    <ul class="nav flex-column">
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-fashion']) }}">Product - Fashion</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-electronics']) }}">Product - Electronics</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-furniture']) }}">Product - Furniture</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-grocery']) }}">Product - Grocery</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'product-marketplace']) }}">Product - Marketplace</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h6 class="fs-base mb-3">Shop features</h6>
                    <ul class="nav flex-column">
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
                        <li><a class="nav-link px-0 py-1" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 d-none d-lg-block">
                    <img class="rounded-3" src="/img/mega-menu/shop.jpg" alt="Shop">
                </div>
            </div>
        </div>
    </li>
    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
            <li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
        </ul>
    </li>
    <li class="nav-item dropdown pb-lg-2 me-lg-n1 me-xl-0">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Pages</a>
        <ul class="dropdown-menu" style="--cz-dropdown-spacer: .75rem">
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'cart']) }}">Cart</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'checkout']) }}">Checkout</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'order-completed']) }}">Order Completed</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'wishlist']) }}">Wishlist</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['shop', 'compare']) }}">Compare</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Account</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Order History</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'profile']) }}">Profile Settings</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Address Book</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['account', 'tickets']) }}">Support Tickets</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Vendor</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'store']) }}">Store Homepage</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'products']) }}">Store Products</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'orders']) }}">Store Orders</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'reviews']) }}">Store Reviews</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['vendor', 'settings']) }}">Store Settings</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid']) }}">Blog Grid</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">Blog List</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single']) }}">Single Post</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Gallery</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'grid']) }}">Gallery Grid</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'masonry']) }}">Gallery Masonry</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['gallery', 'single']) }}">Single Project</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Utilities</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'overview']) }}">Overview</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'typography']) }}">Typography</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'colors']) }}">Colors</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'components']) }}">Components</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['utilities', 'forms']) }}">Forms</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single Article v.1</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single Article v.2</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404 Error</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
                    <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
                </ul>
            </li>
            <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a></li>
        </ul>
    </li>
</ul>
