diff --git a/.gitignore b/.gitignore
index a0844333d4ed7be228c14ba00fbbb2cd62ef2c87..abba2a94e8fa3f817616a40e6cf15d68183fc031 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
# Folders
.git
node_modules
+bower_components
dist/css/*
!dist/css/.gitkeep
dist/html/*
diff --git a/index.php b/index.php
index c046cf83abfe64a8683613fd00bba3c82ee9b743..9a33bdef7e53a8c79ba722e46e4fa7be677e5104 100644
--- a/index.php
+++ b/index.php
@@ -16,6 +16,8 @@
<link rel="stylesheet" href="dist/css/hd-app.css" />
<!-- Javascript -->
+ <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+ <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/lib/webcomponents-loader.js"></script>
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
@@ -24,19 +26,17 @@
</head>
<body>
+ <?php require_once('src/html/menu.html'); ?>
+
<div id="mainContainer" class="container-fluid">
- <div class="row pt-3">
- <?php require_once('src/html/menu.html'); ?>
-
- <main id="ldp-root" class="col-md-10">
- <?php require_once('src/html/home.html'); ?>
- <?php require_once('src/html/members.html'); ?>
- <?php require_once('src/html/projects.html'); ?>
- <?php require_once('src/html/groups.html'); ?>
- <?php require_once('src/html/calendar.html'); ?>
- <?php require_once('src/html/drive.html'); ?>
- </main>
- </div>
+ <main id="ldp-root" class="col-md-10">
+ <?php require_once('src/html/home.html'); ?>
+ <?php require_once('src/html/members.html'); ?>
+ <?php require_once('src/html/projects.html'); ?>
+ <?php require_once('src/html/groups.html'); ?>
+ <?php require_once('src/html/calendar.html'); ?>
+ <?php require_once('src/html/drive.html'); ?>
+ </main>
</div>
<!--Profil Modal-->
diff --git a/package-lock.json b/package-lock.json
index d00ac7624a4e8f908ec0d4bd71e3d2ca41b20f24..1bf74b4e031de54c8709b822a76e51f1d6f1752b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1353,6 +1353,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
+ "jquery": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+ "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+ },
"js-base64": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
diff --git a/package.json b/package.json
index 69de5402b4f0de4d03c62775cc9f1dc6628cc65c..5096a51da36d0f6f6fe57b269245240663ba18e8 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"grunt-sass": "^2.1.0"
},
"dependencies": {
- "bootstrap": "^4.0.0"
+ "bootstrap": "^4.0.0",
+ "jquery": "^3.3.1"
}
}
diff --git a/src/html/menu.html b/src/html/menu.html
index 2a7f4ea7380ba83785d07a80415bbbd5e4672bfd..7f68046b575365ca19206a2eed0e18d648f63c77 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -1,11 +1,18 @@
-<div class="col-md-2 menu">
- <div id="menu-title">HAPPY APP</div>
- <ldp-router root="ldp-root" default-route="home">
- <ldp-route name="members">Membres</ldp-route>
- <ldp-route name="projects">Projets</ldp-route>
- <ldp-route name="groups">Groupes</ldp-route>
- <ldp-route name="calendar">Agenda</ldp-route>
- <ldp-route name="drive">Drive</ldp-route>
- <!-- <ldp-route name="home">Home</ldp-route> -->
- </ldp-router>
-</div>
+<nav class="navbar navbar-expand-md navbar-dark bg-dark">
+ <div id="menu-title" class="navbar-brand">HAPPY APP</div>
+
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="home">
+ <ldp-route class="nav-item active" name="members">Membres</ldp-route>
+ <ldp-route class="nav-item" name="projects">Projets</ldp-route>
+ <ldp-route class="nav-item" name="groups">Groupes</ldp-route>
+ <ldp-route class="nav-item" name="calendar">Agenda</ldp-route>
+ <ldp-route class="nav-item" name="drive">Drive</ldp-route>
+ <!-- <ldp-route name="home">Home</ldp-route> -->
+ </ldp-router>
+ </div>
+</nav>