make navigation noscript friendly

resources/assets/js/app.js

@@ -7,9 +7,6 @@ require('./modules/form-autoalias')
 require('./vue-init')
 
 $(function () {
-  // Remove all noscript from forms etc
-  $('noscript').remove();
-
   // Bootstrap tooltips
   $('[data-toggle="tooltip"]').tooltip({
     container: 'body'

resources/assets/sass/_helpers.scss

@@ -29,3 +29,7 @@
 .pointer {
 	cursor: pointer;
 }
+
+.noscript-hide {
+	display: none;
+}

resources/assets/sass/bootstrap-customizations/_responsive.scss

@@ -1,5 +1,5 @@
 @media (max-width:767px) {
-	.mobile-only {
+	.no-mobile {
 		display: none;
 	}
 

resources/views/layouts/app.blade.php

@@ -16,6 +16,10 @@
     function ready(fn) {
       document.addEventListener('DOMContentLoaded', fn);
     }
+    ready(function() {
+      $('noscript').remove();
+      $('.noscript-hide').removeClass('noscript-hide');
+    });
   </script>
   @stack('scripts')
 

resources/views/layouts/guest-buttons.blade.php

@@ -0,0 +1,13 @@
+<li class="nav-item">
+  <a class="nav-link" href="{{ route('login') }}">
+    @icon(fa-sign-in pr-1)
+    {{ __('Login') }}
+  </a>
+
+@if(config('app.allow_regs'))
+  <li class="nav-item">
+    <a class="nav-link" href="{{ route('register') }}">
+      @icon(fa-user-plus pr-1)
+      {{ __('Register') }}
+    </a>
+@endif

resources/views/layouts/main-nav.blade.php

@@ -7,36 +7,23 @@
       --}}datatable.directory
     </a>
 
-    <button class="navbar-toggler" type="button" data-toggle="collapse"
+    <button class="navbar-toggler noscript-hide" type="button" data-toggle="collapse"
             data-target="#mainNavContent" aria-controls="mainNavContent"
             aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
       <span class="sr-only">Toggle navigation</span>
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="mainNavContent">
+    <div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
       <ul class="navbar-nav ml-auto">
         <!-- Authentication Links -->
         @guest()
-          <li class="nav-item">
+          @include('layouts.guest-buttons')
-            <a class="nav-link" href="{{ route('login') }}">
-              @icon(fa-sign-in pr-1)
-              {{ __('Login') }}
-            </a>
-
-          @if(config('app.allow_regs'))
-          <li class="nav-item">
-            <a class="nav-link" href="{{ route('register') }}">
-              @icon(fa-user-plus pr-1)
-              {{ __('Register') }}
-            </a>
-          @endif
-
         @else
           {{-- Logged in --}}
           @include('layouts.nav-buttons', ['dropdown' => false])
 
-          <li class="nav-item dropdown mobile-only">
+          <li class="nav-item dropdown no-mobile">
             <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false" v-pre>
               @icon(fa-user-circle-o fa-pr){{--
@@ -54,5 +41,15 @@
         @endif
       </ul>
     </div>
+
+    <noscript>
+      <ul class="navbar-nav ml-auto">
+        @guest
+          @include('layouts.guest-buttons')
+        @else
+          @include('layouts.nav-buttons', ['dropdown' => false, 'noscript' => true])
+        @endif
+      </ul>
+    </noscript>
   </div>
 </nav>

resources/views/layouts/nav-buttons.blade.php

@@ -1,6 +1,7 @@
 @php
 
-$li = $dropdown ? '' : '<li class="nav-item ml-1 d-md-none">';
+$dmdhide = isset($noscript)?'':'d-md-none';
+$li = $dropdown ? '' : "<li class=\"nav-item ml-1 $dmdhide\">";
 $aclass = $dropdown ? 'dropdown-item' : 'nav-link';
 
 @endphp