css/style-med.css

@@ -1,5 +1,4 @@
 #menu {
-  display: none;
   box-shadow: none;
 }
 #main,
@@ -18,6 +17,9 @@
   width: 60px;
   height: 60px;
 }
+.backdrop {
+  display: initial;
+}
 .row > .col {
   width: 100%;
   float: left;

css/style.css

@@ -110,6 +110,10 @@ p:first-child {
   box-shadow: -2px 0px 0px 0px #eeeeee inset;
   z-index: 400;
   overflow-x: hidden;
+  transition: all ease-in-out 0.4s;
+}
+#menu.ng-hide {
+  left: -280px;
 }
 #menu .header {
   z-index: 401;
@@ -196,6 +200,9 @@ p:first-child {
   margin-top: 40px;
   text-align: center;
 }
+.scrollLock {
+  overflow: hidden;
+}
 .header {
   height: 64px;
   background: #e53935;
@@ -251,6 +258,10 @@ p:first-child {
   left: 0;
   z-index: 100;
   display: none;
+  transition: all ease-in-out 0.5s;
+}
+.backdrop.ng-hide {
+  opacity: 0;
 }
 .errors {
   background: url(/images/error.svg) no-repeat scroll 10px 10px #424242;
@@ -310,6 +321,7 @@ div.percentageBar {
   width: 100%;
   height: 20px;
   background: #9ccc65;
+  overflow: hidden;
 }
 div.percentageBar > div {
   background: #ef5350;

less/style-med.less

@@ -1,5 +1,5 @@
 #menu{
-	display: none;
+	//display: none;
 	box-shadow: none;
 }
 
@@ -22,6 +22,10 @@
 	}
 }
 
+.backdrop{
+	display: initial;
+}
+
 .row{
 	
 	>.col {

less/style.less

@@ -122,14 +122,20 @@ p:first-child{
 }
 
 #menu{
+	@menuWidth:280px;
 	background:@background;
-	width:280px;
+	width:@menuWidth;
 	left:0;
 	position:fixed;
 	height:100%;
 	box-shadow: -2px 0px 0px 0px @control inset;
 	z-index: 400;
 	overflow-x: hidden;
+	transition:all ease-in-out 0.4s;
+
+	&.ng-hide{
+		left:-@menuWidth;
+	}
 
 	.header{
 		z-index: 401;
@@ -234,6 +240,10 @@ p:first-child{
 	}
 }
 
+.scrollLock{
+	overflow:hidden;
+}
+
 .header {
 	height:64px;
 	background:@primary;
@@ -297,6 +307,11 @@ p:first-child{
 	left:0;
 	z-index:100;
 	display:none;
+	transition:all ease-in-out 0.5s;
+
+	&.ng-hide{
+		opacity: 0;
+	}
 }
 
 .errors{
@@ -371,6 +386,7 @@ div.percentageBar{
 	width:100%;
 	height:20px;
 	background:@LightGreen-400;
+	overflow:hidden;
 
 	>div{
 		background:@Red-400;

scripts/controllers/main.js

@@ -1,4 +1,15 @@
 /* global app, angular */
 
-var app=angular.module("robware",[]);
+var app = angular.module("robware", ['ngAnimate']);
 
+app.controller("main", function($scope) {
+	var largeWindowBoundary = 1023;
+
+	$scope.menuVisible = window.innerWidth > largeWindowBoundary;
+
+	$(window).on("resize.doResize", function() {
+		$scope.$apply(function() {
+			$scope.menuVisible = window.innerWidth > largeWindowBoundary;
+		});
+	});
+});

scripts/javascript.js

@@ -51,16 +51,6 @@ $(function(){
 	});
 	
 	$("#content").css("margin-bottom",window.innerHeight-$("#buttons").offset().top);
-		
-	$("#menu-button").click(function(e){
-		$("#menu").show("slide", {direction: "left", easing:'easeOutCirc'});
-		$("body>.backdrop").fadeIn();
-	});
-	
-	$("body>.backdrop").click(function(e){
-		$("#menu").hide("slide", {direction: "left", easing:'easeInCirc'});
-		$("body>.backdrop").fadeOut();
-	});
 	
 	$("form[ajaxForm]").submit(function(e){
 		e.preventDefault();
@@ -93,16 +83,6 @@ $(function(){
 	});
 });
 
-
-$(window).resize(function(e){
-	if (window.innerWidth>1023){
-		$("#menu").attr("style","");
-		$("#menu-button").attr("style","");
-		$("body>.backdrop").hide();
-	}
-});
-
-
 $(document).delegate('.allowTabInput', 'keydown', function (e) {
 	var keyCode = e.keyCode || e.which;
 console.log(e);

template.php

@@ -1,4 +1,6 @@
 <?php
+$angularSource="ajax.googleapis.com/ajax/libs/angularjs";
+$angularVersion="1.5.0";
 $this->RegisterJSFile("javascript.js");
 $this->RegisterJSFile("controllers/main.js");
 $this->RegisterJSFile("directives/equalHeightWidth.js");
@@ -41,7 +43,8 @@ function FormatURI(URI $uri, $base=""){
 		<style media="(max-width:680px)">
 			{@CSSSmall}
 		</style>
-		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
+		<script src="//<?=$angularSource?>/<?=$angularVersion?>/angular.min.js"></script>
+		<script src="//<?=$angularSource?>/<?=$angularVersion?>/angular-animate.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 		<?php foreach ($this->GetJSFiles() as $js){
@@ -51,10 +54,10 @@ function FormatURI(URI $uri, $base=""){
 			{@JavaScript}
 		</script>
 	</head>
-	<body>
+	<body ng-controller="main" ng-class="{scrollLock: menuVisible}">
 		<div id="main-header">
 			<div class="header">
-				<img src="/images/menu.svg" id="menu-button" /><?php // using php tags to remove HTML space but to keep source tidy
+				<img src="/images/menu.svg" id="menu-button" ng-click="menuVisible=!menuVisible" /><?php // using php tags to remove HTML space but to keep source tidy
 				?><h2><?php // Shitty, I know, but eh...
 					?><span>{@Title}</span><?php
 					$__crumbs=Breadcrumbs::GetAll();
@@ -63,7 +66,7 @@ function FormatURI(URI $uri, $base=""){
 				?></h2>
 			</div>
 		</div>
-		<div id="menu">
+		<div id="menu" ng-show="menuVisible">
 			<div class="header">
 				<img src="/images/logo.png" /><h1>Robware</h1>
 			</div>
@@ -122,6 +125,6 @@ function FormatURI(URI $uri, $base=""){
 			</div>
 			<div id="footer">{@Footer}</div>
 		</div>
-		<div class="backdrop"></div>
+		<div class="backdrop" ng-show="menuVisible" ng-click="menuVisible=false"></div>
 	</body>
 </html>