<script setup lang="ts">
import { ref } from 'vue';

const isActive = ref(false);
function clickMenu() {
  isActive.value = !isActive.value;
}
</script>

<template>
  <div class="content fit center">
    <div class="navigation" :class="{ active: isActive }">
      <div class="user-box">
        <div class="img-box">
          <img src="https://cdn.quasar.dev/img/avatar2.jpg" alt="" />
        </div>
        <p class="username">User name</p>
      </div>
      <div class="menu-toggle" @click="clickMenu"></div>
      <ul class="menu">
        <li>
          <a href="javascript:volid(0);"
            ><i class="bi bi-person"></i>My Profile</a
          >
        </li>
        <li>
          <a href="javascript:volid(0);"
            ><i class="bi bi-chat-dots"></i>Messages</a
          >
        </li>
        <li>
          <a href="javascript:volid(0);"
            ><i class="bi bi-bell"></i>Notification</a
          >
        </li>
        <li>
          <a href="javascript:volid(0);"><i class="bi bi-gear"></i>Settings</a>
        </li>
        <li>
          <a href="javascript:volid(0);"
            ><i class="bi bi-question"></i>Help & Support</a
          >
        </li>
        <li>
          <a href="javascript:volid(0);"
            ><i class="bi bi-box-arrow-right"></i>Logout</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}
.content {
  background: linear-gradient(45deg, #4e65ff, #92effd);
  position: relative;
}
.navigation {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  transition: height 0.5s, width 0.5s;
  transition-delay: 0s, 0.75s;
  overflow: hidden;

  .user-box {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: 0.5s;
    transition-delay: 0.5s;

    .img-box {
      position: relative;
      min-width: 60px;
      height: 60px;
      background-color: #000;
      border-radius: 50%;
      border: 10px solid #fff;
      overflow: hidden;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .username {
      white-space: nowrap;
      color: #555;
      font-size: 1.1em;
    }
  }

  .menu-toggle {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before {
      position: absolute;
      content: '';
      width: 32px;
      height: 2px;
      background-color: #555;
      transform: translateY(-10px);
      box-shadow: 0 10px #555;
      transition: 0.5s;
    }

    &::after {
      position: absolute;
      content: '';
      width: 32px;
      height: 2px;
      background-color: #555;
      transform: translateY(10px);
      transition: 0.5s;
    }
  }
}

.active {
  width: 300px;
  height: 400px;
  transition: width 0.5s, height 0.5s;
  transition-delay: 0s, 0.75s;
  .menu-toggle {
    &::before {
      transform: translateY(0) rotate(45deg);
      box-shadow: 0 0 #555;
    }
    &::after {
      transform: translateY(0) rotate(-45deg);
      box-shadow: 0 0 #555;
    }
  }

  .user-box {
    width: calc(100% - 60px);
    transition-delay: 0s;
  }
}

.menu {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 60px;
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  li {
    list-style: none;

    a {
      display: flex;
      align-items: center;
      margin: 18px 0;
      font-size: 1em;
      gap: 10px;
      text-decoration: none;
      color: #555;

      i {
        font-size: 1.5em;
      }

      &:hover {
        color: #4e65ff;
      }
    }
  }
}
</style>