Hamburger v1.0

The <e-hamburger> component is a component that can be used for .

Usage

An e-hamburger has attributes that must be provided,

<e-hamburger
  :active=''
  @click=''
/>

Attributes

active | Type: Boolean | Default: false
@click | Type: Function | Default: undefined

Examples

Below a few interactive examples of unavailable can be found.

Default

<e-hamburger/>

:active='true'

<e-hamburger
  :active='true'
/>

Source Code

e-hamburger.vue

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

export type Props = {
  active?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  active: false
});

const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void;
}>();

const classes = computed(() => {
  return {
    active: props.active
  };
});
</script>

<template>
  <button
    class="e-hamburger"
    :class="classes"
    :title="$t('navigationMenu.hamburger')"
    type="button"
    :aria-label="$t('navigationMenu.hamburger')"
    @click="emit('click', $event)"
  >
    <span
      class="e-top-bun"
      aria-hidden="true"
    />
    <span
      class="e-burger"
      aria-hidden="true"
    />
    <span
      class="e-bottom-bun"
      aria-hidden="true"
    />
  </button>
</template>

<style scoped lang="scss">
.e-hamburger {
  width: 24px;
  height: 24px;
  margin: 0 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: transparent;
  border: none;
  overflow: hidden;

  .e-top-bun,
  .e-burger,
  .e-bottom-bun {
    height: 2px;
    width: 24px;
    border-radius: 1px;
    background-color: var(--e-foreground);
    border: none;
    transition: ease 0.1s;
  }

  .e-top-bun,
  .e-bottom-bun {
    width: 18px;
  }

  &.active {
    .e-top-bun {
      width: 23px;
      transform: rotate(45deg) translate(5px, 4px);
    }

    .e-burger {
      transform: translateX(-24px);
      opacity: 0;
    }

    .e-bottom-bun {
      width: 23px;
      transform: rotate(-45deg) translate(5px, -4px);
    }
  }

  &:hover {
    .e-top-bun,
    .e-burger,
    .e-bottom-bun {
      background-color: var(--e-accent);
    }
  }
}
</style>