Update

app/static/css/nopaque.css

@@ -14,30 +14,6 @@ main {
 }
 /* ### End sticky footer ### */
 
-
-/*
- * ### Start sidenav-fixed offset ###
- * The sidenav-fixed class is used which causes the sidenav to be fixed and open
- * on large screens and hides to the regular functionality on smaller screens.
- * In order to prevent the sidenav to overlap the content, the content (in our
- * case header, main and footer) gets an offset equal to the width of the
- * sidenav.
-*/
-@media only screen and (min-width : 993px) {
-  header, main, footer {
-    padding-left: 300px;
-  }
-
-  .modal:not(.bottom-sheet) {
-    left: 300px;
-  }
-
-  .navbar-fixed > nav {
-    width: calc(100% - 300px)
-  }
-}
-/* ### End sidenav-fixed offset ### */
-
 /* add custom bold class */
 .bold {
   font-weight: bold;

app/templates/auth/login.html.j2

 {% extends "nopaque.html.j2" %}
 
 {% block page_content %}
-{% if current_user.is_anonymous %}
-<script>
-  document.getElementById("sidenav-main").classList.add("hide");
-</script>
-<style>
-  header, main, footer {
-    padding-left: 0;
-  }
-
-  .modal:not(.bottom-sheet) {
-    left: 0;
-  }
-
-  .navbar-fixed > nav {
-    width: 100%;
-  }
-</style>
-{% endif %}
-
 <div class="col s12 m4">
   <h3>Cyber cyber</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

app/templates/main/index.html.j2

@@ -58,23 +58,6 @@
 </div>
 
 {% if current_user.is_anonymous %}
-<script>
-  document.getElementById("sidenav-main").classList.add("hide");
-</script>
-<style>
-  header, main, footer {
-    padding-left: 0;
-  }
-
-  .modal:not(.bottom-sheet) {
-    left: 0;
-  }
-
-  .navbar-fixed > nav {
-    width: 100%;
-  }
-</style>
-
 <div class="parallax-container">
   <div class="parallax">
     <img src="{{ url_for('static', filename='images/german_text_book_paper.jpg') }}" alt="">

app/templates/nopaque.html.j2

@@ -56,7 +56,7 @@
         {% endif %}
       </ul>
 
-      <ul id="sidenav-main" class="sidenav sidenav-fixed">
+      <ul id="sidenav-main" class="sidenav sidenav-fixed hide">
         <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
         <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
         <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
@@ -154,5 +154,34 @@
         {% endfor %}
       });
     </script>
+    {% if current_user.is_authenticated %}
+    <script>
+      document.getElementById("sidenav-main").classList.remove("hide");
+    </script>
+    <style>
+      /*
+       * ### Start sidenav-fixed offset ###
+       * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+       * on large screens and hides to the regular functionality on smaller screens.
+       * In order to prevent the sidenav to overlap the content, the content (in our
+       * case header, main and footer) gets an offset equal to the width of the
+       * sidenav.
+      */
+      @media only screen and (min-width : 993px) {
+        header, main, footer {
+          padding-left: 300px;
+        }
+
+        .modal:not(.bottom-sheet) {
+          left: 300px;
+        }
+
+        .navbar-fixed > nav {
+          width: calc(100% - 300px)
+        }
+      }
+      /* ### End sidenav-fixed offset ### */
+    </style>
+    {% endif %}
   </body>
 </html>