ShowEasyFrontEnd/FrontEnd/components/user/userSidebar.vue

<template>
  <div
    class="tw-bg-white tw-rounded-[20px] tw-px-[30px] tw-pt-[30px] tw-pb-[20px] md:tw-px-[40px] md:tw-pt-[40px] xl:tw-pb-[40px] xl:tw-w-[308px]">
    <div class="tw-mb-[10px]">
      <img v-if="userData.MemberPicture"
        class="tw-border tw-flex tw-border-solid tw-border-neutrals-300 tw-rounded-[50px] tw-mx-auto tw-max-w-[64px] tw-h-[64px]"
        :src="userData.MemberPicture" />
      <div v-else
        class="tw-flex tw-justify-center tw-items-center tw-bg-primary-default tw-rounded-[50px] tw-mx-auto tw-w-[64px] tw-h-[64px]">
        <span class="tw-text-white tw-font-normal tw-text-[40px] tw-uppercase">{{ lastName.split("")[0] || "" }}</span>
      </div>
    </div>
    <h3 class="tw-text-base-primary tw-flex tw-justify-center tw-mb-[20px] md:t24 xl:tw-mb-[18px] xl:t20">
      <div>{{ firstName }}&nbsp;</div>
      <div>{{ lastName }}</div>
    </h3>
    <div class="tw-flex tw-flex-col">
      <nuxt-link :to="localePath('/user/editPersonalInfo')"
        class="tw-text-complementary-1 tw-text-[16px] tw-mb-[20px] tw-mx-auto md:tw-text-[18px] mb:tw-mb-[30px] xl:tw-mb-[51px]">
        {{ $t("userProfile.editPersonalInfo") }}
      </nuxt-link>
      <div class="tw-border tw-border-t tw-border-solid tw-border-neutrals-200 tw-mb-[34px] tw-w-full xl:tw-hidden">
      </div>
      <div
        class="tw-grid tw-grid-rows-3 tw-gap-[27px] tw-items-start tw-mb-[34px] tw-pl-[13px] md:tw-gap-[35px] xl:tw-gap-[33px] xl:tw-mb-[20px]">
        <nuxt-link :to="localePath('/user/myBooking')" class="tw-flex tw-flex-row tw-items-center">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.50065 8.33268H8.33398C8.555 8.33268 8.76696 8.24488 8.92324 8.0886C9.07952 7.93232 9.16732 7.72036 9.16732 7.49935C9.16732 7.27834 9.07952 7.06637 8.92324 6.91009C8.76696 6.75381 8.555 6.66602 8.33398 6.66602H7.50065C7.27964 6.66602 7.06768 6.75381 6.9114 6.91009C6.75511 7.06637 6.66732 7.27834 6.66732 7.49935C6.66732 7.72036 6.75511 7.93232 6.9114 8.0886C7.06768 8.24488 7.27964 8.33268 7.50065 8.33268ZM7.50065 9.99935C7.27964 9.99935 7.06768 10.0871 6.9114 10.2434C6.75511 10.3997 6.66732 10.6117 6.66732 10.8327C6.66732 11.0537 6.75511 11.2657 6.9114 11.4219C7.06768 11.5782 7.27964 11.666 7.50065 11.666H12.5007C12.7217 11.666 12.9336 11.5782 13.0899 11.4219C13.2462 11.2657 13.334 11.0537 13.334 10.8327C13.334 10.6117 13.2462 10.3997 13.0899 10.2434C12.9336 10.0871 12.7217 9.99935 12.5007 9.99935H7.50065ZM16.6673 7.44935C16.6586 7.37279 16.6419 7.29737 16.6173 7.22435V7.14935C16.5772 7.06367 16.5238 6.9849 16.459 6.91602L11.459 1.91602C11.3901 1.8512 11.3113 1.79775 11.2257 1.75768C11.2008 1.75415 11.1755 1.75415 11.1507 1.75768C11.066 1.70913 10.9725 1.67797 10.8757 1.66602H5.83398C5.17094 1.66602 4.53506 1.92941 4.06622 2.39825C3.59738 2.86709 3.33398 3.50297 3.33398 4.16602V15.8327C3.33398 16.4957 3.59738 17.1316 4.06622 17.6005C4.53506 18.0693 5.17094 18.3327 5.83398 18.3327H14.1673C14.8304 18.3327 15.4662 18.0693 15.9351 17.6005C16.4039 17.1316 16.6673 16.4957 16.6673 15.8327V7.49935C16.6673 7.49935 16.6673 7.49935 16.6673 7.44935ZM11.6673 4.50768L13.8257 6.66602H12.5007C12.2796 6.66602 12.0677 6.57822 11.9114 6.42194C11.7551 6.26566 11.6673 6.0537 11.6673 5.83268V4.50768ZM15.0007 15.8327C15.0007 16.0537 14.9129 16.2657 14.7566 16.4219C14.6003 16.5782 14.3883 16.666 14.1673 16.666H5.83398C5.61297 16.666 5.40101 16.5782 5.24473 16.4219C5.08845 16.2657 5.00065 16.0537 5.00065 15.8327V4.16602C5.00065 3.945 5.08845 3.73304 5.24473 3.57676C5.40101 3.42048 5.61297 3.33268 5.83398 3.33268H10.0007V5.83268C10.0007 6.49572 10.264 7.13161 10.7329 7.60045C11.2017 8.06929 11.8376 8.33268 12.5007 8.33268H15.0007V15.8327ZM12.5007 13.3327H7.50065C7.27964 13.3327 7.06768 13.4205 6.9114 13.5768C6.75511 13.733 6.66732 13.945 6.66732 14.166C6.66732 14.387 6.75511 14.599 6.9114 14.7553C7.06768 14.9116 7.27964 14.9993 7.50065 14.9993H12.5007C12.7217 14.9993 12.9336 14.9116 13.0899 14.7553C13.2462 14.599 13.334 14.387 13.334 14.166C13.334 13.945 13.2462 13.733 13.0899 13.5768C12.9336 13.4205 12.7217 13.3327 12.5007 13.3327Z"
              fill="#232323" />
          </svg>
          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{$t('My Bookings')}}
          </div>
        </nuxt-link>
        <nuxt-link :to="localePath('/user/saveExhibition')" class="tw-flex tw-flex-row tw-items-center">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M13.3327 1.66602H6.66602C6.00298 1.66602 5.3671 1.92941 4.89826 2.39825C4.42941 2.86709 4.16602 3.50297 4.16602 4.16602V17.4993C4.16544 17.6462 4.20367 17.7906 4.27684 17.9179C4.35001 18.0452 4.45552 18.1509 4.58269 18.2243C4.70937 18.2975 4.85307 18.336 4.99936 18.336C5.14564 18.336 5.28934 18.2975 5.41602 18.2243L9.99936 15.5743L14.5827 18.2243C14.7097 18.2963 14.8534 18.3337 14.9994 18.3327C15.1453 18.3337 15.289 18.2963 15.416 18.2243C15.5432 18.1509 15.6487 18.0452 15.7219 17.9179C15.795 17.7906 15.8333 17.6462 15.8327 17.4993V4.16602C15.8327 3.50297 15.5693 2.86709 15.1005 2.39825C14.6316 1.92941 13.9957 1.66602 13.3327 1.66602ZM14.166 16.0577L10.416 13.891C10.2893 13.8179 10.1456 13.7794 9.99936 13.7794C9.85307 13.7794 9.70937 13.8179 9.58269 13.891L5.83269 16.0577V4.16602C5.83269 3.945 5.92049 3.73304 6.07677 3.57676C6.23305 3.42048 6.44501 3.33268 6.66602 3.33268H13.3327C13.5537 3.33268 13.7657 3.42048 13.9219 3.57676C14.0782 3.73304 14.166 3.945 14.166 4.16602V16.0577Z"
              fill="#232323" />
          </svg>
          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{ $t("userProfile.savedExhibitions") }}
          </div>
        </nuxt-link>
        <!-- <nuxt-link :to="localePath('/user/saveService')" class="tw-flex tw-flex-row tw-items-center">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M16.7996 4.1668C15.911 3.28739 14.7374 2.75453 13.4904 2.66437C12.2435 2.57422 11.0054 2.9327 9.99958 3.67514C8.93929 2.8865 7.61957 2.5289 6.30618 2.67434C4.99279 2.81977 3.78328 3.45745 2.92122 4.45896C2.05917 5.46046 1.6086 6.7514 1.66025 8.07182C1.7119 9.39223 2.26193 10.644 3.19958 11.5751L8.19958 16.6168C8.66833 17.085 9.30374 17.3479 9.96625 17.3479C10.6287 17.3479 11.2642 17.085 11.7329 16.6168L16.7329 11.5751C17.2254 11.094 17.6179 10.5203 17.8879 9.887C18.1579 9.25369 18.3001 8.57327 18.3063 7.88483C18.3125 7.19639 18.1825 6.51352 17.924 5.87545C17.6654 5.23739 17.2833 4.65672 16.7996 4.1668ZM15.6246 10.3835L10.6246 15.3835C10.5471 15.4616 10.4549 15.5236 10.3534 15.5659C10.2518 15.6082 10.1429 15.63 10.0329 15.63C9.9229 15.63 9.81398 15.6082 9.71243 15.5659C9.61088 15.5236 9.51872 15.4616 9.44125 15.3835L4.44125 10.3835C3.78771 9.71543 3.42175 8.81803 3.42175 7.88347C3.42175 6.94892 3.78771 6.05152 4.44125 5.38347C5.10721 4.72596 6.00539 4.35728 6.94125 4.35728C7.8771 4.35728 8.77528 4.72596 9.44125 5.38347C9.51872 5.46158 9.61088 5.52357 9.71243 5.56588C9.81398 5.60819 9.9229 5.62997 10.0329 5.62997C10.1429 5.62997 10.2518 5.60819 10.3534 5.56588C10.4549 5.52357 10.5471 5.46158 10.6246 5.38347C11.3086 4.83921 12.1689 4.56574 13.0416 4.61522C13.9143 4.66469 14.7383 5.03365 15.3563 5.65172C15.9744 6.2698 16.3434 7.09375 16.3928 7.96644C16.4423 8.83913 16.1688 9.6995 15.6246 10.3835Z"
              fill="#232323" />
          </svg>
          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{ $t("userProfile.savedServices") }}
          </div>
        </nuxt-link> -->
        <nuxt-link :to="localePath('/user/companyInfo')" class="tw-flex tw-flex-row tw-items-center" ref="companyTab">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M11.666 6.66602H12.4993C12.7204 6.66602 12.9323 6.57822 13.0886 6.42194C13.2449 6.26566 13.3327 6.0537 13.3327 5.83268C13.3327 5.61167 13.2449 5.39971 13.0886 5.24343C12.9323 5.08715 12.7204 4.99935 12.4993 4.99935H11.666C11.445 4.99935 11.233 5.08715 11.0768 5.24343C10.9205 5.39971 10.8327 5.61167 10.8327 5.83268C10.8327 6.0537 10.9205 6.26566 11.0768 6.42194C11.233 6.57822 11.445 6.66602 11.666 6.66602ZM11.666 9.99935H12.4993C12.7204 9.99935 12.9323 9.91155 13.0886 9.75527C13.2449 9.59899 13.3327 9.38703 13.3327 9.16602C13.3327 8.945 13.2449 8.73304 13.0886 8.57676C12.9323 8.42048 12.7204 8.33268 12.4993 8.33268H11.666C11.445 8.33268 11.233 8.42048 11.0768 8.57676C10.9205 8.73304 10.8327 8.945 10.8327 9.16602C10.8327 9.38703 10.9205 9.59899 11.0768 9.75527C11.233 9.91155 11.445 9.99935 11.666 9.99935ZM7.49935 6.66602H8.33268C8.5537 6.66602 8.76566 6.57822 8.92194 6.42194C9.07822 6.26566 9.16602 6.0537 9.16602 5.83268C9.16602 5.61167 9.07822 5.39971 8.92194 5.24343C8.76566 5.08715 8.5537 4.99935 8.33268 4.99935H7.49935C7.27834 4.99935 7.06637 5.08715 6.91009 5.24343C6.75381 5.39971 6.66602 5.61167 6.66602 5.83268C6.66602 6.0537 6.75381 6.26566 6.91009 6.42194C7.06637 6.57822 7.27834 6.66602 7.49935 6.66602ZM7.49935 9.99935H8.33268C8.5537 9.99935 8.76566 9.91155 8.92194 9.75527C9.07822 9.59899 9.16602 9.38703 9.16602 9.16602C9.16602 8.945 9.07822 8.73304 8.92194 8.57676C8.76566 8.42048 8.5537 8.33268 8.33268 8.33268H7.49935C7.27834 8.33268 7.06637 8.42048 6.91009 8.57676C6.75381 8.73304 6.66602 8.945 6.66602 9.16602C6.66602 9.38703 6.75381 9.59899 6.91009 9.75527C7.06637 9.91155 7.27834 9.99935 7.49935 9.99935ZM17.4993 16.666H16.666V2.49935C16.666 2.27834 16.5782 2.06637 16.4219 1.91009C16.2657 1.75381 16.0537 1.66602 15.8327 1.66602H4.16602C3.945 1.66602 3.73304 1.75381 3.57676 1.91009C3.42048 2.06637 3.33268 2.27834 3.33268 2.49935V16.666H2.49935C2.27834 16.666 2.06637 16.7538 1.91009 16.9101C1.75381 17.0664 1.66602 17.2783 1.66602 17.4993C1.66602 17.7204 1.75381 17.9323 1.91009 18.0886C2.06637 18.2449 2.27834 18.3327 2.49935 18.3327H17.4993C17.7204 18.3327 17.9323 18.2449 18.0886 18.0886C18.2449 17.9323 18.3327 17.7204 18.3327 17.4993C18.3327 17.2783 18.2449 17.0664 18.0886 16.9101C17.9323 16.7538 17.7204 16.666 17.4993 16.666ZM10.8327 16.666H9.16602V13.3327H10.8327V16.666ZM14.9993 16.666H12.4993V12.4993C12.4993 12.2783 12.4116 12.0664 12.2553 11.9101C12.099 11.7538 11.887 11.666 11.666 11.666H8.33268C8.11167 11.666 7.89971 11.7538 7.74343 11.9101C7.58715 12.0664 7.49935 12.2783 7.49935 12.4993V16.666H4.99935V3.33268H14.9993V16.666Z"
              fill="#232323" />
          </svg>
          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{ $t("userProfile.companyInfo") }}
          </div>
        </nuxt-link>
        <nuxt-link :to="localePath('/user/contactInfo')" class="tw-flex tw-flex-row tw-items-center">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12.341 10.2327C12.8685 9.66622 13.1657 8.92333 13.1743 8.14935C13.1743 7.31392 12.8425 6.5127 12.2517 5.92196C11.661 5.33122 10.8598 4.99935 10.0243 4.99935C9.18892 4.99935 8.3877 5.33122 7.79696 5.92196C7.20622 6.5127 6.87435 7.31392 6.87435 8.14935C6.88305 8.92333 7.1802 9.66622 7.70768 10.2327C6.97323 10.5984 6.3412 11.141 5.86845 11.8115C5.39569 12.4821 5.09704 13.2597 4.99935 14.0743C4.97504 14.2954 5.03952 14.517 5.17861 14.6905C5.3177 14.8639 5.52 14.975 5.74102 14.9993C5.96203 15.0237 6.18365 14.9592 6.35712 14.8201C6.53059 14.681 6.6417 14.4787 6.66602 14.2577C6.76546 13.4503 7.15672 12.7071 7.76609 12.1682C8.37546 11.6293 9.16086 11.3318 9.97435 11.3318C10.7878 11.3318 11.5732 11.6293 12.1826 12.1682C12.792 12.7071 13.1832 13.4503 13.2827 14.2577C13.3059 14.4714 13.4107 14.6678 13.5753 14.806C13.7399 14.9442 13.9515 15.0135 14.166 14.9993H14.2577C14.4761 14.9742 14.6758 14.8638 14.8132 14.6921C14.9505 14.5204 15.0144 14.3013 14.991 14.0827C14.9006 13.2723 14.6113 12.4969 14.149 11.8252C13.6867 11.1536 13.0657 10.6065 12.341 10.2327ZM9.99935 9.63268C9.70597 9.63268 9.41919 9.54569 9.17525 9.3827C8.93132 9.2197 8.7412 8.98804 8.62893 8.717C8.51666 8.44595 8.48728 8.1477 8.54452 7.85997C8.60175 7.57223 8.74303 7.30792 8.95047 7.10047C9.15792 6.89303 9.42223 6.75175 9.70997 6.69452C9.9977 6.63728 10.296 6.66666 10.567 6.77893C10.838 6.8912 11.0697 7.08132 11.2327 7.32525C11.3957 7.56919 11.4827 7.85597 11.4827 8.14935C11.4827 8.54275 11.3264 8.92005 11.0482 9.19822C10.77 9.4764 10.3928 9.63268 9.99935 9.63268ZM15.8327 1.66602H4.16602C3.50297 1.66602 2.86709 1.92941 2.39825 2.39825C1.92941 2.86709 1.66602 3.50297 1.66602 4.16602V15.8327C1.66602 16.4957 1.92941 17.1316 2.39825 17.6005C2.86709 18.0693 3.50297 18.3327 4.16602 18.3327H15.8327C16.4957 18.3327 17.1316 18.0693 17.6005 17.6005C18.0693 17.1316 18.3327 16.4957 18.3327 15.8327V4.16602C18.3327 3.50297 18.0693 2.86709 17.6005 2.39825C17.1316 1.92941 16.4957 1.66602 15.8327 1.66602ZM16.666 15.8327C16.666 16.0537 16.5782 16.2657 16.4219 16.4219C16.2657 16.5782 16.0537 16.666 15.8327 16.666H4.16602C3.945 16.666 3.73304 16.5782 3.57676 16.4219C3.42048 16.2657 3.33268 16.0537 3.33268 15.8327V4.16602C3.33268 3.945 3.42048 3.73304 3.57676 3.57676C3.73304 3.42048 3.945 3.33268 4.16602 3.33268H15.8327C16.0537 3.33268 16.2657 3.42048 16.4219 3.57676C16.5782 3.73304 16.666 3.945 16.666 4.16602V15.8327Z"
              fill="#232323" />
          </svg>
          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{ $t("Contact Info") }}
          </div>
        </nuxt-link>
        <nuxt-link :to="localePath('/user/setting')" class="tw-flex tw-flex-row tw-items-center">
          <svg class="sideBarIcon tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" width="20" height="20"
            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M11.5162 18.3327H8.48286C8.09129 18.3327 7.75249 18.0602 7.66869 17.6777L7.32953 16.1077C6.87707 15.9094 6.44805 15.6615 6.05036 15.3685L4.51953 15.856C4.14619 15.9751 3.74035 15.8179 3.54453 15.4785L2.02453 12.8527C1.83085 12.5131 1.89757 12.0848 2.18536 11.8202L3.37286 10.7368C3.31886 10.2461 3.31886 9.75092 3.37286 9.26018L2.18536 8.17935C1.89715 7.91466 1.8304 7.48578 2.02453 7.14602L3.54119 4.51852C3.73701 4.1791 4.14286 4.02196 4.51619 4.14102L6.04703 4.62852C6.25041 4.47781 6.46214 4.3387 6.68119 4.21185C6.89148 4.09326 7.10789 3.98589 7.32953 3.89018L7.66953 2.32185C7.75292 1.93932 8.09135 1.66643 8.48286 1.66602H11.5162C11.9077 1.66643 12.2461 1.93932 12.3295 2.32185L12.6729 3.89102C12.9068 3.99395 13.1347 4.11025 13.3554 4.23935C13.5611 4.35836 13.7601 4.48884 13.9512 4.63018L15.4829 4.14268C15.8559 4.02407 16.2613 4.18115 16.457 4.52018L17.9737 7.14768C18.1674 7.48725 18.1006 7.91561 17.8129 8.18018L16.6254 9.26352C16.6794 9.75426 16.6794 10.2494 16.6254 10.7402L17.8129 11.8235C18.1006 12.0881 18.1674 12.5164 17.9737 12.856L16.457 15.4835C16.2613 15.8225 15.8559 15.9796 15.4829 15.861L13.9512 15.3735C13.7574 15.5163 13.556 15.6484 13.3479 15.7693C13.1294 15.8959 12.904 16.0103 12.6729 16.1119L12.3295 17.6777C12.2458 18.0599 11.9075 18.3324 11.5162 18.3327ZM6.34953 13.5235L7.03286 14.0235C7.1869 14.137 7.34745 14.2413 7.51369 14.336C7.67011 14.4266 7.83116 14.5089 7.99619 14.5827L8.77369 14.9235L9.15453 16.666H10.8462L11.227 14.9227L12.0045 14.5819C12.3439 14.4322 12.6661 14.2461 12.9654 14.0268L13.6495 13.5268L15.3504 14.0685L16.1962 12.6035L14.877 11.401L14.9704 10.5577C15.0114 10.1888 15.0114 9.81655 14.9704 9.44768L14.877 8.60435L16.197 7.39935L15.3504 5.93352L13.6495 6.47518L12.9654 5.97518C12.666 5.75494 12.3439 5.56748 12.0045 5.41602L11.227 5.07518L10.8462 3.33268H9.15453L8.77203 5.07602L7.99619 5.41602C7.83103 5.48855 7.66996 5.57006 7.51369 5.66018C7.34847 5.75462 7.18877 5.8584 7.03536 5.97102L6.35119 6.47102L4.65119 5.92935L3.80369 7.39935L5.12286 8.60018L5.02953 9.44435C4.98853 9.81321 4.98853 10.1855 5.02953 10.5543L5.12286 11.3977L3.80369 12.6002L4.64953 14.0652L6.34953 13.5235ZM9.99619 13.3327C8.15524 13.3327 6.66286 11.8403 6.66286 9.99935C6.66286 8.1584 8.15524 6.66602 9.99619 6.66602C11.8371 6.66602 13.3295 8.1584 13.3295 9.99935C13.3272 11.8393 11.8362 13.3304 9.99619 13.3327ZM9.99619 8.33268C9.08569 8.3336 8.34443 9.06506 8.33139 9.97547C8.31834 10.8859 9.03833 11.6383 9.94843 11.6653C10.8585 11.6923 11.6219 10.9839 11.6629 10.0743V10.4077V9.99935C11.6629 9.07887 10.9167 8.33268 9.99619 8.33268Z"
              fill="#232323" />
          </svg>

          <div class="tw-text-base-primary tw-text-[16px] md:tw-text-[18px]">
            {{ $t("userProfile.setting") }}
          </div>
        </nuxt-link>
      </div>
      <div
        class="tw-border tw-border-t tw-border-solid tw-border-neutrals-200 tw-mb-[34px] tw-w-full md:tw-mb-[26px] xl:tw-mb-[20px]">
      </div>
      <button class="tw-flex tw-flex-row tw-items-center tw-pl-[13px] tw-mb-[7px] xl:tw-mb-[12px]" @click="logout">
        <img src="~/assets/svg/logout.svg" class="tw-mr-[10px] md:tw-mr-[20px] xl:tw-mr-[10px]" alt="" />
        <div class="tw-text-error-default tw-text-[16px] md:tw-text-[18px]">
          {{ $t("userProfile.logout") }}
        </div>
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: "userSidebar",
  props: {
    userData: {
      type: Object,
    },
    firstName: {
      type: String,
    },
    lastName: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() { },
  watch: {},
  methods: {
    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");

      if (window.innerWidth < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
    },
  },
};
</script>
<style lang="scss" scoped>
:deep() {
  .nuxt-link-active {
    .sideBarIcon>path {
      fill: #f48800 !important;
    }

    >div {
      color: #f48800 !important;
    }
  }
}
</style>