<script setup>
import { ref, reactive } from "vue";
</script>

<template>
  <div class="navbar">
    <!-- <img src="../assets/img/ChoozMo_logo.png" alt="" class="logo" />
    <p class="mx-1">×</p>
    <img src="../assets/img/SYSTEX_logo.png" alt="" class="systex-logo" /> -->
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  padding: 10px 15px;
  background-color: #fafcf7;

  .logo {
    max-width: 150px;

    @media (max-width: 575px) {
      max-width: 110px;
    }
  }

  .systex-logo {
    max-width: 200px;
    object-fit: contain;
  }
}
</style>
