Laravel layout keep the nav link with different background

Question

I am making a dashboard. It has a layout included in all the dashboard pages and it contains links. I need to specify the active page link with different background.

I wrote the code below to do this, but when I click on a link it reloads the page to go to the requested page and layout is refreshed and everything returns to default.

What is the easiest way to handle this?

$(document).ready(function() {
  $('.sidebar-link').click(function(e) {
    e.preventDefault();
    $('.sidebar-link').removeClass('active');
    $(this).addClass('active');
  });
});

.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #9E852D;
}

.main {
  width: 100%;
  height: 100vh;
  background-color: #FFF;
}

.exit-dashboard {
  width: 30px;
  height: 30px;
  position: fixed;
  right: 0;
  top: 610px;
  background-color: #B79B3A;
  color: #FFF;
  z-index: 9999999999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/40a844b83b.js" crossorigin="anonymous"></script>
@yield('styles')

<div class="exit-dashboard d-flex justify-content-center align-items-center">
  <a href="{{ route('home') }}" class="a-reset">
    <i class="fa-solid fa-globe"></i>
  </a>
</div>
<div class="d-flex">
  <div class="sidebar">
    <div class="sidebar-img text-center pt-5">
      <img src="{{ asset('images/location-hover-icon.png') }}" class="w-50">
    </div>
    <div class="sidebar-links pt-5">
      <div class="row flex-column">
        <a href="#" class="a-reset">
          <a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
            <div class="sidebar-link py-2">
              <i class="fa-solid fa-envelope px-2"></i>
              <h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.october.interests') }}" class="a-reset">
            <div class="sidebar-link py-2">
              <i class="fa-solid fa-envelope px-2"></i>
              <h6 class="nexa-bold text-white d-inline-block">iCity October</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.october.chillout.interests') }}" class="a-reset">
            <div class="sidebar-link py-2">
              <i class="fa-solid fa-envelope px-2"></i>
              <h6 class="nexa-bold text-white d-inline-block">Chillout October</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.rashikma.interests') }}" class="a-reset">
            <div class="sidebar-link py-2">
              <i class="fa-solid fa-envelope px-2"></i>
              <h6 class="nexa-bold text-white d-inline-block">Ras El Hikma</h6>
            </div>
          </a>
        </a>
      </div>
    </div>
  </div>
  <div class="main p-5">
    <h3 class="text-white nexa-bold pb-4">@yield('tab-title')</h3>
    <div>
      @yield('content')
    </div>
  </div>
</div>

<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dashboard_layout.js') }}"></script>
@yield('scripts')

Answer 1

You can use Route faced to check the active route. It will check if the active route is same, and will return true or false, using which we can make a ternary condition.

<a href="#" class="a-reset">
    <a href="{{ route('dashboard.newcairo.interests') }}" class="a-reset">
        <div class="{{Route::is('dashboard.newcairo.interests') ? 'active' : 'sidebar-link'}} py-2">
            <i class="fa-solid fa-envelope px-2"></i>
            <h6 class="nexa-bold text-white d-inline-block">iCity New Cairo</h6>
        </div>
    </a>
</a>