<div>
    <header>
        <div class="topbar">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <a href="mailto:info@tiffin.com">info@tiffin.com</a> <span class="text-white px-3">|</span>
                        <a href="tel:9876543210">9876543210</a>
                    </div>
                    <div class="col-md-9 reg-links">
                        <ul class="navbar-right ">
                            <li class="">
                                <a href="#" style="padding: 6px 5px;margin-left: 0;"><i class="fab fa-facebook-f"></i></a>
                                <a href="#" style="padding: 6px 5px;margin-left: 0;"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                            </li>
                            <li>
                                <span class="px-4 text-white">|</span>
                            </li>


                            @if(Auth::guard('customer')->check())

                                    <li class="nav-item dropdown">
                                            <a class="nav-link dropdown-toggle no-padding" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            MY account
                                            </a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" >{{ Auth::guard('customer')->user()->name }}</a>
                                            <a class="dropdown-item" href="#">Profile</a>
                                            <a class="dropdown-item" href="#">Orders</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="{{ route('customer.logout') }}">Logout</a>
                                        </div>
                                    </li>


                            @else
                                <li class="">
                                        <a class="" href="{{ route('customer.login') }}">Login</a> <span class="px-1 text-white">/</span>
                                </li>
                                <li class=""><a class="" href="{{ route('customer.register') }}">Register</a></li>
                            @endif

                            <li><span class="px-4 text-white">|</span></li>

                            <li><a href="#" id="cart"><i class="fa fa-shopping-cart"></i> Cart <span class="badge">3</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--end shopping-cart -->
        <div class="shopping-cart ">
            <div class="shopping-cart-header">
            <i class="fa fa-shopping-cart cart-icon"></i><span class="badge">3</span>
            <div class="shopping-cart-total">
                <span class="lighter-text">Total:</span>
                <span class="main-color-text">$2,229.97</span>
            </div>
            </div> <!--end shopping-cart-header -->

            <ul class="shopping-cart-items">
            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cart-item1.jpg" alt="item1" />
                <span class="item-name">Sony DSC-RX100M III</span>
                <span class="item-price">$849.99</span>
                <span class="item-quantity">Quantity: 01</span>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cart-item2.jpg" alt="item1" />
                <span class="item-name">KS Automatic Mechanic...</span>
                <span class="item-price">$1,249.99</span>
                <span class="item-quantity">Quantity: 01</span>
            </li>

            <li class="clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/cart-item3.jpg" alt="item1" />
                <span class="item-name">Kindle, 6" Glare-Free To...</span>
                <span class="item-price">$129.99</span>
                <span class="item-quantity">Quantity: 01</span>
            </li>
            </ul>

            <a href="#" class="button">Checkout</a>
        </div> <!--end shopping-cart -->


        <div class="main-menu container">
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
                <a class="navbar-brand" href="#"><img src="{{ asset('assets/shop/img/logo.png') }}" class="img-fluid main-logo" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="text-warning">Visit</span><br>Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="text-warning">Now</span><br>Order</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="text-warning">Book</span><br>Special</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="text-warning">Join</span><br>Career</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><span class="text-warning">Get In</span><br>Contact</a>
                        </li>
                    </ul>
                    <div class="links">
                        <a class="nav-link" href="{{ route('customer.login') }}"><img src="{{ asset('assets/shop/img/new.png') }}" alt="" class="img-responsive ld-img"></a>
                        <a class="nav-link" href="{{ route('customer.register') }}"><img src="{{ asset('assets/shop/img/return.png') }}" alt="" class="img-responsive ld-img"></a>
                    </div>
                </div>
            </nav>
        </div>
    </header>
</div>

@push('js')
    <script>
        $(function () {
            $('#cart').click(function (e) {
                e.preventDefault();
                $('.shopping-cart').toggle();
            });
        });
    </script>
@endpush
