@if ((new \Jenssegers\Agent\Agent())->isDesktop() || (new \Jenssegers\Agent\Agent())->isTablet())
    <aside class="hidden md:block">
        <nav class="sticky top-20" wire:ignore>
            <div class="flex h-[calc(100vh-6rem)] flex-col justify-between">
                <div class="flex flex-col px-2">
                    @if (config('alma.default_feed') === 'popular')
                        {{-- Popular Stories --}}
                        <a href="{{ route('home') }}"
                            class="{{ request()->routeIs('home') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800"
                            aria-current="page">
                            <x-icons.flash
                                class="{{ request()->routeIs('home') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('Popular') }}
                            </span>
                        </a>
                        {{-- Latest Stories --}}
                        <a href="{{ route('latest') }}"
                            class="{{ request()->routeIs('latest') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                            <x-icons.clock
                                class="{{ request()->routeIs('latest') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('Latest') }}
                            </span>
                        </a>
                    @else
                        {{-- Latest Stories --}}
                        <a href="{{ route('home') }}"
                            class="{{ request()->routeIs('home') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800"
                            aria-current="page">
                            <x-icons.clock
                                class="{{ request()->routeIs('home') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('Latest') }}
                            </span>
                        </a>
                        {{-- Popular Stories --}}
                        <a href="{{ route('popular') }}"
                            class="{{ request()->routeIs('popular') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                            <x-icons.flash
                                class="{{ request()->routeIs('popular') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('Popular') }}
                            </span>
                        </a>
                    @endif
                    {{-- Featured Stories --}}
                    <a href="{{ route('featured') }}"
                        class="{{ request()->routeIs('featured') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                        <x-icons.star-featured
                            class="{{ request()->routeIs('featured') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                        <span class="truncate">
                            {{ __('Featured') }}
                        </span>
                    </a>
                    {{-- Top Communities --}}
                    <a href="{{ route('communities') }}"
                        class="{{ request()->routeIs('communities') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                        <x-icons.top-communities
                            class="{{ request()->routeIs('communities') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                        <span class="truncate">
                            {{ __('Communities') }}
                        </span>
                    </a>
                    @auth
                        {{-- Feed --}}
                        <a href="{{ route('myfeed') }}"
                            class="{{ request()->routeIs('myfeed') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                            <x-icons.user.feed
                                class="{{ request()->routeIs('myfeed') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('My feed') }}
                            </span>
                        </a>
                        {{-- Saved Stories and Comments --}}
                        <a href="{{ route('saved.stories') }}"
                            class="{{ request()->routeIs('saved.stories') || request()->routeIs('saved.comments') ? 'bg-white dark:bg-slate-800' : '' }} group mb-1 flex items-center rounded-lg px-4 py-2.5 text-base font-semibold transition duration-300 ease-in-out hover:bg-white/60 dark:text-slate-200 dark:hover:bg-slate-800">
                            <x-icons.user.saved
                                class="{{ request()->routeIs('saved.stories') || request()->routeIs('saved.comments') ? 'text-primary-500 dark:text-primary-500' : '' }} mr-3 h-6 w-6 flex-shrink-0 text-gray-700 dark:text-slate-200" />
                            <span class="truncate">
                                {{ __('Saved') }}
                            </span>
                        </a>
                    @endauth
                    <div class="mt-5">
                        @if (Auth::guest())
                            <x-buttons.write href="{{ route('story.create') }}"
                                class="flex w-full items-center gap-2 font-semibold">
                                <x-icons.write-edit class="h-5 w-5 drop-shadow" />
                                <span class="hidden tracking-wide drop-shadow md2:block">
                                    {{ __('Write') }}
                                </span>
                            </x-buttons.write>
                        @else
                            @can('add_stories')
                                <x-buttons.write href="{{ route('story.create') }}"
                                    class="flex w-full items-center gap-2 font-semibold">
                                    <x-icons.write-edit class="h-5 w-5 drop-shadow" />
                                    <span class="hidden tracking-wide drop-shadow md2:block">
                                        {{ __('Write') }}
                                    </span>
                                </x-buttons.write>
                            @else
                                <x-buttons.write
                                    class="flex w-full items-center gap-2 font-semibold">
                                    <x-icons.write-edit class="h-5 w-5 drop-shadow" />
                                    <span class="hidden tracking-wide drop-shadow md2:block">
                                        {{ __('Write') }}
                                    </span>
                                </x-buttons.write>
                            @endcan
                        @endif
                    </div>
                </div>
                <div class="mt-5 px-4">
                    <div class="flex items-center gap-2">
                        @foreach (config('alma.social_profile_links') as $key => $link)
                            {{-- Facebook --}}
                            @if ($key === 'facebook' && !empty($link))
                                <a href="{{ $link }}"
                                    target="_blank"
                                    title="{{ __('Facebook') }}"
                                    class="font-base cursor-pointer items-center rounded-lg p-1 transition duration-200 ease-linear hover:bg-white hover:shadow-sm focus:outline-none dark:hover:bg-slate-700">
                                    <div class="flex items-center">
                                        <x-icons.social.facebook class="h-4 w-4 text-[#2585ed]" />
                                    </div>
                                </a>
                            @endif
                            {{-- Twitter --}}
                            @if ($key === 'twitter_x' && !empty($link))
                                <a href="{{ $link }}"
                                    target="_blank"
                                    title="{{ __('X Corp.') }}"
                                    class="font-base cursor-pointer items-center rounded-lg p-1 transition duration-200 ease-linear hover:bg-white hover:shadow-sm focus:outline-none dark:text-slate-200 dark:hover:bg-slate-700">
                                    <div class="flex items-center">
                                        <x-icons.social.twitter-x class="h-4 w-4" />
                                    </div>
                                </a>
                            @endif
                            {{-- Instagram --}}
                            @if ($key === 'instagram' && !empty($link))
                                <a href="{{ $link }}"
                                    target="_blank"
                                    title="{{ __('Instagram') }}"
                                    class="font-base cursor-pointer items-center rounded-lg p-1 transition duration-200 ease-linear hover:bg-white hover:shadow-sm focus:outline-none dark:hover:bg-slate-700">
                                    <x-icons.social.instagram class="h-4 w-4 text-[#d62976]" />
                                </a>
                            @endif
                            {{-- Tiktok --}}
                            @if ($key === 'tiktok' && !empty($link))
                                <a href="{{ $link }}"
                                    target="_blank"
                                    title="{{ __('Tiktok') }}"
                                    class="font-base cursor-pointer items-center rounded-lg p-1 transition duration-200 ease-linear hover:bg-white hover:shadow-sm focus:outline-none dark:hover:bg-slate-700">
                                    <x-icons.social.tiktok class="h-4 w-4 text-[#01b6b0]" />
                                </a>
                            @endif
                        @endforeach
                    </div>
                    <x-menu.footer />
                </div>
            </div>
        </nav>
    </aside>
@endif