Vyznaceni aktualniho stavu aplikace

src/app.js

@@ -95,6 +95,7 @@ function renderTemplate(req, res) {
 	var viewsRoot = app.get ('views');
 
 	templateData.queryString = req.query;
+	templateData.page = urlSegment;
 
 	if (fs.existsSync (viewsRoot + '/' + urlSegment + ".ejs")) {
 		res.render (urlSegment, templateData);

src/assets/scss/sidebar.scss

@@ -57,6 +57,7 @@ $sidebarDecorationOverflow: 13px;
     .nav-item:hover {
       @media only screen and (min-width: 500px) {
         margin-right: -$sidebarDecorationOverflow;
+        background: #e4e4e4;
       }
 
       &::after {

src/views/partials/sidebar.ejs

@@ -1,24 +1,24 @@
 <nav>
 
 	<ul class="sidebar-nav">
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'index' ? 'active' : ''%>">
 			<a class="nav-link" href="/">
 				<span class="fa nav-link__icon fa-home"></span>
 				<span>Nástěnka</span></a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'budget' ? 'active' : ''%>">
 			<a class="nav-link" href="/budget">
 				<span class="fa nav-link__icon fa-money"></span>
 				<span>Rozpočet</span>
 			</a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'guests' ? 'active' : ''%>">
 			<a class="nav-link" href="/guests">
 				<span class="fa nav-link__icon fa-group"></span>
 				<span>Hosté</span>
 			</a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'calendar' ? 'active' : ''%>">
 			<a class="nav-link" href="/calendar">
 				<span class="fa nav-link__icon fa-calendar"></span>
 				<span>Události</span></a>
@@ -31,17 +31,17 @@
 				<span class="fa nav-link__icon fa-heart-o"></span>
 				<span>Svatební web</span></a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item  <%= page == 'details' ? 'active' : ''%>">
 			<a class="nav-link" href="/details">
 				<span class="fa nav-link__icon fa-info"></span>
 				<span>Detaily svatby</span></a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'program' ? 'active' : ''%>">
 			<a class="nav-link" href="/program">
 				<span class="fa nav-link__icon fa-clock-o"></span>
 				<span>Program</span></a>
 		</li>
-		<li class="nav-item">
+		<li class="nav-item <%= page == 'websettings' ? 'active' : ''%>">
 			<a class="nav-link" href="/websettings">
 				<span class="fa nav-link__icon fa-gears"></span>
 				<span>Nastavení webu</span></a>