| 
<aside class="w-full md:w-64 bg-white md:min-h-screen border border-r-1" x-data="{ isOpen: false }"><div class="flex items-center justify-between md:justify-center bg-white p-4 h-16">
 <a href="#" class="flex items-center justify-center">
 <x-logo class="h-16 w-auto" />
 </a>
 <div class="flex md:hidden">
 <button type="button" @click="isOpen = !isOpen"
 class="text-gray-300 hover:text-gray-500 focus:outline-none focus:text-gray-500">
 <svg class="fill-current w-8" fill="none" stroke-linecap="round" stroke-linejoin="round"
 stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 <path d="M4 6h16M4 12h16M4 18h16"></path>
 </svg>
 </button>
 </div>
 </div>
 <div class="px-2 py-6 md:block" :class="isOpen? 'block': 'hidden'" >
 <ul>
 <li class="w-full items-center pl-4 {{ active(['admin.dashboard'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.dashboard')}}">
 <i class="fas fa-tv opacity-75 mr-2 text-sm"></i> {{ __('Dashboard') }}
 </a>
 </li>
 <li class="py-3 rounded mt-2">
 <a href="#" class="font-thin">{{ __('Channel') }}</a>
 </li>
 <li class="w-full items-center pl-4 {{ active(['admin.channel'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.channel')}}">
 <i class="fas fa-list opacity-75 mr-2 text-sm"></i> {{ __('Channels') }}
 </a>
 </li>
 <li class="w-full items-center pl-4 {{ active(['admin.video'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.video')}}">
 <i class="fas fa-video opacity-75 mr-2 text-sm"></i> {{ __('Videos') }}
 </a>
 </li>
 <li class="w-full items-center pl-4 {{ active(['admin.user'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.user')}}">
 <i class="fas fa-users opacity-75 mr-2 text-sm"></i> {{ __('Users') }}
 </a>
 </li>
 <li class="py-3 rounded mt-2">
 <a href="#" class="font-thin">{{ __('Access') }}</a>
 </li>
 <li class="w-full items-center pl-4 {{ active(['admin.admin'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.admin')}}">
 <i class="fas fa-user-plus opacity-75 mr-2 text-sm"></i> {{ __('Admins') }}
 </a>
 </li>
 <li class="w-full items-center pl-4 {{ active(['admin.settings'], 'border-l-2 border-gray-800') }}">
 <a class="text-gray-800 hover:text-red-600 text-xs uppercase py-3 font-bold block" href="{{ route('admin.settings')}}">
 <i class="fas fa-cogs opacity-75 mr-2 text-sm"></i> {{ __('Settings') }}
 </a>
 </li>
 </ul>
 <div class="border-t border-gray-700 -mx-2 mt-2 md:hidden"></div>
 <ul class="mt-6 md:hidden">
 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 <a href="#" class="mx-2 text-gray-300">Account Settings</a>
 </li>
 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 <button class="mx-2 text-gray-300" @click="logout">Logout</button>
 </li>
 </ul>
 </div>
 </aside>
 
 |