NavBar menu items not collapsing to a sidebar menu when authorized

CraftyDlx commented 4 years ago

Hello, the login page of the official Creative Tim demo site (https://www.creative-tim.com/live/material-dashboard-pro-laravel) contains a navbar which collapses to a sidebar to the right. I tried to achieve that with an identical NavBar on a different page after the user has logged in. The sidebar is created (after pressing the toggle button) but stays completely empty. Moreover, the exit "X" of the sidebar is working but looks greyed out. Could you give me a hint how to solve this? Thanks.

groovemen commented 4 years ago

Hello @CraftyDlx,

Thank you for using our products, you can check the function from material-dashboard-pro-html-v2.1.2/assets/js/material-dashboard.js form line 181 to 229. Don't forget to set the "off-canvas-sidebar" on your <body> tag. Related to the navbar-toggler color, please make sure that you have the same classes as in the login page.

**Please make sure that you are filling the mentioned ISSUE_TEMPLATE and please be sure that your issue title is a very small description of your issue as well; otherwise we will close your issue.

All the best, Stefan

CraftyDlx commented 4 years ago

1.) Thanks, just to understand this part of your answer: "Don't forget to set the "off-canvas-sidebar" on your body tag.": As your vanilla templates pre-login navbar is in '\resource\views\layouts\navs\guest.blade.php', I am using the same code in '...\auth.blade.php' and therefore there is no body tag, the file just contains the nav bar with it's items. So what body tag in which file are you referring to?

2.) Moreover, I don't understand why I would check or even modify the material-dashboard.js as the function works well for the login-page. I just want to use it in the same way for the post-login navbar. So it's not about js, I think.

3.) Regarding the navbar-toggler issue: I am already using the same classes and I want to add that there is also no mouseover effect in the "X" (the arrow does not turn into a hand on mouseover). I think there is also no function, because I can click anywhere in the main page area to hide the sidebar. So I guess the problem is not about the class.

4.) By the way: As you say "be sure that your issue title is a very small description of your issue as well;" I would like to know how exactly you would shorten my issue title while being as or more descriptive?

teamupdivision commented 4 years ago

Hello, regarding point 1) in the pages you need the "off-canvas-sidebar" class there is a piece of code that sets the body class tag, for instance in the login page code: @extends('layouts.app', [ 'class' => 'off-canvas-sidebar', 'classPage' => 'login-page', 'activePage' => 'login', 'title' => __('Material Dashboard'), 'pageBackground' => asset("material").'/img/login.jpg' ])

CraftyDlx commented 4 years ago

Okay, we are getting there but this brings new issues: I included @extends('layouts.app', ['activePage' => 'datatables', 'class' => 'off-canvas-sidebar', 'menuParent' => 'tables', 'titlePage' => __('User Management')]) to the \resources\views\users\index.blade.php. Now when the navbar collapses, there is a sidebar with the navbar menu items but...

1.) After including 'class' => 'off-canvas-sidebar' the navbar menu is rendered completely white. 2.) Right from the sidebar there is an empty area appearing, as wide and high as the sidebar. 3.) Still, there is no mouseover effect on the sidebar items. 4.) There is no function on the sidebar items. Clicking them just closes the sidebar. 5.) There is no "X" appearing to close the sidebar (maybe it is not visible, if so, it also has no mouseover effect).

I don't understand why 'class' => 'off-canvas-sidebar' obviously needs to mess with the css of the navbar and I also don't get why implementing this is nowhere in the docs. It's not an exotic function, it's a just a mobile menu taking place for a navbar.

CraftyDlx commented 4 years ago

'class' => 'off-canvas-sidebar' did not solve anything, because the sidebar is not useable. So how to preceed here, @teamupdivision ? How to explain why the mobile sidebar works flawlessly for the login page but not for any post-login page? The CSS issues I could fix for myself but 2.), 3.), 4.) are technical issues.

groovemen commented 4 years ago

Hello again,

Please send us a link to your project or at least a code snippet and the screenshots related to the issue to have a better picture of what's happening and to give a quicker solution.

