begin the menu with movies type

frontend/src/components/MovieType.vue

+<template>
+<div class="box">
+<h1>Genre</h1>
+<input type="checkbox" id="action" value="Action" v-model="genre">
+<label for="Action">Action</label>
+<br>
+<input type="checkbox" id="horreur" value="Horreur" v-model="genre">
+<label for="horreur">Horreur</label>
+<br>
+</div>
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+.box {
+    margin-left: 20px;
+    background-color: #912F56;
+    width: 200px;
+    border-radius: 20px;
+    color:white;
+    justify-content: space-between;
+    
+}
+
+</style>
\ No newline at end of file

frontend/src/components/SearchBar.vue

@@ -26,10 +26,8 @@ methods: {
 #content {
   height: 50px;
   width: 300px;
-  margin-left: 500px;
-  top: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
+  margin-top: 20px;
 }
 
 #content.on {
@@ -82,6 +80,7 @@ input {
   -webkit-transform: translate(-100%, -50%);
   -ms-transform: translate(-100%, -50%);
   transform: translate(-100%, -50%);
+
 }
 
 .search:before {
@@ -152,8 +151,8 @@ input {
   transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
   -webkit-transition-delay: 0.4s, 0s, 0.4s;
   transition-delay: 0.4s, 0s, 0.4s;
-  -webkit-transform: translate(-100%, -50%);
+  /* -webkit-transform: translate(-100%, -50%);
   -ms-transform: translate(-100%, -50%);
-  transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%); */
 }
 </style>
\ No newline at end of file

frontend/src/views/Home.vue

@@ -17,6 +17,7 @@
   </div>
     <br />
   <div class="search">
+    <MovieType />
     <SearchBar />
   </div>
     <div class="film-name">Le film est : {{ moviename }}</div>
@@ -40,6 +41,7 @@ import axios from "axios";
 import 'vue3-carousel/dist/carousel.css';
 import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
 import SearchBar from "../components/SearchBar.vue";
+import MovieType from "../components/MovieType.vue";
 
 export default {
   name: "Home",
@@ -49,6 +51,7 @@ export default {
     Pagination,
     Navigation,
     SearchBar,
+    MovieType,
   },
   data: function () {
     return {
@@ -110,4 +113,9 @@ a {
 .film {
   text-align: center;
 }
+.search {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>