UX: Add navigation menu (#50)

* Add navigation menu

* Handle review comments

* Apply suggestion from @keradus

* Apply suggestion from @keradus

---------

Co-authored-by: Dariusz Rumiński <dariusz.ruminski@gmail.com>

Author: Kocal

theme/layout.html

@@ -47,6 +47,18 @@ <h1 class="title_header">
                 <strong>{{ theme_fixer_version_codename }} (v{{ theme_fixer_version_number }})</strong> edition
               </h1>
             </div>
+
+            {%- block navigation %}
+            <nav class="nav">
+              <ul class="menu">
+                <li class="{% if pagename.startswith('doc/installation') %}active{% endif %}"><a href="{{ pathto('doc/installation') }}">Installation</a></li>
+                <li class="{% if pagename.startswith('doc/usage') %}active{% endif %}"><a href="{{ pathto('doc/usage') }}">Usage</a></li>
+                <li class="{% if pagename.startswith('doc/config') %}active{% endif %}"><a href="{{ pathto('doc/config') }}">Configuration</a></li>
+                <li class="{% if pagename.startswith('doc/rules') %}active{% endif %}"><a href="{{ pathto('doc/rules/index') }}">Rules</a></li>
+                <li class="{% if pagename.startswith('doc/ruleSets') %}active{% endif %}"><a href="{{ pathto('doc/ruleSets/index') }}">Sets</a></li>
+              </ul>
+            </nav>
+            {% endblock %}
           </div>
         </div>
       </header>

theme/static/css/base.css

@@ -53,7 +53,7 @@ a:visited
   right: 0;
 }
 
-.hd, .bd, .ft
+.hd, .nav, .bd, .ft
 {
   max-width: 1200px;
   min-width: 996px;
@@ -154,36 +154,33 @@ a:visited
   border-bottom: 2px dotted #fff;
 }
 
-.menu
-{
-  padding-top: 95px;
-  width: 940px;
-  font-family: Arial, sans-serif;
+ .nav {
+    background-color: transparent;
+    margin-top: 50px;
 }
 
-.menu li
+.nav .menu
 {
-  color: #ffffff;
-  font-size: 1.125em;
-  display: inline;
-  padding-right: 30px;
+  font-family: Arial, sans-serif;
+  display: flex;
+  gap: 30px;
 }
 
-.menu a
+.nav .menu a
 {
-  color: #ffffff;
+  font-size: 1.2em;
+  color: #fff;
   text-decoration: none;
 }
 
-.menu a:hover
+.nav .menu a:hover
 {
-  color: #ffffff;
   text-decoration: underline;
 }
 
-.menu a.active
+.nav .menu li.active a
 {
-  color: #444;
+  color: #fbc817;
 }
 
 .bd .content