Todo Laravel Project

Todo Laravel Project - Getting StartedTodo Laravel Project - Migration - Creating todos tableTodo Laravel Project - Model - Working with todos tableTodo Laravel Project - Laravel TinkerTodo Laravel Project - RoutesTodo Laravel Project - Routes - Home page routeTodo Laravel Project - Routes - Active, Done, Deleted page routesTodo Laravel Project - Blade Template - The master layoutTodo Laravel Project - Home page viewTodo Laravel Project - Navigation barTodo Laravel Project - Views for Active, Done and Deleted pagesTodo Laravel Project - Form to create new todo tasksTodo Laravel Project - Handle form submission - Create new todo taskTodo Laravel Project - Show todo task detailTodo Laravel Project - Controller - Creating the TodoControllerTodo Laravel Project - Form to edit todo tasksTodo Laravel Project - Edit action button for the todo tasksTodo Laravel Project - Handling update requestTodo Laravel Project - Delete action button for the todo tasksTodo Laravel Project - Handling delete request

Todo Laravel Project - Navigation bar

Laravel Project

← PrevNext →

In this Laravel project tutorial we will create the navigation bar for the website.

For this project the navigation bar or nav bar will be same for all the pages. So, it is logical to create the nav bar inside the master layout.

Feel free to create the nav bar in any other file and include it in your pages. I will always encourage you to experiment with the code.

Alright, lets get started.

The nav bar

Open app.blade.php file which is inside the resources/views/layouts directory and add the following code above the @yield('content') line.

<!doctype html>
<html>
<head>
  <title>@yield('title')</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

</head>
<body>

  <!-- navigation bar -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
        
        <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/active">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/done">Done</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/deleted">Deleted</a>
          </li>
        </ul>
        
      </div>
    </div>
  </div>
  <!-- navigation bar ends here -->


  @yield('content')


  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

</body>
</html>

If we now open the home page we will get to see the following output.

Where, the home link will take us to the home page.

The Active link will take us to the page listing all the ACTIVE todo tasks.

Similarly, the Done and Deleted links will take us to the pages listing all the DONE and DELETED todo tasks respectively.

Okay, in the next tutorial we will create the views for the Active, Done and Deleted page.

See you there. Have fun coding.

← PrevNext →