<script>
import { h } from 'vue'
import {createIcons, icons} from "lucide";

export default {
  name: 'AppContainerLeftPanel',
  components: {
    MobileMenuButton: h('div')
  },
  props: {
    toggleMobileMenu: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      mobile_menu_opened: false
    }
  },
  computed: {
  },
  mounted() {
    this.icons()
  },
  updated() {
    this.icons()
  },
  methods: {
    icons() {
      createIcons({ icons, nameAttr: "icon" })
    }
  },
}

</script>

<template>
  <div class="flex items-center border-white/[0.2] border-r">
    <mobile-menu-button
      class="flex p-4 cursor-pointer md:hidden"
      @click="toggleMobileMenu()"
    >
      <i
        icon="bar-chart-2"
        class="w-6 h-6 text-white transform rotate-90"
      />
    </mobile-menu-button>
    <router-link
      class="hidden md:flex items-center relative -intro-x cursor-pointer p-4 "
      to="/?page=machines&mode=cards"
    >
      <div
        class="text-white mx-4"
        style="font-weight: 600;"
      >
        LiveMonitor
      </div>
    </router-link>
    <div class="w-[15px]" />
  </div>
</template>
