fix(templates): restored topnav UI while keeping responsiveness and the log in modal

discuss_data/templates/nav-top.html

 {% load static i18n compress%}
-<nav class="navbar fixed-top navbar-expand-sm navbar-light">
-    <a class="navbar-brand" href="#"><img src="{% static 'images/logo-primary.svg' %}" height="40" /></a>
+
+{% comment %}
+    <!-- navbar top -->
+    <nav class="navbar fixed-top flex-md-nowrap p-0 border-bottom" id="navbar-top">
+      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#"><img src="./static/assets/logos/discussdata-logo.svg" height="40" /></a>
+      <input class="w-25 form-control" type="text" placeholder="Search" aria-label="Search">
+      <ul class="navbar-nav px-3">
+        <li class="nav-item text-nowrap">
+          <a class="nav-link" href="https://getbootstrap.com/docs/4.1/examples/dashboard/#">Sign out</a>
+        </li>
+      </ul>
+    </nav>
+{% endcomment %}
+
+<nav class="navbar navbar-light fixed-top flex-md-nowrap p-0 border-bottom navbar-expand-sm" id="navbar-top">
+    <a class="navbar-brand px-3" href="#"><img src="{% static 'images/logo-primary.svg' %}" height="40" /></a>
+
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon" />
-    </button>
-
+    </button>    
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-        <a class="nav-link" href="#">{% trans "Home" %}</a>
-        </li>
-        <li class="nav-item">
-        <a class="nav-link" href="#">{% trans "About" %}</a>
-        </li>
-        <li class="nav-item">
-        <form class="form-inline">
-            <input id="navsearch"  type="search" placeholder="{% trans "Search" %}" aria-label="Search">
-        </form>
-        </li>
-        {% if request.user.is_authenticated %}
-        <li class="nav-item">
-            <a class="nav-link" href="{% url 'ddusers:edit' %}">{% trans "My Profile" %}</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">{% trans "Sign Out" %}</a>
-        </li>
-        {% else %}
-        <li class="nav-item">
-            <a id="sign-up-link" class="nav-link" href="#">{% trans "Sign Up" %}</a>
-        </li>
-        <li class="nav-item" data-toggle="modal" data-target="#signIn">
-            <a id="log-in-link" class="nav-link" href="#">{% trans "Sign In" %}</a>
-        </li>
-        {% endif %}
-    </ul>
+        <input class="w-25 form-control mx-auto" type="text" placeholder="Search" aria-label="Search">
+        <ul class="navbar-nav ml-auto">        
+            {% if request.user.is_authenticated %}            
+            <li class="nav-item">
+                <a class="nav-link" href="#">{% trans "Sign Out" %}</a>
+            </li>
+            {% else %}
+            <li class="nav-item">
+                <a id="sign-up-link" class="nav-link" href="#">{% trans "Sign Up" %}</a>
+            </li>
+            <li class="nav-item" data-toggle="modal" data-target="#signIn">
+                <a id="log-in-link" class="nav-link" href="#">{% trans "Sign In" %}</a>
+            </li>
+            {% endif %}
+        </ul>
     </div>
 </nav>