LARAVEL: Showing the Categorie slug instead of ID - List of Categories

In the URL I want to show the categorie slug instead of categorie ID

for example : https://127.0.0.1:8000/categorieName

instead Of: https://127.0.0.1:8000/products/categorieId

Screenshot

-> and when I click the Categorie button

I want to show products related to categorie.

---

My Code:

Web.php:

Route::get('/', 'SiteController@index');

Route::get('/products/{id?}', 'SiteController@products');

Route::get('/product/{slug}', 'SiteController@show');

SiteController.php :

public function products($id = null){
      if($id){
        $products= Post::orderBy('created_at', 'desc')
        ->whereStatus('PUBLISHED')
        ->whereCategoryId($id)
        ->take(10)->get();
      }else {
        $products= Post::orderBy('created_at', 'desc')->whereStatus('PUBLISHED')->take(10)->get();
      }
        $categories = Category::all();
        return view('MyWebsite.products', ['id' => $id, 'mesproducts' => $products, 'mesCategories' => $categories]);
    }

products.blade.php:

<div class="lx-main">
                    <!-- Main Content -->
    <div class="lx-main-content">
     <nav id="nav-top">
    <ul>
      <li> <a href="">All Products</a></li>
      @foreach ($mesCategories as $category)
      <li><a href=""> </a>()</li>

      @endforeach
    </ul>
  </nav>
        <div class="lx-products-list lx-bloc-content">
            <div class="lx-products-items">
                @foreach ($mesproducts as $product)
                <div class="lx-g4 lx-g5-to-g2">
                    <div class="lx-products-item">
                        <a href="#">
                            <div class="lx-products-item-img">
                            <a href="">
                                <img src="" />
                                </a>
                            </div>  
                            <h4></h4> 
                            <div class="lx-products-item-detail">
                                <h2 class="haha2"><i style="color:#fdd043;" class="fas fa-shopping-cart"></i><a href=""></a></h2>
                                    <p class="para">
                                    <ins>
                                    <i style="color:#fdd043;" class="fas fa-arrow-left"></i>
                                    
                                    </ins>
                                </p>
                                <!-- <p></p> -->                                  
                            </div>  
                        </a>
                    </div>
                </div>
                @endforeach 
            </div>
        </div>
        <div class="lx-clear-fix"></div></br></br></br>
    </div>
</div>

via Chebli Mohamed