aside responsive fixes

src/_layouts/default.html

@@ -6,18 +6,17 @@ layout: base
 {% include aside.html %}
 {% endcomment %}
 
-<div class="flex-fill d-flex">
-
-	<div class="aside">
+<div class="aside">
 	<div class="aside-body">
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda blanditiis consectetur culpa, cumque expedita illo in pariatur quibusdam voluptates? Eligendi est ex vero voluptate! In maxime optio perspiciatis repellat!
 	</div>
 	<div class="aside-footer">
 		Aside footer
 	</div>
-	</div>
+</div>
+
+<div class="page-main">
 
-	<div class="flex-fill d-flex flex-column">
 	{% include header.html %}
 
 	<div class="my-3 my-md-5 flex-fill">
@@ -34,5 +33,4 @@ layout: base
 
 	{% include footer-sub.html %}
 	{% include footer.html %}
-	</div>
 </div>

src/assets/scss/dashboard/_aside.scss

@@ -1,9 +1,18 @@
 .aside {
 	background: #fff;
-	display: flex;
+	display: none;
 	flex-direction: column;
 	width: 16rem;
 	border-right: 1px solid $border-color;
+
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	top: 0;
+
+	@include media-breakpoint-up(xl) {
+		display: flex;
+	}
 }
 
 .aside-body {

src/assets/scss/dashboard/_layout.scss

@@ -1,3 +1,10 @@
+.container {
+	@include media-breakpoint-up(md) {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+}
+
 .page {
 	display: flex;
 	flex-direction: column;
@@ -15,6 +22,15 @@
 	}
 }
 
+.page-main {
+	flex: 1 1 auto;
+
+	//body.show-aside & {
+		@include media-breakpoint-up(xl) {
+			margin-left: 16rem;
+		}
+	//}
+}
 
 .page-content {
 	margin: .75rem 0;