my-website/resources/views/partials/sidebar.blade.php

<!--<ul class="space-y-1">-->
@php
    $type = $type ?? 'default';
@endphp
    
<aside>
    {{--Check type of content to display correct sidebar--}}
    @if($type === 'beef') <!-- Type 'Beef' sidebar -->
        <div class="flex h-full flex-col justify-between border-e bg-white">
            <div class="px-4 py-6">

                <ul class="mt-6 space-y-1">
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Ribeye
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Sirloin
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            T-Bone
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Filet Mignon
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Brisket
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Chuck
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Round
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Flank
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Skirt
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Short Ribs
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @elseif($type === 'poultry') <!-- Type 'Poultry' sidebar -->
        <div class="flex h-full flex-col justify-between border-e bg-white">
            <div class="px-4 py-6">

                <ul class="mt-6 space-y-1">
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Chicken Breast
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Chicken Thighs
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Chicken Wings
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Whole Chicken
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Turkey Breast
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Duck Breast
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Duck Confit
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Quail
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Cornish Hen
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @elseif($type === 'pork') <!-- Type 'Pork' sidebar -->
        <div class="flex h-full flex-col justify-between border-e bg-white">
            <div class="px-4 py-6">
                
                <ul class="mt-6 space-y-1">
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Shoulder (Boston Butt)
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Belly
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Chops
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Loin
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Ribs (Spareribs and Baby Back Ribs)
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Ham
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Pork Tenderloin
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @elseif($type === 'lamb') <!-- Type 'Lamb' sidebar -->
        <div class="flex h-full flex-col justify-between border-e bg-white">
            <div class="px-4 py-6">
    
                <ul class="mt-6 space-y-1">
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Shoulder
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Chops (Loin & Rib Chops)
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Leg
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Rack of Lamb
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Ground Lamb
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Shank
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @elseif($type === 'recipes') <!-- Type 'Recipes' sidebar -->
        <div class="flex h-full flex-col justify-between border-e bg-white">
            <div class="px-4 py-6">
                <span class="grid h-10 w-32 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600">
                    MeatMasters
                </span>

                <ul class="mt-6 space-y-1">
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Shoulder
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Chops (Loin & Rib Chops)
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Leg
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Rack of Lamb
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Ground Lamb
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
                        >
                            Lamb Shank
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    @endif

</aside>

<!-- Old Sidebar -->
    <!--<div class="flex h-full flex-col justify-between border-e bg-white">
        <div class="px-4 py-6">
          <span class="grid h-10 w-32 place-content-center rounded-lg bg-gray-100 text-xs text-gray-600">
            Logo
          </span>
      
          <ul class="mt-6 space-y-1">
            <li>
              <a
                href="#"
                class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
              >
                General
              </a>
            </li>
      
            <li>
              <details class="group [&_summary::-webkit-details-marker]:hidden">
                <summary
                  class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                >
                  <span class="text-sm font-medium"> Teams </span>
      
                  <span class="shrink-0 transition duration-300 group-open:-rotate-180">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </span>
                </summary>
      
                <ul class="mt-2 space-y-1 px-4">
                  <li>
                    <a
                      href="#"
                      class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    >
                      Banned Users
                    </a>
                  </li>
      
                  <li>
                    <a
                      href="#"
                      class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    >
                      Calendar
                    </a>
                  </li>
                </ul>
              </details>
            </li>
      
            <li>
              <a
                href="#"
                class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
              >
                Billing
              </a>
            </li>
      
            <li>
              <a
                href="#"
                class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
              >
                Invoices
              </a>
            </li>
      
            <li>
              <details class="group [&_summary::-webkit-details-marker]:hidden">
                <summary
                  class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                >
                  <span class="text-sm font-medium"> Account </span>
      
                  <span class="shrink-0 transition duration-300 group-open:-rotate-180">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </span>
                </summary>
      
                <ul class="mt-2 space-y-1 px-4">
                  <li>
                    <a
                      href="#"
                      class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    >
                      Details
                    </a>
                  </li>
      
                  <li>
                    <a
                      href="#"
                      class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    >
                      Security
                    </a>
                  </li>
      
                  <li>
                    <form action="#">
                      <button
                        type="submit"
                        class="w-full rounded-lg px-4 py-2 text-sm font-medium text-gray-500 [text-align:_inherit] hover:bg-gray-100 hover:text-gray-700"
                      >
                        Logout
                      </button>
                    </form>
                  </li>
                </ul>
              </details>
            </li>
          </ul>
        </div>-->