From 67acebb93b3eb17d16e5cf94abb0d7d37916d13a Mon Sep 17 00:00:00 2001
From: marjohn56 <martin@queens-park.com>
Date: Sun, 8 Jul 2018 16:55:46 +0100
Subject: [PATCH] Sidebar Menus

---
 .../mvc/app/views/layouts/default.volt        | 63 ++++++++++++++++++-
 src/www/fbegin.inc                            | 62 ++++++++++++++++++
 2 files changed, 124 insertions(+), 1 deletion(-)

diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt
index 1a10e7a40..6dbb91d3d 100644
--- a/src/opnsense/mvc/app/views/layouts/default.volt
+++ b/src/opnsense/mvc/app/views/layouts/default.volt
@@ -219,6 +219,7 @@
             <span class="icon-bar"></span>
           </button>
         </div>
+		<button class="toggle-sidebar glyphicon glyphicon-chevron-left"></button>
         <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav navbar-right">
             <li id="menu_messages"><a href="#">{{session_username}}@{{system_hostname}}.{{system_domain}}</a></li>
@@ -290,6 +291,66 @@
     <script src="/ui/js/bootstrap-select.min.js"></script>
     <!-- bootstrap dialog -->
     <script src="/ui/js/bootstrap-dialog.min.js"></script>
-
+	<!-- navigation toggle -->
+	<script>
+		$(document).ready(function () {
+			$(".toggle-sidebar").click(function () {
+				$("#navigation").toggleClass("col-sidebar-left");
+				$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+				$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					if ($("#navigation").hasClass("col-sidebar-left")) {
+						$(".brand-logo").css("display", "none");
+						$(".brand-icon").css("display", "inline-block");}
+					else												{
+						$(".brand-icon").css("display", "none");
+						$(".brand-logo").css("display", "inline-block");
+						$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", "");
+																		}
+													});
+										});
+	</script>
+	<!-- sidebar mouseevents -->
+	<script>
+		$(document).ready(function () {
+			$("#navigation").hover(function () {
+				if ($("#navigation").hasClass("col-sidebar-left")) {
+					$("#navigation > div > nav > #mainmenu > div > div").on({
+						mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); },
+						mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); }});
+					$("#navigation > div > nav > #mainmenu > div > a").on({
+						mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); },
+						mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); }});
+																	}
+												});
+									});
+	</script>
+	<!-- on resize - toggle sidebar / main navigation -->
+	<script>
+		$(window).on('resize', function(){
+			var win = $(this);
+			if (((win.height() <= 669) && $("#navigation").hasClass("col-sidebar-left"))) {
+					$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+					$("#navigation").toggleClass("col-sidebar-left");
+					$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					$(".brand-icon").css("display", "none");
+					$(".brand-logo").css("display", "inline-block");
+					$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); }
+			else if ((win.width() <= 768) && $("#navigation").hasClass("col-sidebar-left")){
+					$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+					$("#navigation").toggleClass("col-sidebar-left");
+					$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					$(".brand-logo").css("display", "none");
+					$(".brand-icon").css("display", "inline-block");
+					$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); }
+			else if (((win.width() <= 768) && $("#navigation").not("col-sidebar-left")) || ((win.width() >= 768) && $("#navigation").hasClass("col-sidebar-left"))) {
+					$(".brand-logo").css("display", "none");
+					$(".brand-icon").css("display", "inline-block"); }
+			else if ((win.width() >= 768) && $("#navigation").not("col-sidebar-left")){
+					$("#navigation").addClass("in");
+					$(".brand-icon").css("display", "none");
+					$(".brand-logo").css("display", "inline-block"); }
+		});
+	</script>
+	<!-- navigation toggle-->
   </body>
 </html>
diff --git a/src/www/fbegin.inc b/src/www/fbegin.inc
index 71fd1dd5f..533699fc3 100644
--- a/src/www/fbegin.inc
+++ b/src/www/fbegin.inc
@@ -62,6 +62,7 @@ if($need_alert_display == true) {
           <span class="icon-bar"></span>
         </button>
       </div>
+	  <button class="toggle-sidebar glyphicon glyphicon-chevron-left"></button>
       <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav navbar-right">
           <li id="menu_messages"><?= get_menu_messages() ?></li>
@@ -199,4 +200,65 @@ if($need_alert_display == true) {
           </li>
         </ul>
       </div>
+	<!-- navigation toggle -->
+	<script>
+		$(document).ready(function () {
+			$(".toggle-sidebar").click(function () {
+				$("#navigation").toggleClass("col-sidebar-left");
+				$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+				$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					if ($("#navigation").hasClass("col-sidebar-left")) {
+						$(".brand-logo").css("display", "none");
+						$(".brand-icon").css("display", "inline-block");}
+					else												{
+						$(".brand-icon").css("display", "none");
+						$(".brand-logo").css("display", "inline-block");
+						$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", "");
+																		}
+													});
+										});
+	</script>
+	<!-- sidebar mouseevents -->
+	<script>
+		$(document).ready(function () {
+			$("#navigation").hover(function () {
+				if ($("#navigation").hasClass("col-sidebar-left")) {
+					$("#navigation > div > nav > #mainmenu > div > div").on({
+						mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); },
+						mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); }});
+					$("#navigation > div > nav > #mainmenu > div > a").on({
+						mouseout: function() {$("#navigation.col-sidebar-left").css("width", "70px"); },
+						mouseover: function() {$("#navigation.col-sidebar-left").css("width", "380px"); }});
+																	}
+												});
+									});
+	</script>
+	<!-- on resize - toggle sidebar / main navigation -->
+	<script>
+		$(window).on('resize', function(){
+			var win = $(this);
+			if (((win.height() <= 669) && $("#navigation").hasClass("col-sidebar-left"))) {
+					$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+					$("#navigation").toggleClass("col-sidebar-left");
+					$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					$(".brand-icon").css("display", "none");
+					$(".brand-logo").css("display", "inline-block");
+					$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); }
+			else if ((win.width() <= 768) && $("#navigation").hasClass("col-sidebar-left")){
+					$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
+					$("#navigation").toggleClass("col-sidebar-left");
+					$(".toggle-sidebar").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
+					$(".brand-logo").css("display", "none");
+					$(".brand-icon").css("display", "inline-block");
+					$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", ""); }
+			else if (((win.width() <= 768) && $("#navigation").not("col-sidebar-left")) || ((win.width() >= 768) && $("#navigation").hasClass("col-sidebar-left"))) {
+					$(".brand-logo").css("display", "none");
+					$(".brand-icon").css("display", "inline-block"); }
+			else if ((win.width() >= 768) && $("#navigation").not("col-sidebar-left")){
+					$("#navigation").addClass("in");
+					$(".brand-icon").css("display", "none");
+					$(".brand-logo").css("display", "inline-block"); }
+		});
+	</script>
+	<!-- navigation toggle-->
     </header>