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