<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="px-6 py-4 hover:text-white"><a href="#">Избранное</a></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="px-6 py-4 hover:text-white"><a href="#">Сообщения</a></li>

    </ul>
</div>
</template>
