Laravel 7.24 How can I change the colour of the Navigation bar if a user logs in

user_14418291 0
Viewed 240

I want to have a pseudo dynamic navigation bar, which changes its colour when a user logs in. This color change should happen, no matter where the user roams inside the pages (Home page, contact us page etc.),as long as the user is authenticated. Can someone give some ideas?

It need not be multiple colours. Like before the user logs in, it is black. After the user logs in, it changes to blue

<div class="container-fluid">
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav mr-auto">
           <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">About Us</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="contact">Contact Us</a>
           </li>
       </ul>
       <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="login">Login</a>
           </li>
           <li class="nav-item">
               <a class="nav-link"href="new_user">Signup</a>
           </li>
       </ul>
   </div>
</nav>
twitter-bootstrap laravel
3 Answers

you should better use a helper function if you want it to be customizable again easily. for that:

  1. make a helper.php file in app folder

  2. put your code inside like this

    <?php

function getNavigationColor()
{
   if (auth()->check()){
       return 'bg-color-black';
   else{
       return 'bg-color-blue';
   }
}

  3. edit composer.json add line below at the end of autoload

    "autoload": {
    //... other params
    "files":[
        "app/helpers.php"
    ]
},

  4. run composer du in commandline

now you can access getNavigationColor() everywhere in your project.

then use it every where you want like this:

<div class="container-fluid">
 <nav class="navbar navbar-expand-md navbar-dark bg-dark {{ getNavigationColor() }}">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav mr-auto">
           <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">About Us</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="contact">Contact Us</a>
           </li>
       </ul>
       <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="login">Login</a>
           </li>
           <li class="nav-item">
               <a class="nav-link"href="new_user">Signup</a>
           </li>
       </ul>
   </div>
</nav>
user_58393660

You can do something like this:

@if (auth()->check()) {{-- or Auth::check() --}}
  //show logged in stuff
@else
  //show logged out stuff
@endif

Your code would look like

<nav class="navbar navbar-expand-md navbar-dark @if(auth()->check()) bg-blue @else bg-black @endif">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
       <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav mr-auto">
           <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">About Us</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="contact">Contact Us</a>
           </li>
       </ul>
       <ul class="navbar-nav">
           <li class="nav-item">
               <a class="nav-link" href="login">Login</a>
           </li>
           <li class="nav-item">
               <a class="nav-link"href="new_user">Signup</a>
           </li>
       </ul>
   </div>
</nav>
user_37419000

You can use laravel blade directives to make this task simpler.

use @auth directive for authenticated user and @guest directive for guest user.

<nav class="navbar navbar-expand-md navbar-dark @auth bg-blue @endauth @guest bg-black @endguest ">
user_77351770
Related