Tự học Laravel: (26) NAVIGATION MENU

This time, we will create a navigation menu for the site. Rather than Laravel’s features, Bootstrap’s features are the main thing.

ROUTING

First, modify routes/web.php to display the article list at the site root.

//routes/web.php
 
Route::get('about', 'PagesController@about')->name('about');
Route::get('contact', 'PagesController@contact')->name('contact');
 
Route::get('/', 'ArticlesController@index')->name('home');
 
Route::resource('articles', 'ArticlesController');

VIEW

CREATE PARTIAL FOR NAVIGATION BAR

Create resouces/views/navbar.blade.php.
The contents were modified by copying Bootstrap’s Navbar sample. 
See the Bootstrap site for details. https://getbootstrap.com/docs/4.1/components/navbar/

{{-- resouces/views/navbar.blade.php --}}
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="{{ route('home') }}">My Blog</a>
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <!-- メニュー -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="{{ route('home') }}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ route('about') }}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ route('contact') }}">Contact</a>
        </li>
      </ul>
 
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>
 
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            User Name <span class="caret"></span>
          </a>
 
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Links are actually made to “My Blog”, “Home”, “Contact” and “About” displayed on the left side of the menu. “Login”, “Register”, “User Name”, “Logout” displayed on the right side of the menu are dummy menus that are not linked at this stage.

BROWSE THE NAVIGATION BAR IN THE LAYOUT

Modify layout.blade.php to use navbar.blade.php.

{{-- resouces/views/layout.blade.php --}}
 
...
<body>
    @include('navbar')
 
    <div class="container">
        @if (Session::has('flash_message'))
            <div class="alert alert-success">{{ Session::get('flash_message') }}</div>
        @endif
 
        @yield('content')
    </div>
...

This completes the implementation of the navigation menu.

ACTION CONFIRMATION

Please visit http://localhost:8000/ and check the display and operation. Thanks to Bootstrap, it has a cool menu.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.