search

jeroennoten / Laravel-AdminLTE

Easy AdminLTE integration with Laravel
MIT License
3.78k stars 1.08k forks source link

[BUG] Hide side bar classes no working ? #1271

Closed SMEWebify closed 2 months ago

SMEWebify commented 2 months ago

Good morning,

Describe the bug

I initially wanted to follow what was here: https://github.com/jeroennoten/Laravel-AdminLTE/issues/1032

I then added the body sidebar-hidden class

    /*
     |------------------------------------------------ -------------------------
     | Admin Panel Classes
     |------------------------------------------------ -------------------------
     |
     | Here you can change the look and behavior of the admin panel.
     |
     | For detailed instructions you can look at the admin panel classes here:
     | https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Layout-and-Styling-Configuration
     |
     */

     'classes_body' => 'sidebar-hidden',
     'classes_brand' => '',

but this one still appears image

Environment

Complete the next environment information.

Item Version
Laravel 10.0
jeroennoten/laravel-adminlte 3.9.2

Additional context

I tried to add the class directly like below, but I get nothing on the page

@extends('adminlte::page')

@section('title',)

@section('content_header')
  <h1>coucou</h1>
@stop

@section('content')
suer
@stop

@section('css')

<style>
    .sidebar-hidden{
        display: none
    }
</style >
@stop

@section('js')
@stop

am I using the configuration file incorrectly, or the location of the class?

dfsmania commented 2 months ago

Hi @SMEWebify , that's weird. I have tested your steps on a few projects I have around this package and it worked.

Can you verify AdminLTE version at file: vendor/almasaeed2010/adminlte/dist/js/adminlte.js. You should see something like next at the top of the file:

/*!
 * AdminLTE v3.2.0 (https://adminlte.io)
 * Copyright 2014-2022 Colorlib <https://colorlib.com>
 * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
 */

Also, check if sidebar-hidden exists in the AdminLTE distribution files, for example:

grep -r "sidebar-hidden" vendor/almasaeed2010/adminlte/dist/css/adminlte.css

