Question 169726 in Laravel Question posted in
The official Laravel Documentation can be found here.

Can I get help fixing a sidebar nav on Laravel 5 that won’t work on 10?

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.

Screenshot of the problem

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.

Tags:

2

Answers


  1. 0

    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.

    @vite([‘resources/css/app.css’, ‘resources/js/app.js’])

    Here is the link for laravel vite.

    Login or Signup to reply.
  2. 0

    Let me show you how to achieve it.
    First go in your vite.config.js file and add all the assest files.

      laravel({
    input: [
      'resources/sass/app.scss',//here add your css files one by one
      'resources/js/app.js',// here add your script files one by one
        ],
        refresh: true,
    }),

    after that go in your dashHead.blade.php file and include your assets with vite helper.

    @vite(['resources/js/app.js','resources/sass/app.scss'])

    This is just the sample and hopefully it will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search