Website/app/frontend/styles/components/BurgerMenu/Index.scss

@import "Nav";

.burger-menu {
  @apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
  @apply flex flex-col p-2 gap-2 w-64;
  @apply bg-gray-100 dark:bg-gray-700;


  &__button-open {
    @apply ml-auto h-full aspect-square;
  }

  &__button-close {
    @apply h-8 w-8 absolute right-2 aspect-square;
  }

  &__user-section {
    @apply flex flex-col items-center;
    @apply text-black dark:text-white;
  }

  &__user-picture-wrapper {
    @apply w-1/3 aspect-square mx-auto;
  }

  &__user-name {
    @apply app__text-bold text-xl;
    @apply h-6;
  }

  &__user-email {
    @apply app__text-light text-base;
    @apply h-6;
  }

  &__user-info {
    @apply app__text-light text-base;
    @apply h-6;
  }

  &__user-actions {
    @apply inline-flex  mt-2;

    button {
      @apply inline-flex p-1;
      @apply bg-transparent;
      @apply app__text text-sm;
      @apply border border-r-0 border-gray-900 dark:border-white;

      &:first-of-type {
        @apply rounded-s-lg;
      }

      &:last-of-type {
        @apply rounded-e-lg border-r;
      }
    }
  }

  &__login {
    @apply flex p-2 gap-2 items-center justify-center;
    @apply rounded-lg bg-blue-500 app__text;
  }
}