<template>
  <div class="md:py-7 col-span-2 lg:col-span-1 border-r border-indigo-300">
    <ul class="flex md:block text-base lg:text-xl xl:text-2xl text-gray-light overflow-x-auto">
      <li
        :class="[$page.component === 'Settings/SettingsProfile' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.index')">
          Профиль
        </inertia-link>
      </li>
      <li
        :class="[$page.url.startsWith('/settings/purchases') ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.purchases')">
          Покупки
        </inertia-link>
      </li>

      <li
        :class="[$page.component === 'Settings/SettingsLikes' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.likes')">
          Понравилось
        </inertia-link>
      </li>

      <li
        :class="[$page.component === 'Settings/SettingsMoney' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.money')">
          Доход
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsTarif' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.tarif')">
          Тарифы
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsNotify' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.notify')">
          Оповещения
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsPayouts' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.payouts')">
          Выплаты
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsPacket' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.packet')">
          Платные подписки
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsVerification' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.verification')">
          Верификация
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsDocuments' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.documents')">
          Документы
        </inertia-link>
      </li>
      <li
        :class="[$page.component === 'Settings/SettingsWriteToUs' ?
          'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
          'hover:text-white' ,'px-6 py-4']"
      >
        <inertia-link :href="route('setting.write-to-us')">
          Написать нам
        </inertia-link>
      </li>
    </ul>
  </div>
</template>
