From 005045e09b7ef4fda4ad4b69e2afb6ba98b9818b Mon Sep 17 00:00:00 2001
From: Andreas Dangel <andreas.dangel@pmd-code.org>
Date: Fri, 18 Sep 2020 15:42:16 +0200
Subject: [PATCH] [doc] Fix navbar at top

---
 docs/_includes/feedback.html |  13 ----
 docs/_includes/topnav.html   | 117 ++++++++++++++++-------------------
 docs/_layouts/default.html   |   3 +-
 docs/css/customstyles.css    |  15 +----
 4 files changed, 57 insertions(+), 91 deletions(-)
 delete mode 100644 docs/_includes/feedback.html

diff --git a/docs/_includes/feedback.html b/docs/_includes/feedback.html
deleted file mode 100644
index c6d0fe28c6..0000000000
--- a/docs/_includes/feedback.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<li>
-{% if site.feedback_text %}
-  {% assign feedback_text = site.feedback_text %}
-{% else %}
-  {% assign feedback_text = "Feedback" %}
-{% endif %}
-
-{% if site.feedback_link %}
-  <a class="email" title="Submit feedback" href="{{site.feedback_link}}">{{feedback_text}}</a>
-{% else %}
-  <a class="email" title="Submit feedback" href="#" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} feedback&body=I have some feedback about the {{page.title}} page: ' + window.location.href;"><i class="fas fa-envelope-o"></i> {{feedback_text}}</a>
-{% endif %}
-</li>
diff --git a/docs/_includes/topnav.html b/docs/_includes/topnav.html
index 7e4e9b846a..d931e1c279 100644
--- a/docs/_includes/topnav.html
+++ b/docs/_includes/topnav.html
@@ -1,77 +1,66 @@
 <!-- Navigation -->
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
     <div class="container topnavlinks">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="fas fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> {{site.topnav_title}}</span></a>
-        </div>
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-            <ul class="nav navbar-nav navbar-right">
+        <a class="navbar-brand fas fa-home fa-lg" href="index.html">&nbsp;<span class="projectTitle"> {{site.topnav_title}}</span></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto mt-2 mt-lg-0"></ul>
+            <ul class="navbar-nav">
                 <!-- toggle sidebar button -->
-                <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fas fa-toggle-on"></i> Nav</a></li>
+                <li class="nav-item"><a id="tg-sb-link" class="nav-link" href="#"><i id="tg-sb-icon" class="fas fa-toggle-on"></i> Nav</a></li>
                 <!-- entries without drop-downs appear here -->
                 {% for entry in site.data.topnav.topnav %}
-                {% for item in entry.items %}
-                {% if item.external_url %}
-                <li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
-                {% elsif page.url contains item.url %}
-                <li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
-                {% else %}
-                <li><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
-                {% endif %}
-                {% endfor %}
+                    {% for item in entry.items %}
+                        {% if item.external_url %}
+                            <li class="nav-item"><a class="nav-link" href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
+                        {% elsif page.url contains item.url %}
+                            <li class="nav-item active"><a class="nav-link" href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
+                        {% else %}
+                            <li class="nav-item"><a class="nav-link" href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
+                        {% endif %}
+                    {% endfor %}
                 {% endfor %}
                 <!-- entries with drop-downs appear here -->
                 <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                 {% for entry in site.data.topnav.topnav_dropdowns %}
-                {% for folder in entry.folders %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        {% for folderitem in folder.folderitems %}
-                        {% if folderitem.external_url %}
-                        <li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
-                        {% elsif page.url contains folderitem.url %}
-                        <li class="dropdownActive"><a href="{{folderitem.url |  remove: "/"}}">{{folderitem.title}}</a></li>
-                        {% else %}
-                        <li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
-                        {% endif %}
-                        {% endfor %}
-                    </ul>
-                </li>
+                    {% for folder in entry.folders %}
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ folder.title }}<b class="caret"></b></a>
+                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                                {% for folderitem in folder.folderitems %}
+                                    {% if folderitem.external_url %}
+                                        <a class="dropdown-item" href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a>
+                                    {% elsif page.url contains folderitem.url %}
+                                        <a class="dropdown-item dropdownActive" href="{{folderitem.url |  remove: "/"}}">{{folderitem.title}}</a>
+                                    {% else %}
+                                        <a class="dropdown-item" href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                        </li>
+                    {% endfor %}
                 {% endfor %}
