vict3459/Ekapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v0.10.11 - Collapse-able admin menu

Browse Source
This commit is contained in:
frederikpyt
2020-08-20 14:56:11 +02:00
parent b47c06372b
commit c0d336a8e0
13 changed files with 269 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skolehjem/resources/sass/admin/nav/nav.scss
Vendored
+9 -4
View File
@@ -1,7 +1,8 @@
.nav {
width: 15%;
height: 100%;
min-width: 194px;
min-width: calc(1.5em + 4rem);
transition: width .5s;
}
.segment > h3 {
@@ -14,14 +15,18 @@
.segment > h3 > a {
padding: 1rem 2rem;
display: block;
display: flex;
}
.segment > h3 > a > img {
width: 1.5em;
}
.segment > div {
padding: 0 1.25rem 0 1.25rem;
/*padding: 0 1.25rem 0 1.25rem;
width: calc(100% - 2.5rem);
align-items: center;
margin-bottom: .5rem;
margin-bottom: .5rem;*/
}
.segment > h3:hover {
skolehjem/resources/views/admin/layout/base.blade.php
+62 -13
View File
@@ -11,41 +11,47 @@
@yield("header")
<main class="row">
<div class="col nav" style="background-color: #333333;">
<div class="segment">
<h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Brugere</span></a></h3>
<div class="segment" style="height: 60px;">
<div class="text-white row align-items-center" style="margin-left: -1rem; margin-top: 0; margin-bottom: 0; font-size: 1.15rem; height: calc(100% - 2rem); padding: 1rem 2rem; width: calc(100% - 3rem); background-color: #333333 !important;">
<a href="javascript:void(0)" id="open" style="padding: 0; margin-left: auto; display: none;" onclick="openNav()" class="open-btn text-white"><i class="fa fa-bars"></i></a>
<a href="javascript:void(0)" id="close" style="padding: 0; margin-left: auto;" onclick="closeNav()" class="close-btn text-white"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("roles.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Roller</span></a></h3>
<h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span style="margin-left: 4px;">Brugere</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("news.index")}}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Nyheder</span></a></h3>
<h3 class="text-white"><a href="{{ route("roles.index") }}" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span style="margin-left: 4px;">Roller</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("menu-plans.index")}}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Menuplan</span></a></h3>
<h3 class="text-white"><a href="{{ route("news.index")}}" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span style="margin-left: 4px;">Nyheder</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("events.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
<h3 class="text-white"><a href="{{ route("menu-plans.index")}}" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span style="margin-left: 4px;">Menuplan</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("locations.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Lokationer</span></a></h3>
<h3 class="text-white"><a href="{{ route("events.index") }}" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("washing-machines.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
<h3 class="text-white"><a href="{{ route("locations.index") }}" class="text-white"><img src="{{asset("/images/icons/location.svg")}}" class="fa"><span style="margin-left: 4px;">Lokationer</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("washing-reservations.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Reservationer</span></a></h3>
<h3 class="text-white"><a href="{{ route("washing-machines.index") }}" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route("contacts.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Kontakter</span></a></h3>
<h3 class="text-white"><a href="{{ route("washing-reservations.index") }}" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span style="margin-left: 4px;">Reservationer</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Vejledning</span></a></h3>
<h3 class="text-white"><a href="{{ route("contacts.index") }}" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span style="margin-left: 4px;">Kontakter</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Feedback</span></a></h3>
<h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span style="margin-left: 4px;">Vejledning</span></a></h3>
</div>
<div class="segment">
<h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><img src="{{asset("/images/icons/feedback.svg")}}" class="fa"><span style="margin-left: 4px;">Feedback</span></a></h3>
</div>
</div>
<div class="w-85" style="background-color: #cccccc;">
<div class="w-85" style="transition: width .5s; background-color: #cccccc;">
<div class="directorypath text-white">
<a href="{{ route('root.index') }}" class="text-white">Home</a> / @yield("path")
</div>
@@ -57,6 +63,49 @@
<script src="{{ mix("/js/app.js") }}"></script>
<script src="{{ asset("/js/jquery.are-you-sure.js") }}"></script>
<script type="text/javascript">
function openNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "block";
open.style.display = "none";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "85%"});
$(".segment > h3").css({"margin-left": "", "width": ""});
$(".segment > h3 > a").css({ "display": ""});
$(".segment > h3 > a > span").css({"display": ""});
$(".segment > div").css({"margin-left": "-1rem", "padding": "1rem 0rem 1rem 2rem", "width": "calc(100% - 3rem)"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});
}
function closeNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "none";
open.style.display = "block";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "64px";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "calc(100% - 64px)"});
$(".segment > h3").css({"margin-left": "0", "width": "100%"});
$(".segment > h3 > a").css({"display": "flex"});
$(".segment > h3 > a > span").css({"display": "none"});
$(".segment > div").css({"margin-left": "0", "padding": "1rem 0", "width": "100%"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});
}
</script>
@yield("scripts")
</body>
</html>