.sidebar-hidden .main-sidebar,
.sidebar-hidden.sidebar-mini.sidebar-collapse .main-sidebar {
.sidebar-hidden .content-wrapper,
.sidebar-hidden .main-header,
.sidebar-hidden.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-hidden.sidebar-mini.sidebar-collapse .main-header {

Finally, use the browser's tool to check how this class is affecting the sidebar:

Screenshot from 2024-04-19 17-58-37

SMEWebify commented 2 months ago

Hi @dfsmania

Thank you for the response, I actually checked that the css class existed and it does, the version is also compliant in the vendor folder image Compared to your capture, I see that the classes do not come from the same css file image worse, I see you call main-sidebar.scss and my file in the browser doesn't look the same however, in my search node_modules\admin-lte\build\scss\ seems to have this class image

I don't understand what's happening

dfsmania commented 2 months ago

@SMEWebify There's something different in your installation, why is adminlte package installed as a node module instead of being installed in the vendor folder as a php composer dependency? Also, I do not see the class sidebar-hidden in the last two screenshots you've shared.

Have you published the views form this package and added some customization? For this, check if you have the folder resources/views/vendor/adminlte.

I can't imagine how your project is working if you haven't customized those views to actually use your adminlte files installed with node.

Please, use the browser's inspector tool and share the head markup, I want to see what files are you using. At next, I share mines:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="CrZCeMeLSKA4G9GC6vBcPXBEJjAytpyrZ8d9h0nB">    
    <title>My Project | Home</title>   
    <link rel="stylesheet" href="http://127.0.0.1:8001/vendor/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="http://127.0.0.1:8001/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="http://127.0.0.1:8001/vendor/adminlte/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">            
    <link rel="stylesheet" href="http://127.0.0.1:8001/vendor/sweetalert2/sweetalert2.min.css">
    <link rel="shortcut icon" href="http://127.0.0.1:8001/favicons/favicon.ico">    
</head>
SMEWebify commented 2 months ago

@dfsmania

difficult to say, I don't remember having done anything in this direction.

I did not publish the views, attached the mentioned folder (resources/views/vendor/adminlte) image

What is the purpose of this node_modules? (I don't know this part of its environment well)

the header tag together with yours it seems to me

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="Pni1K9kztvoh911XAREzzmqrjmiRDXZ2iIS69Haa">
    <title> Interface Atelier  </title>

        <link rel="stylesheet" href="http://127.0.0.1:8000/vendor/fontawesome-free/css/all.min.css">
        <link rel="stylesheet" href="http://127.0.0.1:8000/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
        <link rel="stylesheet" href="http://127.0.0.1:8000/vendor/adminlte/dist/css/adminlte.min.css">

        <link rel="stylesheet" href="https://fonts.googleapis.com/cssfamily=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
          <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css">
          <link rel="stylesheet" href="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">

        <!-- Livewire Styles --><style>[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.default], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none;}</style>

        <link rel="shortcut icon" href="http://127.0.0.1:8000/favicons/favicon.ico">
        <link rel="apple-touch-icon" sizes="57x57" href="http://127.0.0.1:8000/favicons/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="http://127.0.0.1:8000/favicons/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="http://127.0.0.1:8000/favicons/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="http://127.0.0.1:8000/favicons/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="http://127.0.0.1:8000/favicons/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="http://127.0.0.1:8000/favicons/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="http://127.0.0.1:8000/favicons/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="http://127.0.0.1:8000/favicons/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="http://127.0.0.1:8000/favicons/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="16x16" href="http://127.0.0.1:8000/favicons/favicon-16x16.png">
        <link rel="icon" type="image/png" sizes="32x32" href="http://127.0.0.1:8000/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="http://127.0.0.1:8000/favicons/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="192x192" href="http://127.0.0.1:8000/favicons/android-icon-192x192.png">
        <link rel="manifest" crossorigin="use-credentials" href="http://127.0.0.1:8000/favicons/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="http://127.0.0.1:8000/favicon/ms-icon-144x144.png">

<style type="text/css">/* Chart.js */
@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style><style>/* Make clicks pass-through */

    #nprogress {
      pointer-events: none;
    }

    #nprogress .bar {
      background: var(--livewire-progress-bar-color, #29d);

      position: fixed;
      z-index: 1031;
      top: 0;
      left: 0;

      width: 100%;
      height: 2px;
    }

    /* Fancy blur effect */
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
      width: 100px;
      height: 100%;
      box-shadow: 0 0 10px #29d, 0 0 5px #29d;
      opacity: 1.0;

      -webkit-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
              transform: rotate(3deg) translate(0px, -4px);
    }

    /* Remove these to get rid of the spinner */
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }

    #nprogress .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;

      border: solid 2px transparent;
      border-top-color: var(--livewire-progress-bar-color, #29d);
      border-left-color: var(--livewire-progress-bar-color, #29d);
      border-radius: 50%;

      -webkit-animation: nprogress-spinner 400ms linear infinite;
              animation: nprogress-spinner 400ms linear infinite;
    }

    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }

    .nprogress-custom-parent #nprogress .spinner,
    .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }

    @-webkit-keyframes nprogress-spinner {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    </style>
<script type="text/javascript"> window.hasMobileFirstExtension = true;</script>
</head>
dfsmania commented 2 months ago

Ok, let's go step by step:

First, node_modules is the folder where dependencies are installed with npm (npm is a package manager for Javascript). In your Laravel project, node_module will hold all the Javascript dependencies your project needs to work, and the vendor folder will hold al the php dependencies that your project needs to work, the package manager for the php dependencies is the composer tool.

Second, in this project here, we require the AdminLTE package as a PHP dependency, so by default AdminLTE package will be downloaded and installed in the location: vendor/almasaeed2010/adminlte/.

[!Important] TASK 1: Please confirm that the vendor/almasaeed2010/adminlte/ folder exists in your project.

Third, when you install this package, the distribution (compiled) files form the AdminLTE package are copied to the public/vendor/adminlte folder, so they can be accessed by your web application.

[!Important] TASK 2: Please confirm that the public/vendor/adminlte folder exists in your project. Then share it's content, should be like:

public/vendor/adminlte/dist/
├── css
│   ├── adminlte.css
│   ├── adminlte.css.map
│   ├── adminlte.min.css
│   └── adminlte.min.css.map
├── img
│   └── AdminLTELogo.png
└── js
   ├── adminlte.js
   ├── adminlte.js.map
   ├── adminlte.min.js
   └── adminlte.min.js.map

Fourth, for what I can see in your screenshot regarding the head markup, the project is looking for adminlte distribution files in the public/vendor/adminlte and that's fine.

[!Important] TASK 3: Confirm sidebar-hidden class can be found in public/vendor/adminlte folder. The last time you shared a screen shoot that confirm the existence of that class in the the node-modules/admin-lte folder, but that installation of adminlte shouldn't be used. I'm not sure why you have also installed adminlte package as a Javascript dependency.

If all the previous steps are OK, then you need to user your browser's inspector for the sidebar and check how the sidebar-hidden class is affecting the element when it's added to the body. In my project I can found the next rule, that I've shared previously with a screenshot:

.sidebar-hidden .main-sidebar, .sidebar-hidden.sidebar-mini.sidebar-collapse .main-sidebar {
  display: none !important;
}

Maybe in your project, that class is conflicting with other stylesheet you are using and doesn't apply the display: none property to the sidebar.

SMEWebify commented 2 months ago

thank you for all these details !

Task 1 to 2, everything is correct

on the other hand, step 3 I don't have the class in the public folder.

Maybe the version installed 3 years ago did not include this class and since then the files have not been updated ?

image

I compared the two files, I have 600 lines of difference

I then copied all the files (larger from the node to the public vendor, and great it works!!

image

thank you very much for helping me understand!

two quick questions before closing:

dfsmania commented 2 months ago

@SMEWebify You should not copy the files from the node_modules/admin-lte folder to the public/vendor/adminlte. Instead, perform the update procedure of this package. If you follow those steps, the public/vendor/adminlte files will be updated. Regarding your questions:

\public\vendor\adminlte is it sometimes updated during composer updates ?

No, not automatically, you should always follow the update procedure mentioned previously every time you update this package.

how could I have installed adminlte in the node? via an npm command ?

You probably have the adminlte package as a dependency in your package.json file and have executed the npm install command.

Finally, remember we use the AdminLTE package as a PHP dependency here, so you could forget about the node package. Maybe you can search in the internet how to get rid of it, unless you're using it for other purposes.

SMEWebify commented 2 months ago

Thx @dfsmania !