{{-- 電腦版 --}}
<nav class="header-navbar navbar-expand-lg navbar d-xl-block d-none">
    <div class="navbar-wrapper">
        <div class="navbar-container content">
            <div class="navbar-collapse">

                {{-- 電腦版 logo --}}
                <div class="pc-brand d-xl-block d-none">
                    <a class="navbar-brand" href="{{ route('frontend.index') }}">
                        <div class="brand-logo">
                            <img src="{{asset('images/logo/logo.png')}}" class="brand-logo-image" alt="">
                        </div>
                        <h2 class="brand-text mb-0"></h2>
                    </a>
                </div>

                <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">                   
                    <ul class="nav navbar-nav">
                        <li class="nav-item mobile-menu d-xl-none mr-auto">
                            <a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ficon bx bx-menu"></i></a>
                        </li>
                    </ul>
                </div>

                @auth
                    <ul class="nav navbar-nav float-right nav-right-item">
                        {{-- <li class="nav-item d-none d-lg-block">
                            <a class="nav-link nav-link-expand"><i class="ficon bx bx-fullscreen"></i></a>
                        </li> --}}
                        <li class="dropdown dropdown-user nav-item">
                            <a class="dropdown-toggle nav-link dropdown-user-link" data-toggle="dropdown" href="#">
                                <div class="user-nav d-sm-flex d-none">
                                    <span class="user-name">{{ Auth::user()->name ?? '' }}</span>
                                    <span class="user-status text-muted">{{ Auth::user()->mobile ?? '' }}</span>
                                </div>
                                <span>
                                    <i class='bx bx-user-circle avatar-box'></i>
                                </span>
                            </a>
                            {{-- 目前登出交給各服務
                                <div class="dropdown-menu dropdown-menu-right pb-0">
                                    <a class="dropdown-item" href="{{ Route('frontend.logout')}}">
                                        <i class="bx bx-power-off mr-50"></i> 登出
                                    </a>
                                </div> 
                            --}}
                        </li>
                    </ul>
                @endauth
            </div>
        </div>
    </div>
</nav>

{{-- 手機版 --}}
<nav class="header-navbar navbar-expand-lg navbar d-xl-none">    
    {{-- 手機版 logo --}}
    <div class="d-xl-none d-flex w-100 position-fixed justify-content-center">
        <a class="navbar-brand" href="{{ route('frontend.index') }}">
            <div class="brand-logo">
                <img src="{{asset('images/logo/logo.png')}}" class="brand-logo-image" alt="">
            </div>
            <h2 class="brand-text mb-0"></h2>
        </a>
    </div>

    <div class="navbar-wrapper">
        <div class="navbar-container content">
            <div class="navbar-collapse" id="navbar-mobile">
                <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
                    <ul class="nav navbar-nav">
                        <li class="nav-item mobile-menu d-xl-none mr-auto">
                            <a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ficon bx bx-menu"></i></a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav bookmark-icons">
                        {{-- icon 區
                        <li class="nav-item d-none d-lg-block"><a class="nav-link" href="{{asset('app-email')}}" data-toggle="tooltip" data-placement="top" title="Email"><i class="ficon bx bx-envelope"></i></a></li>
                        <li class="nav-item d-none d-lg-block"><a class="nav-link" href="{{asset('app-chat')}}" data-toggle="tooltip" data-placement="top" title="Chat"><i class="ficon bx bx-chat"></i></a></li>
                        <li class="nav-item d-none d-lg-block"><a class="nav-link" href="{{asset('app-todo')}}" data-toggle="tooltip" data-placement="top" title="Todo"><i class="ficon bx bx-check-circle"></i></a></li>
                        <li class="nav-item d-none d-lg-block"><a class="nav-link" href="{{asset('app-calendar')}}" data-toggle="tooltip" data-placement="top" title="Calendar"><i class="ficon bx bx-calendar-alt"></i></a></li> 
                        --}}
                    </ul>
                </div>

                @auth 
                    <ul class="nav navbar-nav float-right">
                        <li class="nav-item d-none d-lg-block">
                            <a class="nav-link nav-link-expand"><i class="ficon bx bx-fullscreen"></i></a>
                        </li>
                        <li class="dropdown dropdown-user nav-item">
                            <a class="dropdown-toggle nav-link dropdown-user-link" data-toggle="dropdown" href="#">
                                <div class="user-nav d-sm-flex d-none">
                                    <span class="user-name">{{ Auth::user()->name }}</span>
                                    <span class="user-status text-muted">{{ Auth::user()->mobile ?? '' }}</span>
                                </div>
                                <span>
                                    <i class='bx bx-user-circle avatar-box'></i>
                                </span>
                            </a>
                            {{-- <div class="dropdown-menu dropdown-menu-right pb-0">
                                <a class="dropdown-item" href="{{ Route('frontend.logout')}}">
                                    <i class="bx bx-power-off mr-50"></i> 登出
                                </a>
                            </div> --}}
                        </li>
                    </ul>
                @endauth
            </div>
        </div>
    </div>
</nav>