diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index 02d01117b8c5c19cc835982f0fcb86659f5864e7..b2636c96bc6fec70cee5f4880f8760082ff5fa57 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -1,13 +1,15 @@
<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 class="name">
+ <router-link :to="'/?uid=' + userId"
+ ><img class="logo" alt="Vue logo" src="../assets/logo.png"
+ /></router-link>
+ <h1 class="text">CaCaoCritics</h1>
+ </div>
+ <SearchBar />
+ <div class="menu">
+ <BurgerMenu />
+ </div>
</div>
</template>
@@ -19,14 +21,25 @@ export default {
name: "Banner",
components: {
BurgerMenu,
- SearchBar
-},
+ SearchBar,
+ },
+ data: function () {
+ return {
+ userId: "",
+ };
+ },
+ created() {
+ this.userId = this.$route.query.uid;
+ console.log("a");
+ console.log(this.$route.query.uid);
+ console.log("a");
+ },
};
</script>
<style>
.banner {
- background-color: #912F56;
+ background-color: #912f56;
flex-direction: row;
vertical-align: middle;
display: flex;
@@ -35,11 +48,10 @@ export default {
}
.name {
text-align: left;
- background-color: #912F56;
+ background-color: #912f56;
flex-direction: row;
vertical-align: middle;
display: flex;
-
}
.logo {
max-width: 70px;
diff --git a/frontend/src/components/BurgerMenu.vue b/frontend/src/components/BurgerMenu.vue
index e8dd1f397ef256b3fd46e804905885036de933bb..74b01dad4d1a5e1bcd9de0089e2e08b47edd32a0 100644
--- a/frontend/src/components/BurgerMenu.vue
+++ b/frontend/src/components/BurgerMenu.vue
@@ -1,61 +1,73 @@
<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="/addUsers">INSCRIPTION</a>
- <a class="topnav_link" href="/Connexion">CONNEXION</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="/addUsers">INSCRIPTION</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 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="/addUsers">INSCRIPTION</a>
+ <a class="topnav_link" href="/Connexion">CONNEXION</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="/addUsers">INSCRIPTION</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>
-</div>
</template>
<script>
export default {
- methods: {
+ methods: {
+ data: function () {
+ return {
+ userId: "",
+ };
+ },
showResponsiveMenufunction: function () {
- var menu = document.getElementById("topnav_responsive_menu");
- var icon = document.getElementById("topnav_hamburger_icon");
- var root = document.getElementById("root");
- if (menu.className === "") {
+ 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 = "";
+ } else {
+ menu.className = "";
icon.className = "";
root.style.overflowY = "";
- }
-},
-},
+ }
+ },
+ },
+ created() {
+ this.userId = this.$route.query.uid;
+ },
};
</script>
<style scoped>
/* ******************** NAV BAR ******************** */
.topnav {
- background-color: #912F56;
+ background-color: #912f56;
display: flex;
align-items: center;
width: 100%;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index b4e4dcecf0e8a84eefa45c025d2ca93d8e652e3b..3de118140dbdf70d4272491890b1d8a5b2b22e25 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -3,7 +3,7 @@
<div class="carousel">
<carousel :items-to-show="5.5" autoplay=1300>
<slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
- <router-link :to="'/movie/'+ movie.id">
+ <router-link :to="'/movie/'+ movie.id + '?uid=' + userId">
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100"
@@ -28,7 +28,7 @@
<h5 class="center"> {{ movie.title }}</h5>
</p>
<p class="film">
- <router-link :to="'/movie/'+ movie.id">
+ <router-link :to="'/movie/'+ movie.id + '?uid=' + userId">
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100"
@@ -64,6 +64,7 @@ export default {
moviename: "",
movies: [],
moviesLoadingError: "",
+ userId: "",
};
},
methods: {
@@ -97,6 +98,7 @@ export default {
},
},
created() {
+ this.userId = this.$route.query.uid;
this.fetchMovies();
this.fetchGenres();
},