'Laravel no logout option from menu after successfull login

Hope anyone else had the same issue and was able to solve this problem. I installed a fresh Laravel project and used php artisan make:auth to get the basic auth working. Strange thing is that after a successful login there is no logout link in the navbar. It should be available under the username (which has a pull down option) but when I click on my username nothing happens.

Anyone has a solution? Help is much appreciated.

phpauthenticationtwitter-bootstrap-3laravel-5navbar


Solution 1:[1]

Problem solved:

Seems like Laravel is not loading the right JQuery files to make it work. Be sure to load the right JQuery libs like these:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Solution 2:[2]

It is a while since the question was answered, but I thought the following information might be as useful to someone as it was to me...

If you have used npm's SASS compiler, Webpack will have condensed all of the CSS into app.css and all of the Javascript into app.js. The app.js includes all of the Javascript from Bootstrap, so including the Bootstrap js separately seems to break the dropdown menus.

I found that removing my own references to the Bootstrap js files and making sure I had:

<script src="{{ asset('js/app.js') }}"></script>

at the end of my layouts.app file, worked like a charm. I hope this helps someone.

Solution 3:[3]

@Qazi: It's just the standard app.blade.php from Laravel itself:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">

<!-- Scripts -->
<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    &nbsp;
                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                    @if (Auth::guest())
                        <li><a href="{{ url('/login') }}">Login</a></li>
                        <li><a href="{{ url('/register') }}">Register</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="{{ url('/logout') }}"
                                        onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>

                                    <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    @include ('layouts.partials._notifications')

    @yield('content')
</div>

<!-- Scripts -->
<script src="/js/app.js"></script>

Then this is my web.php in routes folder:

<?php

Use Illuminate\Http\Request;

Route::get('/', function (Request $request) {
    return view('home');
});

Auth::routes();

Route::get('/home', 'HomeController@index');
Route::get('/activate/token/{token}', 'Auth\ActivationController@activate')->name('auth.activate');
Route::get('/activate/resend', 'Auth\ActivationController@resend')->name('auth.activate.resend');

Now what I did notice is that the css markup is not there when I switch pages. Eg if I click on the 'forgot password' link, the css markup is gone. Seems like it can't find the css folder or the path is not right on my local machine.

Solution 4:[4]

I encountered the same problem and solved it by simply removing JQuery and Bootstrap scripts, as they are loaded by app.js (I'm using laravel 5.5).

Solution 5:[5]

What worked for me was to remove the script that i had added loading popper.js from a cdn. After i deleted that line the dropdown loaded.

Solution 6:[6]

add bootstrap link : <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Solution 7:[7]

It's working for me after using these commands

npm install

npm run dev

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brnovich
Solution 2
Solution 3 Brnovich
Solution 4 FridaC
Solution 5 crafty
Solution 6 MIN ADO
Solution 7 Sachin

Related Questions