account pages: login, order history, order details, account details, wishlist

resources/views/layouts/account.blade.php

@@ -0,0 +1,71 @@
+{{--
+    Account area: full-width, fixed-width sidebar + fluid content. Pages set
+    @section('title') and fill @section('account').
+
+    Below lg the sidebar becomes a horizontally scrollable row above the
+    content.
+--}}
+@extends('layouts.app')
+
+@push('seo')
+    <meta name="robots" content="noindex, nofollow">
+@endpush
+
+@php
+    $accountNav = [
+        [
+            'label' => __('storefront.account.nav_profile'),
+            'href' => route('account'),
+            'active' => request()->routeIs('account', 'account.email.*'),
+        ],
+        [
+            'label' => __('storefront.account.nav_orders'),
+            'href' => route('account.orders'),
+            'active' => request()->routeIs('account.orders*'),
+        ],
+        [
+            'label' => __('storefront.account.nav_wishlist'),
+            'href' => route('account.wishlist'),
+            'active' => request()->routeIs('account.wishlist'),
+        ],
+    ];
+
+    $accountNavLink = 'nav-link uppercase inline-flex shrink-0 whitespace-nowrap font-display font-extrabold italic text-black no-underline';
+@endphp
+
+@section('content')
+
+    <div class="flex flex-col lg:flex-row lg:min-h-[calc(100vh-102px)]">
+
+        <aside class="border-b border-black lg:w-80 lg:shrink-0 lg:border-b-0 lg:border-r">
+            <nav aria-label="{{ __('storefront.nav.account') }}">
+                <ul class="flex gap-8 overflow-x-auto px-4 py-5 sm:px-8 lg:flex-col lg:gap-5 lg:overflow-visible lg:px-10 lg:py-12">
+                    @foreach ($accountNav as $item)
+                        <li class="shrink-0">
+                            <a
+                                href="{{ $item['href'] }}"
+                                @class([$accountNavLink, 'is-active' => $item['active']])
+                                @if ($item['active']) aria-current="page" @endif
+                            ><span>{{ $item['label'] }}</span></a>
+                        </li>
+                    @endforeach
+
+                    <li class="shrink-0">
+                        <form method="POST" action="{{ route('logout') }}">
+                            @csrf
+                            <button type="submit" class="{{ $accountNavLink }} cursor-pointer">
+                                <span>{{ __('storefront.auth.logout') }}</span>
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </nav>
+        </aside>
+
+        <div class="min-w-0 flex-1 px-4 py-12 sm:px-8 lg:px-16 lg:py-16">
+            @yield('account')
+        </div>
+
+    </div>
+
+@endsection