<template>
  <nav class="navbar" :class="{'navbar--light':light}">
    <div class="navbar__logo">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-8 w-8 mr-2"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
        />
      </svg>
      <div class="navbar__company">zsp sugar ui</div>
    </div>
    <div class="navbar__burger">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-8 w-8"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 6h16M4 12h16M4 18h16"
        />
      </svg>
      <div class="navbar__company">zsp sugar ui</div>
    </div>
    <ul class="navbar__list" :class="listClasses">
      <li class="navbar__item">Home</li>
      <li class="navbar__item">Über Uns</li>
      <li class="navbar__item">Unser Team</li>
    </ul>
  </nav>
</template>

<script>
import "../../../dist/components/Navbar.css";
export default {
  name: "sui-navbar",
  props: {
    position: {
      type: String,
      default: "right",
    },
    light: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    listClasses() {
      return `navbar__list--${this.position}`;
    },
  },
};
</script>

<style lang="scss" scoped></style>
