blog-fs/components/layouts/global-sidebar.module.css

.wrapper {
  @apply bg-green-400 text-white min-h-screen;
  @apply absolute top-0 left-0 right-0 bottom-0 sm:static;
  @apply  -translate-x-full transform transition-transform sm:transition-none sm:translate-x-0;
  :global(.dark) & {
    @apply bg-gray-800 text-gray-400;
  }

  &.focusOpen {
    @apply translate-x-0;
  }
}
.sidebar {
  @apply overflow-hidden flex flex-col fixed top-0;
  @apply text-center shadow-2xl h-screen;
  padding-top: 10vh;
}

.avatar {
  @apply w-36 h-36 rounded-full;
  @apply sm:w-16 sm:h-16;
  @apply md:w-36 md:h-36;
  @apply mx-auto md:my-8 flex-none;
  
  :global(.dark) & {
    @apply filter brightness-75;
  }
}

.name {
  @apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
  @apply md:my-8 my-4 flex-none select-all;
}
.nav {
  @apply my-auto text-left self-center;
}
.navItem {
  @apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
  @apply tracking-widest;
  small {
    @apply text-xs md:inline hidden;
  }
  &:hover {
    text-shadow: 0 0px 5px #abbf00;
  }
}
.bio {
  @apply text-sm text-opacity-70 text-white;
  @apply my-4;

  :global(.dark) & {
    @apply text-gray-500;
  }
}