diff --git a/dev/demo/all.html b/dev/demo/all.html
index 0478638..f878e36 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -65,7 +65,7 @@
       </form>
     </header>
 
-    <aside tabindex="0" class="active">
+    <aside tabindex="0">
       <div>
 	<fieldset>
 	  <form>
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 294a3c9..6b4ad67 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -141,6 +141,11 @@
       });
     };
 
+    document.getElementsByTagName('aside')[0].addEventListener('focus', function() {
+      this.classList.add('active')
+    });
+
+      
     // Replace QL select menus with KorAP menus
     var qlField = document.getElementById('ql-field');
     if (qlField !== null) {
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 665f222..4584437 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -65,85 +65,84 @@
     li {
       padding: 0;
       > a {
-	padding: $item-padding;
-	&:visited {
-	  @include choose-item;
-	}
-
+        padding: $item-padding;
+        &:visited {
+          @include choose-item;
+        }
       }
 
       li.folded {
-	&.active ul {
-	  display: block;
-	}
-	ul {
-	  display: none;
-	}
+        &.active ul {
+          display: block;
+        }
+        ul {
+          display: none;
+        }
       }
 
       &.active > a:link {
-	@include choose-active;
+        @include choose-active;
       }
 
       > a:link {
-	@include choose-item;
-	border-right: {
-	  width: $border-size;
-	  style: solid;
-	}
+        @include choose-item;
+        border-right: {
+          width: $border-size;
+          style: solid;
+        }
 
-	display: block;
-	&:hover {
-	  // color: inherit;
-	  transition: none;
-	  @include choose-hover;
-	}
+        display: block;
+        &:hover {
+          // color: inherit;
+          transition: none;
+          @include choose-hover;
+        }
       }
       h3 {
         font: {
-	  weight: bold;
-	  size: 100%;
-	}	  
-	padding: 0;
-	margin: 0;
+        weight: bold;
+        size: 100%;
+      }    
+        padding: 0;
+        margin: 0;
       }
 /*
       &.active {
-	text-shadow: none;
-	h3 {
-	  margin-bottom: 2pt;
-	  padding-bottom: 2pt;
-	  border-bottom: 1px solid black;
-	}
+  text-shadow: none;
+  h3 {
+    margin-bottom: 2pt;
+    padding-bottom: 2pt;
+    border-bottom: 1px solid black;
+  }
       }
 */
       > a {
-	padding-left: 6pt;
+        padding-left: 6pt;
       }
       li > a {
-	padding-left: 18pt;
+        padding-left: 18pt;
       }
       li li > a {
-	padding-left: 36pt;
+        padding-left: 36pt;
       }
     }
   }
   nav > ul > li > a {
     font-weight: bold;
   }
-
+  
   fieldset {
     position: relative;
     border-width: 0;
     legend {
       display: none;
     }
-
+    
     input[type=text], input[type=password] {
       @include input-field;
       width: 100%;
     }
-
+    
     > form > div {
       position: relative;
       width: 100%;
@@ -156,10 +155,10 @@
       font-size: 80%;
       text-align: right;
       > li {
-	display: inline;
-	&:first-child::after {
-	  content: ' | ';
-	}
+  display: inline;
+  &:first-child::after {
+    content: ' | ';
+  }
       }
       padding: 0;
       margin-top: 0;
@@ -171,7 +170,7 @@
       top: 0;
       right: 0;
       &::after {
-	content: $fa-login;
+        content: $fa-login;
       }
     }
   }
@@ -186,6 +185,7 @@
   &::after {
     opacity: 1;
   }
+ 
   > * {
     opacity: 0;
     transition: {