Fix sidebar transition and styling

members/static/css/members.css

@@ -13,6 +13,10 @@ input {
     margin-bottom: 0.5rem;
 }
 
+#header {
+    display: block;
+}
+
 #wrapper {
     padding-right: 0;
     padding-top: 0;
@@ -24,6 +28,10 @@ input {
     background: #202020;
     top: 0;
     padding: 0;
+    -webkit-transition: width 0.01s height 0.01s linear;
+    -moz-transition: width 0.01s height 0.01s linear;
+    -o-transition: width 0.01s height 0.01s linear;
+    transition: width 0.01s, height 0.01s, transform 0.01s;
 
 }
 
@@ -45,6 +53,10 @@ input {
     cursor: default;
 }
 
+#sidebar-collapse {
+    display: none;
+}
+
 @media (max-width: 767px) {
 
     table {
@@ -62,6 +74,18 @@ input {
         text-align: center;
     }
 
+    #header {
+        display: none;
+    }
+
+    .sidebar-nav {
+        display: none;
+    }
+
+    #sidebar-collapse {
+        display: block;
+    }
+
     .logout-container {
         position: initial;
         margin-bottom: 1rem;
@@ -212,4 +236,4 @@ input {
     width: 100%;
     max-width: 100%;
     height: 10rem !important;
-}
+}

members/templates/members_base.html

@@ -37,6 +37,16 @@
 
             <!-- Sidebar -->
             <div id="sidebar-wrapper">
+                <nav class="navbar navbar-inverse" id="sidebar-collapse">
+                    <div class="navbar-header">
+                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-nav">
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        <span class="navbar-brand hidden-lg hidden-md">{% trans "Member register of SIK ry" %}</span>
+                    </div>
+                </nav>
                 <ul class="sidebar-nav">
                     <li>
                         <span class="text-primary">{% trans "Members" %}</span>