From 3a918a7157fa3757e9aff85149decf5eb5a15e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
 <juliette.kalfleche@student-cs.fr>
Date: Wed, 8 Jun 2022 15:28:34 +0200
Subject: [PATCH] add menu

---
 frontend/src/App.vue                   |   3 -
 frontend/src/components/Banner.vue     |  18 ++
 frontend/src/components/BurgerMenu.vue | 243 +++++++++++++++++++++++++
 frontend/src/components/NavBar.vue     |  30 ---
 frontend/src/views/Home.vue            |   7 +-
 5 files changed, 266 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/BurgerMenu.vue
 delete mode 100644 frontend/src/components/NavBar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index bfc1057..02608cf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,19 +1,16 @@
 <template>
   <Banner />
-  <NavBar />
   <router-view />
   <Footer />
 </template>
 
 <script>
-import NavBar from "@/components/NavBar.vue";
 import Footer from "@/components/Footer.vue";
 import Banner from "@/components/Banner.vue";
 
 export default {
   name: "App",
   components: {
-    NavBar,
     Footer,
     Banner,
   },
diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index b319cb9..c317a04 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -1,18 +1,36 @@
 <template>
   <div class="banner">
+  <div class="name">
   <img class="logo" alt="Vue logo" src="../assets/logo.png" />
   <h1 class="text" >CaCaoCritics</h1>
   </div>
+  <div class="menu">
+  <BurgerMenu />
+  </div>
+  </div>
 </template>
 
 <script>
+import BurgerMenu from "@/components/BurgerMenu.vue";
+
 export default {
   name: "Banner",
+  components: {
+    BurgerMenu,
+  },
 };
 </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;
diff --git a/frontend/src/components/BurgerMenu.vue b/frontend/src/components/BurgerMenu.vue
new file mode 100644
index 0000000..b2b3849
--- /dev/null
+++ b/frontend/src/components/BurgerMenu.vue
@@ -0,0 +1,243 @@
+<template>
+<div id="root">
+  <div id="topnav" class="topnav">
+    <a id="home_link" class="topnav_link" href="/">HOME</a>
+
+    <!-- Classic Menu -->
+    <nav role="navigation" id="topnav_menu">
+      <a class="topnav_link" href="/about">ABOUT</a>
+      <a class="topnav_link" href="/counter">COUNTER</a>
+      <a class="topnav_link" href="/users">USER</a>
+    </nav>
+
+    <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()">
+      <!-- Some spans to act as a hamburger -->
+      <span></span>
+      <span></span>
+      <span></span>
+    </a>
+
+    <!-- Responsive Menu -->
+    <nav role="navigation" id="topnav_responsive_menu">
+      <ul>
+        <li><a href="/">HOME</a></li>
+        <li><a href="/about">ABOUT</a></li>
+        <li><a href="/contact-us">CONTACT</a></li>
+        <li><a href="/privacy-policy">PRIVACY POLICY</a></li>
+        <li><a href="/terms-and-conditions">TERMS AND CONDITIONS</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+    methods: {
+    showResponsiveMenufunction: function () {
+    var menu = document.getElementById("topnav_responsive_menu");
+    var icon = document.getElementById("topnav_hamburger_icon");
+    var root = document.getElementById("root");
+    if (menu.className === "") {
+        menu.className = "open";
+        icon.className = "open";
+        root.style.overflowY = "hidden";
+    } else {
+        menu.className = "";                    
+        icon.className = "";
+        root.style.overflowY = "";
+    }
+},
+},
+};
+</script>
+
+<style scoped>
+/* ******************** NAV BAR ******************** */
+.topnav {
+  background-color: #912F56;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.topnav_link {
+  color: white;
+  padding: 12px;
+  text-decoration: none;
+}
+.topnav_link:hover {
+  color: #0078b4;
+}
+
+/* hide responsive menu */
+#topnav_hamburger_icon,
+#topnav_responsive_menu {
+  display: none;
+}
+
+@media only screen and (max-width: 768px) {
+  /* hide classic menu */
+  #topnav_menu {
+    display: none;
+  }
+
+  /* position home link at left and hamburger at right */
+  #home_link {
+    flex-grow: 1;
+  }
+
+  /* disable horizontal scrolling  */
+  #root {
+    overflow-x: hidden;
+    position: absolute;
+  }
+
+  /* show responsive menu and position at the right of the screen */
+  #topnav_responsive_menu {
+    display: block;
+    position: absolute;
+    margin: 0;
+    right: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+
+    z-index: 99;
+
+    transform-origin: 0% 0%;
+    transform: translate(200%, 0);
+
+    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
+  }
+
+  #topnav_responsive_menu ul {
+    display: flex;
+    flex-direction: column;
+
+    position: absolute;
+    margin: 0;
+    right: 0;
+    top: 0;
+
+    min-width: 50vw;
+    height: 100vh;
+    padding: 56px 0 0;
+
+    text-align: center;
+
+    background: #ededed;
+    list-style-type: none;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  #topnav_responsive_menu li {
+    padding: 12px 24px;
+  }
+
+  #topnav_responsive_menu a {
+    white-space: nowrap;
+    color: #333;
+    text-decoration: none;
+  }
+
+  /* And let's slide it in from the right */
+  #topnav_responsive_menu.open {
+    transform: none;
+    position: fixed;
+  }
+
+  /* ******************** HAMBURGER ICON ******************** */
+  /* define size and position of the hamburger link */
+  #topnav_hamburger_icon {
+    display: block;
+    position: relative;
+    margin: 16px;
+    width: 33px;
+    height: 28px;
+
+    z-index: 100;
+
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  /* define the style (size, color, position, animation, ...) of the 3 spans */
+  #topnav_hamburger_icon span {
+    display: block;
+    position: absolute;
+    height: 4px;
+    width: 100%;
+    margin-bottom: 5px;
+
+    background: #ededed;
+    border-radius: 3px;
+
+    z-index: 100;
+
+    opacity: 1;
+    left: 0;
+
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transition: 0.25s ease-in-out;
+    -moz-transition: 0.25s ease-in-out;
+    -o-transition: 0.25s ease-in-out;
+    transition: 0.25s ease-in-out;
+  }
+
+  /* set the 3 spans position to look like a hamburger */
+  #topnav_hamburger_icon span:nth-child(1) {
+    top: 0px;
+    -webkit-transform-origin: left top;
+    -moz-transform-origin: left top;
+    -o-transform-origin: left top;
+    transform-origin: left top;
+  }
+  #topnav_hamburger_icon span:nth-child(2) {
+    top: 12px;
+    -webkit-transform-origin: left center;
+    -moz-transform-origin: left center;
+    -o-transform-origin: left center;
+    transform-origin: left center;
+  }
+  #topnav_hamburger_icon span:nth-child(3) {
+    top: 24px;
+    -webkit-transform-origin: left bottom;
+    -moz-transform-origin: left bottom;
+    -o-transform-origin: left bottom;
+    transform-origin: left bottom;
+  }
+
+  /* change color when opening the menu */
+  #topnav_hamburger_icon.open span {
+    background: #333;
+  }
+
+  /* the first span rotates 45° \ */
+  #topnav_hamburger_icon.open span:nth-child(1) {
+    width: 110%;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  /* the second span disappears */
+  #topnav_hamburger_icon.open span:nth-child(2) {
+    width: 0%;
+    opacity: 0;
+  }
+
+  /* the last span rotates -45° / */
+  #topnav_hamburger_icon.open span:nth-child(3) {
+    width: 110%;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+}
+</style>
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
deleted file mode 100644
index f87eacb..0000000
--- a/frontend/src/components/NavBar.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="nav">
-    <router-link class="nav-link" to="/">Accueil</router-link> |
-    <router-link class="nav-link" to="/counter">Counter</router-link> |
-    <router-link class="nav-link" to="/users">Users</router-link> |
-    <router-link class="nav-link" to="/about">About</router-link>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "NavBar",
-};
-</script>
-
-<style scoped>
-.nav {
-  text-align: center;
-  padding: 30px;
-}
-
-.nav-link {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-.nav-link.router-link-exact-active {
-  color: #FF68AD;
-}
-</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index becb50c..59c1aa3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+  <div class="carousel">
    <carousel :items-to-show="5.5" autoplay=1300 >
     <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
         <img
@@ -13,8 +14,7 @@
       <pagination />
     </template>
   </carousel>
-    <h1>Bienvenue sur CaCaoCritics</h1>
-    <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+  </div>
     <br />
     <input type="text" v-model="moviename" placeholder="enter a movie name" />
     <div class="film-name">Le film est : {{ moviename }}</div>
@@ -101,4 +101,7 @@ li {
 a {
   color: #ff68ad;
 }
+.carousel {
+  margin-top: 30px;
+}
 </style>
-- 
GitLab