Sections now highlight when active

2 files changed, 17 insertions, 9 deletions

diff --git a/pages/panel.html b/pages/panel.html
index 4e4ce52..68443a2 100644
--- a/pages/panel.html
+++ b/pages/panel.html
@@ -38,22 +38,22 @@
                 <hr>
                 <div class="columns">
                     <div class="column is-3">
-                        <aside class="menu">
+                        <aside class="menu" id="menu">
                             <p class="menu-label">General</p>
                             <ul class="menu-list">
                                 <li><a href="/">Frontpage</a></li>
-                                <li><a onclick="panel.getUploads()">Uploads</a></li>
+                                <li><a id="itemUploads" onclick="panel.getUploads()">Uploads</a></li>
                             </ul>
                             <p class="menu-label">Albums</p>
                             <ul class="menu-list">
-                                <li><a onclick="panel.getAlbums()">Manage your albums</a></li>
+                                <li><a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a></li>
                                 <li>
                                     <ul id='albumsContainer'></ul>
                                 </li>
                             </ul>
                             <p class="menu-label">Administration</p>
                             <ul class="menu-list">
-                                <li><a onclick="panel.changeTokens()">Change your tokens</a></li>
+                                <li><a id="itemTokens" onclick="panel.changeTokens()">Change your tokens</a></li>
                                 <li><a onclick="panel.logout()">Logout</a></li>
                             </ul>
                         </aside>
diff --git a/public/js/panel.js b/public/js/panel.js
index ae7529e..b52e796 100644
--- a/public/js/panel.js
+++ b/public/js/panel.js
@@ -54,19 +54,17 @@ panel.prepareDashboard = function(){
 	document.getElementById('auth').style.display = 'none';
 	document.getElementById('dashboard').style.display = 'block';
 
-	/*
 	document.getElementById('itemUploads').addEventListener('click', function(){
-		panel.getUploads();
+		panel.setActiveMenu(this);
 	});
 
 	document.getElementById('itemManageGallery').addEventListener('click', function(){
-		panel.getAlbums();
+		panel.setActiveMenu(this);
 	});
 
 	document.getElementById('itemTokens').addEventListener('click', function(){
-		panel.changeTokens();
+		panel.setActiveMenu(this);
 	});
-	*/
 
 	panel.getAlbumsSidebar();
 }
@@ -427,6 +425,7 @@ panel.getAlbumsSidebar = function(){
 }
 
 panel.getAlbum = function(item){
+	panel.setActiveMenu(item);
 	panel.getUploads(item.id);
 }
 
@@ -516,6 +515,15 @@ panel.submitToken = function(type, token){
 
 }
 
+panel.setActiveMenu = function(item){
+	var menu = document.getElementById('menu');
+	var items = menu.getElementsByTagName('a');
+	for(var i = 0; i < items.length; i++)
+		items[i].className = "";
+
+	item.className = 'is-active';
+}
+
 window.onload = function () {
 	panel.preparePage();
 }