portfolio/src/Deprecated/OldMenu.vue

<script setup>
import Name from './Name.vue';
import { useBurgerStore } from '@/stores/burger';
//import { Ref } from 'vue';

const burger = useBurgerStore()

</script>

<template>

  <div class="menu">
    <div class="menu-inner">
      <div class="prez">
        <Name/>
      </div>
      <!-- <ul class="menu-nav">
        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
              <div>Who&nbspam&nbspI</div>
            </span></a></li>
        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
              <div>Projects</div>
            </span></a></li>
        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
              <div>Networks</div>
            </span></a></li>
        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
              <div>Contact</div>
            </span></a></li>
      </ul> -->
      <!-- <div class="title">
      
        <p>Introducing myself...</p>
      </div> -->
      <div class="gallery">
        <div class="images">
          <a class="image-link" href="#">
            <div class="image" data-label="Who am I"><img src="../assets/question.png" alt=""></div>
          </a>
          <a class="image-link" href="#">
            <div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
          </a>
          <a class="image-link" href="#">
            <div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
          </a>
          <a class="image-link" href="#">
            <div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
          </a>
        </div>
    </div>
  </div>

</div>
</template>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");




.menu {
  //z-index: 1;
  
  //position: fixed;
  padding-top: 4em;
  //top: 0;
  //left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #1a1e23;
  opacity: 0;
  //overflow: auto;
  //visibility:visible;
  transition: 0.3s;

  &-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style-type: none;

    &-item {
      flex: 1;
    }

    &-link {
      position: relative;
      display: inline-flex;
      font-size: 2rem;
      color: white;
      text-decoration: none;

      span {
        overflow: hidden;

        div {
          transform: translateY(105%);
          margin: 0.25em 0.5em;
        }
      }

      &::after {
        position: absolute;
        content: "";
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--primary-color);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s;
      }

      &:hover::after {
        transform: scaleX(0);
        transform-origin: left;
      }
    }
  }

  .gallery {
    margin-top: 50px;
    text-align: center;
  }


  .images {
    margin-top: 36px;
    display: flex;
    flex-wrap:wrap;
    // flex-direction: row;
    justify-content: center;
    align-items: center;

    .image-link {
      //min-width: px;
      width: 20vw;
      margin: 0 12px;
      overflow: hidden;

      .image {
        position: relative;
        transition: 0.6s;

        &::before {
          position: absolute;
          content: attr(data-label);
          //display: block;
          top: -50px;
          left: -0px;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          width: 20vw;
          color: rgb(218, 218, 218);
          background: rgba(0, 0, 0, 0.6);
          opacity: 1;
          padding : 0 0.2em;
          transition: 0.5s;
          transition-delay: 0.2s;
        }
      }

      &:hover .image {
        transform: scale(1.1);

        &::before {
          opacity: 1;
          left: -5px;
          top: 5px;          
        }
      }
    }

    img {
      height: 250px;
      transform: translateY(105%);
    }
  }
}

  @keyframes menu-shake{
      from {
          //opacity: 0;
          filter: drop-shadow(-150px 0px 10px #4d0000);
          //background-color: rgb(99, 0, 0);
      }
      10%{
        //opacity: 50%;
        filter: drop-shadow(150px 0px 3px #4d0000);
      }
      20%{
        filter: drop-shadow(-100px 0px 3px #4d0000);
        
      }
      30%{
        filter: drop-shadow(50px 0px 3px #4d0000);
        
      }
      40%{
        filter: drop-shadow(-25px 0px 3px #4d0000);
        
      }
      50%{
        filter: drop-shadow(10px 0px 3px #4d0000);
        
      }
      80%{
        
        filter: drop-shadow(-10px 0px 3px #4d0000);
      }
      100%{
        //opacity : 100%;
        filter: drop-shadow(0px 0px 3px #4d0000);
        
      }
    }
</style>