<header>

    <nav class="uk-navbar-container uk-navbar-transparent uk-light" uk-navbar>
        <div class="uk-navbar-left">

            <a class="uk-navbar-item uk-logo" href="/">{{ config("app.name") }}</a>

            <ul class="uk-navbar-nav">
                @auth
                <li class="{{ Request::route()->getName() == "me.dashboard" ? "uk-active" : "" }}"><a href="{{ route("me.dashboard") }}">Dashboard</a></li>
                @endauth
                {{--
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Item</a></li>
                --}}
            </ul>
        </div>
        <div class="uk-navbar-right">
            <div class="uk-navbar-nav">
                @guest
                <li><a href="{{ route("oauth.twitch.login") }}" uk-icon="sign-in">Sign In</a></li>
                @endguest

                @auth
                <li>
                    <a href="#"><img src="{{ Auth::user()->profile_image }}" alt="User profile image" class="uk-border-circle uk-margin-small-right" width="40px">{{ Auth::user()->username }}</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li><a href="{{ route("oauth.twitch.logout") }}" uk-icon="sign-out">Sign Out</a></li>
                        </ul>
                    </div>
                </li>
                @endauth
            </div>
        </div>
    </nav>

</header>