Best, Stefan

CraftyDlx commented 4 years ago

My NavBar. It's pretty much layouts\navbars\navs\guest.blade.php just renamed in auth.blade.php for testing:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-white fixed-top text-black" style="padding:0px;">
  <div class="container">
    <div class="navbar-wrapper">
      <a class="navbar-brand" href="{{ route('home') }}">mytitle</a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="{{ route('home') }}" class="nav-link">
            <i class="material-icons">dashboard</i> {{ __('Dashboard') }}
          </a>
        </li>
        <li class="nav-item{{ $activePage == 'pricing' ? ' active' : '' }} ">
            <a href="{{ route('page.pricing') }}" class="nav-link">
              <i class="material-icons">shopping_basket</i> {{ __('Pricing') }}
            </a>
          </li>
        <li class="nav-item{{ $activePage == 'register' ? ' active' : '' }}">
          <a href="{{ route('register') }}" class="nav-link">
            <i class="material-icons">person_add</i> {{ __('Register') }}
          </a>
        </li>
                <li class="nav-item{{ $activePage == 'register' ? ' active' : '' }}">
          <a href="{{ route('register') }}" class="nav-link">
            <i class="material-icons">person</i> {{ __('Register') }}
          </a>
        </li>
        <li class="nav-item{{ $activePage == 'login' ? ' active' : '' }}">
          <a href="{{ route('login') }}" class="nav-link">
            <i class="material-icons">fingerprint</i> {{ __('Login') }}
          </a>
        </li>
        <li class="nav-item{{ $activePage == 'lock' ? ' active' : '' }} ">
          <a href="{{ route('page.lock') }}" class="nav-link">
            <i class="material-icons">lock_open</i> {{ __('Lock') }}
          </a>
        </li>
        @auth()
          <li class="nav-item">
              <a href="{{ route('logout') }}" class="nav-link" onclick="event.preventDefault();
              document.getElementById('logout-form').submit();">
                  <i class="material-icons">directions_run</i>
                  <span>{{ __('Logout') }}</span>
              </a>
          </li>
        @endauth
      </ul>
    </div>
  </div>
</nav>

The first lines of the user index, also almost vanilla taken from your template:

@extends('layouts.app', ['activePage' => 'datatables', 'class' => 'off-canvas-sidebar', 'menuParent' => 'tables', 'titlePage' => __('User Management')])

@section('content')
  <div class="content">
    <div class="container-fluid" style="padding-top:10px;">
      <div class="row">
        <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-danger card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">group</i>
                </div>
                <h4 class="card-title">{{ __('Users') }}</h4>
              </div>
(...)

In attachment 2 screenshots showing the navbar menu ignoring text-black and showing how the sidebar looks, it also has no mouseover and functionality. there is also another sidebar appearing (the white one to the right). Screen Shot 05-07-20 at 03 36 PM

groovemen commented 4 years ago

Hello Roman,

Sorry for this misunderstanding and the confusion created. Here is what you have to do to solve this issue:

forget about the off-canvas-sidebar class
please go to your main JS file and search after initRightMenu function and replace with this one from below:

initRightMenu: debounce(function() {
    $sidebar_wrapper = $('.sidebar-wrapper');

    if (!mobile_menu_initialized) {
      $navbar = $('nav').find('.navbar-collapse').children('.navbar-nav');

      mobile_menu_content = '';

      nav_content = $navbar.html();

      nav_content = '<ul class="nav navbar-nav nav-mobile-menu">' + nav_content + '</ul>';

      if ($('nav').find('.navbar-form').get(0)) {
        navbar_form = $('nav').find('.navbar-form').get(0).outerHTML;
      }

      $sidebar_nav = $sidebar_wrapper.find(' > .nav');

      // insert the navbar form before the sidebar list
      $nav_content = $(nav_content);
      if ($('nav').find('.navbar-form').get(0)) {
        $navbar_form = $(navbar_form);
      }
      $nav_content.insertBefore($sidebar_nav);
      if ($('nav').find('.navbar-form').get(0)) {
        $navbar_form.insertBefore($nav_content);
      }

      $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
        event.stopPropagation();

      });

      // simulate resize so all the charts/maps will be redrawn
      window.dispatchEvent(new Event('resize'));

      mobile_menu_initialized = true;
    } else {
      if ($(window).width() > 991) {
        // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
        if ($sidebar_wrapper.find('.navbar-form')) {
          $sidebar_wrapper.find('.navbar-form').remove();
        }
        $sidebar_wrapper.find('.nav-mobile-menu').remove();

        mobile_menu_initialized = false;
      }
    }
  }, 200),

