From 53e26268b33eeba807bc84ba0356bc2f8ee98545 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Sun, 18 Mar 2018 15:18:29 +0100
Subject: [PATCH] Based menu on Twitter Bootstrap Navbar
---
.gitignore | 1 +
index.php | 24 ++++++++++++------------
package-lock.json | 5 +++++
package.json | 3 ++-
src/html/menu.html | 29 ++++++++++++++++++-----------
5 files changed, 38 insertions(+), 24 deletions(-)
diff --git a/.gitignore b/.gitignore
index a0844333..abba2a94 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 c046cf83..9a33bdef 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 d00ac762..1bf74b4e 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 69de5402..5096a51d 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 2a7f4ea7..7f68046b 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>
--
GitLab