Laravel Project
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.
Open app.blade.php file which is inside the resources/views/layouts directory and add the following code above the @yield('content') line.
app.blade.php
resources/views/layouts
@yield('content')
<!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.
home
The Active link will take us to the page listing all the ACTIVE todo tasks.
Active
Similarly, the Done and Deleted links will take us to the pages listing all the DONE and DELETED todo tasks respectively.
Done
Deleted
Okay, in the next tutorial we will create the views for the Active, Done and Deleted page.
See you there. Have fun coding.