Laravel layout keep the nav link with different background-CodePudding

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 >
  <a href="{{ route('home') }}" >
    <i ></i>
  </a>
</div>
<div >
  <div >
    <div >
      <img src="{{ asset('images/location-hover-icon.png') }}" >
    </div>
    <div >
      <div >
        <a href="#" >
          <a href="{{ route('dashboard.newcairo.interests') }}" >
            <div >
              <i ></i>
              <h6 >iCity New Cairo</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.october.interests') }}" >
            <div >
              <i ></i>
              <h6 >iCity October</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.october.chillout.interests') }}" >
            <div >
              <i ></i>
              <h6 >Chillout October</h6>
            </div>
          </a>
          <a href="{{ route('dashboard.rashikma.interests') }}" >
            <div >
              <i ></i>
              <h6 >Ras El Hikma</h6>
            </div>
          </a>
        </a>
      </div>
    </div>
  </div>
  <div >
    <h3 >@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')

CodePudding user response：

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="#" >
    <a href="{{ route('dashboard.newcairo.interests') }}" >
        <div >
            <i ></i>
            <h6 >iCity New Cairo</h6>
        </div>
    </a>
</a>