Themes and sidebar didn’t appear and only text and list appear there. Everything else just working fine, including links. It was just UI/UX didn’t came out as expected.
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>
In my previous project using Laravel 5 this code was working fine and UI/UX came out as expected, but when I tried it on Laravel 9/10 what I got was just a list of text with links.
What I was expecting was something like this image but less detailed.Example So my only problems right now was Navigation bar and sidebar on a page isn’t working but content on navbar and sidebar appeared.
2
Answers
Seems like your css is not being loaded.
The problem is that your css is not being loaded.
Reasons might be that in old project your theme assets were complied with webpack.
In Laravel 10 webpack is replace by vite.
In Vite you load you assets like.
Here is the link for laravel vite.
Let me show you how to achieve it.
First go in your vite.config.js file and add all the assest files.
after that go in your dashHead.blade.php file and include your assets with vite helper.
This is just the sample and hopefully it will help you.