Merge pull request #46 from betagouv/add-navbar

Ajout d'une barre de navigation

front-end/package.json

@@ -13,6 +13,7 @@
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",

front-end/src/App.vue

@@ -1,20 +1,16 @@
 <template>
-  <div id="nav">
-    <h1>Ma Cantine Egalim</h1>
-    <Welcome msg="Tout savoir sur la loi Egalim"/>
+  <TheNavbar/>
 
-    <router-link to="/about">About</router-link>
-  </div>
   <router-view/>
 </template>
 
 <script>
 // @ is an alias to /src
-import Welcome from '@/components/Welcome.vue'
+import TheNavbar from '@/components/TheNavbar.vue'
 
 export default {
   components: {
-    Welcome
+    TheNavbar
   }
 }
 </script>
@@ -27,17 +23,4 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

front-end/src/components/TheNavbar.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="navbar">
+    <router-link :to="{ name: 'LandingPage' }" id="landing">
+      <img src="@/assets/Marianne.png" id="Marianne">
+      <div id="logo">
+        <div id="ma-cantine-beta-gouv"><span id="ma-cantine">ma-cantine</span>.beta.gouv.fr</div>
+        <div id="egalim">Pour une alimentatation saine, de qualité et plus durable dans nos assiettes grâce à EGAlim</div>
+      </div>
+    </router-link>
+    <router-link :to="{ name: 'KeypointsPage' }" class="navbar-item">Mesures phares</router-link>
+    <a class="navbar-item" href="https://beta.gouv.fr/startups/egalim.html" target="_blank">
+      À propos <i class="fas fa-external-link-alt"></i>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TheNavbar',
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+a {
+  text-decoration: none;
+}
+
+#navbar {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 50px;
+}
+
+#landing {
+  display: flex;
+}
+
+#Marianne {
+  height: 75px;
+}
+
+#logo {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-left: 30px;
+  text-align: left;
+  width: 300px;
+  text-decoration: none;
+}
+
+#ma-cantine-beta-gouv {
+  font-style: italic;
+  font-weight: 200;
+  font-size: 25px;
+  line-height: 29px;
+  color: rgba(64, 64, 64, 0.85);
+}
+
+#ma-cantine {
+  font-weight: bold;
+  color: #F7B48E;
+}
+
+#egalim {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 15px;
+  color: rgba(0,0,0,0.83);
+}
+
+.navbar-item {
+  margin: auto 0;
+  border-radius: 25px;
+  padding: 15px;
+  font-size: 17px;
+  line-height: 20px;
+  color: rgba(64, 64, 64, 0.85);
+}
+
+.navbar-item:hover {
+  color: white;
+  background-color: #F7B48E;
+}
+</style>

front-end/src/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import '@fortawesome/fontawesome-free/css/all.css'
+import '@fortawesome/fontawesome-free/js/all.js'
 
 createApp(App).use(router).mount('#app')

front-end/src/router/index.js

@@ -1,19 +1,23 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
+import LandingPage from '@/views/LandingPage.vue';
+import KeypointsPage from '@/views/KeypointsPage.vue';
 
 const routes = [
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/',
+    name: 'LandingPage',
+    component: LandingPage,
+  },
+  {
+    path: '/mesures-phares',
+    name: 'KeypointsPage',
+    component: KeypointsPage,
   }
-]
+];
 
 const router = createRouter({
   history: createWebHistory(),
   routes
-})
+});
 
-export default router
+export default router;

front-end/src/views/KeypointsPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Mesures Phares</h1>
+  </div>
+</template>

front-end/src/views/LandingPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Welcome</h1>
+  </div>
+</template>