It throws you an error because can't find the <form> tag from your navbar: navbar_form = $('nav').find('.navbar-form').get(0).outerHTML;

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

CraftyDlx commented 4 years ago

I replaced the method initRightMenu in public/material/js/material-dashboard.js and can't see any difference yet. I used the same files as above and still the sidebar does not work (weather I remove 'class' => 'off-canvas-sidebar' or not). Is there aynthing I need to change now in the nav file or main page, any classes I need to include?

teamupdivision commented 4 years ago

Hello, did you check the JavaScript file in the browser to have the latest changes? It might be cached, you can also add when fetching it something like ?v=1 to make sure it's updated. Let us know if this is the case

CraftyDlx commented 4 years ago

This is not the case and I cleared the cache. Please post your \resources\views\layouts\navbars\navs\auth.blade.php and your content page you used for testing this issue, so I can see if this is right here. You did test it and got it working, right?

teamupdivision commented 4 years ago

Hello, the last suggestion involved updating just the javascript file not the blade file. Regarding the cache, did you check the javascript file directly in the browser to see if you it was updated?

CraftyDlx commented 4 years ago

@teamupdivision Of course it was about updating the js file. I checked it with Firefox DevTools and the modified method in material-dashboard.js was loaded. As I said: Please provide your \resources\views\layouts\navbars\navs\auth.blade.php and your content page you used for testing this issue, so I can see what is wrong here. Or an entire Material Dashboard vanilla install where this nav-sidebar is working (after login) for download.

abadadrian commented 2 years ago

Thanks for the info, I had same issue

teamupdivision commented 2 years ago

Hi @faroliwi,

Thank you for using the Creative Tim products.

We hope that you managed to solve your issue by using the info above. Should you need any further assistance, please do not hesitate to contact us.

Best, UPDIVISION Team

abadadrian commented 2 years ago

I tried to solve the problem but still happend, I think is because I remove the sidebar that the dashboard used to have. Check the screenshots and try to help me please I'm lost..

When I'm not auth, I can see navbar collapsed but when I auth, it appears empty help1 help2 help3 /91084023/171060562-d37e068c-5a30-4f21-8492-9312916f6b46.PNG) .

CraftyDlx commented 2 years ago

@abadadrian I completely moved away from Creative Tim templates a long time ago and I can only advise you to do the same. Their templates are hardly customizeable, the code is a nightmare and the support is a joke. Better spend some more bucks and get some decent templates, there are numerous great ones out there. Don't waste your time here, it's just not worth it.

abadadrian commented 2 years ago

Hmmm okay, U finally fix it? I have to send my project in 1 week and I can't go back D:

CraftyDlx commented 2 years ago

@abadadrian Yeah I fixed it by deleting all the Creative Tim crap from my hard drive and starting over with a decent template. Do the same or you will run into numerous further issues on your way. Good luck.

groovemen commented 2 years ago

Hello @abadadrian,

Please let us know if you get the same error in the latest product version (2.2.2). Also please help us reproduce your issue to find a solution for your problem.

All the best, Stefan

abadadrian commented 2 years ago

Nevermind, I solved the problem. I deleted some lines there. If you only want to show navbar sidebar u have to put like this:

<div class="container-fluid">
  @include('layouts.navbars.navs.auth')
  <div class="main-panel">
    @yield('content')
    @include('layouts.footers.auth')
  </div>
</div>

creativetimofficial / ct-material-dashboard-pro-laravel

NavBar menu items not collapsing to a sidebar menu when authorized #25