Improved sidenav script and renamed js

assets/css/sidenav.css

@@ -3,7 +3,7 @@
 .sidenav {
     height: 100%;
     width: 300px;
-    margin-left: -270px; /* change margin with JavaScript */
+    transform: translateX(-270px); /* change margin with JavaScript */
     position: fixed; /* Stay in place */
     z-index: 1000;
     top: 0;
@@ -13,6 +13,10 @@
     background: linear-gradient(to right, #1c1c1c, transparent 90%);
 }
 
+.sidenav.sidenav-open {
+    transform: translateX(0);
+}
+
 
 #sidenav-scroll {
     position: absolute;

assets/scripts/sidenav.js

@@ -1,7 +1,9 @@
-var menuOpen = false;
+let sidenav = $("#menuSidenav");
-var sidenav = $("#menuSidenav");
+let hamburger = $("#hamburger");
-var hamburger = $("#hamburger");
+let backButton = $("#back-button");
-var backButton = $("#back-button");
+
+let openedSidenavClass = 'sidenav-open';
+let activeBackgroundClass = 'active-background';
 
 /*
  * Open navigation menu, change Hamburger icon to selected state
@@ -9,11 +11,9 @@ var backButton = $("#back-button");
  */
 
 function openNav() {
-    sidenav.css("margin-left", "0");
+    sidenav.addClass(openedSidenavClass);
-    sidenav.css("overflow", "auto");
+    backButton.addClass(activeBackgroundClass);
-    backButton.addClass("active-background");
     enableHamburger();
-    menuOpen = true;
 }
 
 
@@ -22,11 +22,9 @@ function openNav() {
  * and hide the back button overlay
  */
 function closeNav() {
-    sidenav.css("margin-left", "-270px");
+    sidenav.removeClass(openedSidenavClass);
-    sidenav.css("overflow", "hidden");
+    backButton.removeClass(activeBackgroundClass);
-    backButton.removeClass("active-background");
     disableHamburger();
-    menuOpen = false;
 }
 
 
@@ -34,7 +32,7 @@ function closeNav() {
  * Toggle the navigation bar
  */
 function toggleNav() {
-    if (menuOpen) {
+    if (sidenav.hasClass(openedSidenavClass)) {
         closeNav();
     } else {
         openNav();

photos.php

@@ -278,7 +278,7 @@ function generatePath($path)
         ?>
     </div>
 <?php endif; ?>
-<script src="assets/scripts/photosScript.js"></script>
+<script src="assets/scripts/photos.js"></script>
 <link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css">
 <script type="text/javascript" src="assets/scripts/jquery.mousewheel.min.js"></script>
 

planning.php

@@ -98,8 +98,8 @@ ob_start(); // Start reading html
 <div id="infoBox">
     <p>Clique sur un évenement pour afficher ses informations</p>
 </div>
-<script src="assets/scripts/planningScript.js"></script>
+<script src="assets/scripts/planning.js"></script>
-<link rel="stylesheet" type="text/css" media="screen" href="assets/css/planning_events.css">
+<link rel="stylesheet" type="text/css" media="screen" href="assets/css/planningEvents.css">
 
 <?php
 $pageContent = ob_get_clean(); // Store html content in variable

template.php

@@ -84,6 +84,6 @@ include("includes/score_counter.php");
     </footer>
 </div>
 </body>
-<script src="assets/scripts/TimerScript.js"></script>
+<script src="assets/scripts/timer.js"></script>
-<script src="assets/scripts/sidenavScript.js"></script>
+<script src="assets/scripts/sidenav.js"></script>
 </html>