Based menu on Twitter Bootstrap Navbar

This commit is contained in:
Alexandre Bourlier 2018-03-18 15:18:29 +01:00
parent 7fc0f489f7
commit 53e26268b3
5 changed files with 38 additions and 24 deletions

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
# Folders
.git
node_modules
bower_components
dist/css/*
!dist/css/.gitkeep
dist/html/*

View File

@ -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>
<div id="mainContainer" class="container-fluid">
<div class="row pt-3">
<?php require_once('src/html/menu.html'); ?>
<?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>
<div id="mainContainer" class="container-fluid">
<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-->

5
package-lock.json generated
View File

@ -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",

View File

@ -13,6 +13,7 @@
"grunt-sass": "^2.1.0"
},
"dependencies": {
"bootstrap": "^4.0.0"
"bootstrap": "^4.0.0",
"jquery": "^3.3.1"
}
}

View File

@ -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>