<template>
  <div class="banner">
  <div class="name">
  <a href="/"><img class="logo" alt="Vue logo" src="../assets/logo.png" /></a>
  <h1 class="text" >CaCaoCritics</h1>
  </div>
  <SearchBar />
  <div class="menu">
  <BurgerMenu />
  </div>
  </div>
</template>

<script>
import BurgerMenu from "@/components/BurgerMenu.vue";
import SearchBar from "./SearchBar.vue";

export default {
  name: "Banner",
  components: {
    BurgerMenu,
    SearchBar
},
};
</script>

<style>
.banner {
  background-color: #912F56;
  flex-direction: row;
  vertical-align: middle;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.name {
  text-align: left;
  background-color: #912F56;
  flex-direction: row;
  vertical-align: middle;
  display: flex;

}
.logo {
  max-width: 70px;
  max-height: 70px;
  margin-right: 20px;
  margin-top: 15px;
  margin-left: 20px;
}
.text {
  width: 100px;
  color: #ffffff;
  margin-top: 35px;
}
</style>