-                {% endfor %}
-                {% if site.feedback_disable == null or site.feedback_disable == false %}
-			{% include feedback.html %}
-		{% endif %}
-                <!--comment out this block if you want to hide search-->
-                <li>
-                    <!--start search-->
-                    <div id="search-demo-container">
-                        <input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
-                        <ul id="results-container"></ul>
-                    </div>
-                    <script src="{{ "js/jekyll-search.js"}}" type="text/javascript"></script>
-                    <script type="text/javascript">
-                            SimpleJekyllSearch.init({
-                                searchInput: document.getElementById('search-input'),
-                                resultsContainer: document.getElementById('results-container'),
-                                dataSource: '{{ "search.json" }}',
-                                searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
-                    noResultsText: '{{site.data.strings.search_no_results_text}}',
-                            limit: 10,
-                            fuzzy: true,
-                    })
-                    </script>
-                    <!--end search-->
-                </li>
             </ul>
+            <form class="form-inline my-2 my-lg-0" id="search-demo-container">
+                <input class="form-control mr-sm-2" type="search" placeholder="{{site.data.strings.search_placeholder_text}}" id="search-input">
+                <ul id="results-container"></ul>
+                <script src="{{ "js/jekyll-search.js"}}" type="text/javascript"></script>
+                <script type="text/javascript">
+                        SimpleJekyllSearch.init({
+                            searchInput: document.getElementById('search-input'),
+                            resultsContainer: document.getElementById('results-container'),
+                            dataSource: '{{ "search.json" }}',
+                            searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
+                noResultsText: '{{site.data.strings.search_no_results_text}}',
+                        limit: 10,
+                        fuzzy: true,
+                        });
+                        $('#results-container').css('left', $('#search-input').position().left);
+                </script>
+            </form>
         </div>
-        </div>
-        <!-- /.container -->
+    </div>
 </nav>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index e09420dbb1..539e2867d3 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -41,12 +41,13 @@
     </script>
     <script>
         $(document).ready(function() {
-            $("#tg-sb-link").click(function() {
+            $("#tg-sb-link").click(function(event) {
                 $("#tg-sb-sidebar").toggle();
                 $("#tg-sb-content").toggleClass('col-md-9');
                 $("#tg-sb-content").toggleClass('col-md-12');
                 $("#tg-sb-icon").toggleClass('fa-toggle-on');
                 $("#tg-sb-icon").toggleClass('fa-toggle-off');
+                event.preventDefault();
             });
         });
     </script>
diff --git a/docs/css/customstyles.css b/docs/css/customstyles.css
index bb3fa52890..a57b0c0b75 100644
--- a/docs/css/customstyles.css
+++ b/docs/css/customstyles.css
@@ -213,7 +213,7 @@ p.post-meta {font-size: 80%; color: #777;}
     font-size: 12px;
     background-color: white;
     position: absolute;
-    top: 40px; /* if you change anything about the nav, you'll prob. need to reset the top and left values here.*/
+    top: 50px; /* if you change anything about the nav, you'll prob. need to reset the top and left values here.*/
     left: 20px;
     z-index: -1;
     width:223px;
@@ -230,21 +230,9 @@ ul#results-container a:hover {
     color: black;
 }
 
-
 #search-demo-container a:hover {
     color: black;
 }
-#search-input {
-    padding: .5em;
-    margin-left:20px;
-    width:20em;
-    font-size: 0.8em;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    float: right;
-    margin-top:10px;
-}
 /* end search */
 
 .filter-options {
@@ -394,6 +382,7 @@ background-color: #347DBE;
 }
 
 ul#mysidebar {
+    display: block;
     border-radius:0px;
 }