安装图标
composer require owenvoke/blade-fontawesome
composer require davidhsianturi/blade-bootstrap-icons
自定义侧边栏
resources\views\navigation-menu.blade.php
<aside aria-label="Sidebar"
class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700">
<div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
<ul class="space-y-2 font-medium">
<li>
<a href="{{ route('home') }}"
wire:navigate
{{ request()->routeIs('home') ? 'aria-current="page"' : '' }}
class="{{ request()->routeIs('home') ? 'bg-gray-900 text-white hover:bg-gray-700' : '' }} flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<x-icon name="fas.home"/>
<span class="flex-1 ms-3 whitespace-nowrap">
首页
</span>
</a>
<a href="{{ route('trending') }}"
wire:navigate
{{ request()->routeIs('trending') ? 'aria-current="page"' : '' }}
class="{{ request()->routeIs('trending') ? 'bg-gray-900 text-white hover:bg-gray-700' : '' }} flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<x-icon name="fas.hashtag"/>
<span class="flex-1 ms-3 whitespace-nowrap">
Trending
</span>
</a>
</li>
</ul>
</div>
</aside>
正文背景颜色
resources\CSS\app.css
body, html {
@apply bg-slate-50;
}
resources\views\dashboard.blade.php 删除
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
resources\views\app.blade.php 删除
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
resources\views\app.blade.php添加一个样式
<main class="p-4 mt-20 sm:ml-64">
{{ $slot }}
</main>
效果图：
