如何在 Laravel 上修复侧边栏导航？适用于 Laravel 5 但不适用于 10
问题描述 投票：0回答：0
主题和侧边栏没有出现，只有文本和列表出现在那里。其他一切都工作正常，包括链接。只是 UI/UX 没有按预期出现。
dash.blade
<!DOCTYPE html>
<html>
<head>
<title>Perpustakaan Perkantas Back-Office - @yield('title')</title>
@include('partials.dashHead')
</head>
<body>
<div class="wrapper">
@include('partials.dashNavbar')
@include('partials.admin.dashSidebar')
<div class="content-wrapper">
<section class="content">
@yield('content')
</section>
</div>
@include('partials.dashFooter')
</div>
</body>
</html>
dashHead.blade
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('dash/plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{{ asset('dash/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
<link rel="stylesheet" href="{{ asset('dash/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('dash/plugins/jqvmap/jqvmap.min.css') }}">
<link rel="stylesheet" href="{{ asset('dash/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="{{ asset('dash/plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<link rel="stylesheet" href="{{ asset('dash/plugins/daterangepicker/daterangepicker.css') }}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<script src="{{ asset('vendor/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('dash/plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('dash/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<script src="{{ asset('dash/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('dash/plugins/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('dash/plugins/sparklines/sparkline.js') }}"></script>
<script src="{{ asset('dash/plugins/jqvmap/jquery.vmap.min.js') }}"></script>
<script src="{{ asset('dash/plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
<script src="{{ asset('dash/plugins/jquery-knob/jquery.knob.min.js') }}"></script>
<script src="{{ asset('dash/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('dash/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('dash/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
<script src="{{ asset('dash/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
<script src="{{ asset('dash/dist/js/adminlte.js') }}"></script>
<script src="{{ asset('dash/dist/js/pages/dashboard.js') }}"></script>
<script src="{{ asset('dash/dist/js/demo.js') }}"></script>
dashNavbar.blade
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<i class="fas fa-sign-out-alt"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
</ul>
</nav>
dashSidebar.blade
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<span class="brand-text font-weight-light">Perpustakaan Perkantas Back-Office</span>
</a>
<div class="sidebar">
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="info">
<p>Halaman Admin</p>
</div>
</div>
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{ url('/admin/dashboard')}}" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Admin's Home
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-user-alt"></i>
<p>
Kelola Admin
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/admin/admin/')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Admin Index</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/admin/create')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buat Admin</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users-cog"></i>
<p>
Kelola User
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/admin/user/')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>User Index</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/user/create')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buat User</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Kelola Buku
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/admin/buku/')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buku index</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/buku/create')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buat Buku</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/kategori/')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Kategori index</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/kategori/create')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buat Kategori</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Kelola Peminjaman Buku
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/admin/pinjam/create')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Buat Pinjaman Baru</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/pinjam')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Index Peminjaman - aktif</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/pinjam/all')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Index Peminjaman - semua</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/admin/pinjam/kembali')}}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Scan Pengembalian Buku</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
index.blade
@extends('layouts.dash')
@section('title', 'Admin Dashboard')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card-body">
<h1>
Hello Admin, Selamat Datang Di Perpustakaan Perkantas Back-Office Website!
</h1>
</div>
<div class="card mb-4">
<a href = "/admin/admin">
<div class="card-body">
<h2 class="card-title">Kelola Admin</h2>
</div>
</a>
<a href = "/admin/user">
<div class="card-body">
<h2 class="card-title">Kelola User</h2>
</div>
</a>
<a href = "/admin/buku">
<div class="card-body">
<h2 class="card-title">Kelola Buku</h2>
</div>
</a>
<a href = "/admin/pinjam">
<div class="card-body">
<h2 class="card-title">Awasi Peminjaman Buku</h2>
</div>
</a>
</div>
</div>
</div>
</div>
@endsection
dashFooter.blade
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 1.0
</div>
<strong>Created at</strong> 2023 <strong>For Perpustakaan Perkantas</strong>. Created By <strong>Kholid Syaifullah, Michael Nathan, and</strong>
</footer>
在我之前使用 Laravel 5 的项目中，这段代码运行良好，并且 UI/UX 符合预期，但当我在 Laravel 9/10 上尝试时，我得到的只是一个带有链接的文本列表。
我期待的是像这张图片，但不太详细。
最新问题
- 在两个 Flask 应用程序之间共享 Flask-SQLAlchemy
- Python：Tkinter 框架出现/消失并且不显示子部件
- 访问 Nest Thermostat 额外温度传感器？
- 在实体内索引数组的最佳实践
- “flex: 1”如何作用于列 Flex 容器中的 <img/> 标签？
- Firestore 安全规则缓存 get()
- 无法从 App Engine Go 获取数据存储区复合索引工作
- permission.READ_CONTACTS 似乎不起作用
- Gitlab代码审查批量评论？
- 缩小与浮动元素共享空间的 HTML 元素的边框
- 断言GCC返回值在某个范围内
- Kubernetes Java API 不使用提供的用户名密码
- 用java从Oracle数据库读取阿拉伯语数据
- 忽略Insert from select语句SQL中的重复键错误
- grunt htmlmin - 无法让它缩小 htm，完美缩小 CSS 和 JS
- 优化Google Sheets中多位参赛者的“朋友和敌人”统计计算
- .NET 8 Blazor 服务器静态文件路由
- 如何查看Python日志的最大错误级别？
- 有没有办法可以精确匹配一个字符？
- 如何通过 AWS Amplify for Flutter 进行无密码登录和注册
© www.soinside.com 2019 - 2024. All rights reserved.