Commit 5a3c776a authored by Corentin Mors's avatar Corentin Mors
Browse files

Add new base with lateral menu

parent 4e617ff7
......@@ -41,4 +41,76 @@ body {
.content-input{
height: 500px;
}
/** Menu CSS */
.wrapper {
display: flex;
width: 100%;
}
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
text-decoration: none;
color: #fff;
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
\ No newline at end of file
$(document).ready(function(){$("#sidebar").mCustomScrollbar({theme:"minimal"}),$("#sidebarCollapse").on("click",function(){$("#sidebar, #content").toggleClass("active"),$(".collapse.in").toggleClass("in"),$("a[aria-expanded=true]").attr("aria-expanded","false")})});
\ No newline at end of file
body{padding-top:5rem}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}
\ No newline at end of file
body{padding-top:5rem}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.content-input{height:500px}.wrapper{display:flex;width:100%}#sidebar{width:250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:-250px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#sidebar ul.components{padding:20px 0;border-bottom:1px solid #47748b}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{text-decoration:none;color:#fff;padding:10px;font-size:1.1em;display:block}#sidebar ul li a:hover{color:#7386d5;background:#fff}#sidebar ul li.active>a,a[aria-expanded=true]{color:#fff;background:#6d7fcc}#content{width:calc(100% - 250px);padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:100%}
\ No newline at end of file
/**** Main JS file ****/
/*** Please devide this file in sections ***/
/*** Lateral menu ***/
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="ExpressJS + MongoDB + Nunjucks starter kit to kickstart your projects">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="ExpressJS + MongoDB + Nunjucks starter kit to kickstart your projects">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>{% if title %}{{ title }} - StarterKit{% else %}Dashboard - StarterKit{% endif %}</title>
<title>{% if title %}{{ title }} - StarterKit{% else %}Dashboard - StarterKit{% endif %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Fontawesome core CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Fontawesome core CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/assets/dist/style.min.css" rel="stylesheet">
</head>
<!-- Custom styles for this template -->
<link href="/assets/dist/style.min.css" rel="stylesheet">
</head>
<body><nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/"><i class="fas fa-cubes"></i> StarterKit</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<body>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/users"><i class="fas fa-user"></i> Users</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://pixelswap.fr/"><i class="far fa-question-circle"></i> About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown-tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-toolbox"></i> Tools</a>
<div class="dropdown-menu" aria-labelledby="dropdown-tools">
<a class="dropdown-item" href="#">Edit content</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>DashExplorer</h3>
</div>
{% block content %}
This is the default content
{% endblock %}
<ul class="list-unstyled components">
<li>
<a href="#dashboardSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Dashboard</a>
<ul class="collapse list-unstyled" id="dashboardSubmenu">
<li>
<a href="#">Devices</a>
</li>
<li>
<a href="#">Personnal</a>
</li>
</ul>
</li>
<li>
<a href="#missionSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Missions</a>
<ul class="collapse list-unstyled" id="missionSubmenu">
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Checlists</a>
</li>
<li>
<a href="#">Resources</a>
</li>
</ul>
</li>
<li>
<a href="#">Weather</a>
</li>
<li>
<a href="#">Map</a>
</li>
</ul>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.1.0" async></script>
</body>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Menu</span>
</button>
<hr>
{% block content %}
This is the default content
{% endblock %}
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.1.0" async></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/assets/dist/main.min.js" async></script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment