From 78a586328bc9038086d57eb3d1bc77996aec52e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Mon, 6 Aug 2018 22:33:07 +0200
Subject: [PATCH] make navigation noscript friendly

---
 resources/assets/js/app.js                    |  3 --
 resources/assets/sass/_helpers.scss           |  4 +++
 .../bootstrap-customizations/_responsive.scss |  2 +-
 resources/views/layouts/app.blade.php         |  4 +++
 .../views/layouts/guest-buttons.blade.php     | 13 ++++++++
 resources/views/layouts/main-nav.blade.php    | 31 +++++++++----------
 resources/views/layouts/nav-buttons.blade.php |  3 +-
 7 files changed, 38 insertions(+), 22 deletions(-)
 create mode 100644 resources/views/layouts/guest-buttons.blade.php

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 628b4a9..ebc08c1 100644
--- a/resources/assets/js/app.js
+++ b/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'
diff --git a/resources/assets/sass/_helpers.scss b/resources/assets/sass/_helpers.scss
index c9acd97..520a710 100644
--- a/resources/assets/sass/_helpers.scss
+++ b/resources/assets/sass/_helpers.scss
@@ -29,3 +29,7 @@
 .pointer {
 	cursor: pointer;
 }
+
+.noscript-hide {
+	display: none;
+}
diff --git a/resources/assets/sass/bootstrap-customizations/_responsive.scss b/resources/assets/sass/bootstrap-customizations/_responsive.scss
index 7f74e12..584f7f4 100644
--- a/resources/assets/sass/bootstrap-customizations/_responsive.scss
+++ b/resources/assets/sass/bootstrap-customizations/_responsive.scss
@@ -1,5 +1,5 @@
 @media (max-width:767px) {
-	.mobile-only {
+	.no-mobile {
 		display: none;
 	}
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index bbecb81..0ac2123 100644
--- a/resources/views/layouts/app.blade.php
+++ b/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')
 
diff --git a/resources/views/layouts/guest-buttons.blade.php b/resources/views/layouts/guest-buttons.blade.php
new file mode 100644
index 0000000..6d5f921
--- /dev/null
+++ b/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
diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php
index 49de2af..46ead51 100644
--- a/resources/views/layouts/main-nav.blade.php
+++ b/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">
-            <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
-
+          @include('layouts.guest-buttons')
         @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>
diff --git a/resources/views/layouts/nav-buttons.blade.php b/resources/views/layouts/nav-buttons.blade.php
index 3c4b3c0..82d2e51 100644
--- a/resources/views/layouts/nav-buttons.blade.php
+++ b/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