1 files changed, 92 insertions, 35 deletions
diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index c7a0c15..eb9680f 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -18,47 +18,104 @@ You can choose to use either of these licenses or both.
 I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
-#}
+-#}
 <!DOCTYPE html>
 <html>
   <head>
-    {% block head %}
-    <title>{% block title required %}{% endblock %} - Haketilo proxy</title>
-    <style>
-        {% block style %}
-        body {
-	    color: #444;
-        }
-
-        #main {
-	    max-width: 750px;
-	    margin: auto;
-        }
-
-        a {
-	    text-decoration: inherit;
-	    color: inherit;
-        }
-
-        .small-print {
-	    font-size: 80%;
-	    color: #555;
-        }
-
-	.error-note {
-	    display: block;
-	    border-left: 5px solid #a33;
-	    background-color: #fcc;
-	}
-
-        .hide {
-	    display: none !important;
-        }
-        {% endblock %}
+    {%- block head %}
+      <title>
+	{% block title required %}{% endblock %}
+	-
+	_('web_ui.base.title.haketilo_proxy')
+      </title>
+      <style>
+        {%- block style %}
+          body {
+	      color: #444;
+	      margin: 0;
+          }
+
+          #main {
+	      max-width: 750px;
+	      margin: auto;
+          }
+
+          a {
+	      text-decoration: inherit;
+	      color: inherit;
+          }
+
+          .small-print {
+	      font-size: 80%;
+	      color: #555;
+          }
+
+	  .error-note {
+	      display: block;
+	      border-left: 5px solid #a33;
+	      background-color: #fcc;
+	  }
+
+          .hide {
+	      display: none !important;
+          }
+
+	  ul#nav {
+	      -moz-user-select: none;
+	      user-select: none;
+	      background-color: #e0e0e0;
+	      margin: 0;
+	      border-bottom: 2px solid #444;
+	  }
+
+	  ul#nav > li {
+	      list-style-type: none;
+	      background-color: #70AF70;
+	      font-size: 115%;
+	      padding: 10px;
+	      display: inline-block;
+	      cursor: pointer;
+	      margin: 5px 0 0 0;
+	  }
+
+	  ul#nav > li:hover {
+	      box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+	  }
+
+	  ul#nav > li.nav-active {
+	      background-color: #65A065;
+	      color: #222;
+	      box-shadow: none;
+	      cursor: default;
+	  }
+
+	  ul#item_list > li > a:only-child {
+	      display: block;
+	  }
+        {%- endblock %}
     </style>
-    {% endblock %}
+    {%- endblock %}
   </head>
   <body>
+    {%- set active_endpoint = get_current_endpoint() %}
+    {%-
+      set navigation_bar = [
+          ('home',                    _('web_ui.base.nav.home')),
+          ('packages.packages',       _('web_ui.base.nav.packages')),
+          ('repos.repos',             _('web_ui.base.nav.repos')),
+          ('packages.load_from_disk', _('web_ui.base.nav.load'))
+      ]
+    -%}
+    <ul id="nav">
+      {%- for endpoint, label in navigation_bar %}
+	{%- if endpoint == active_endpoint %}
+	  <li class="nav-active">{{ label }}</li>
+	{%- else %}
+	  <li><a href="{{ url_for(endpoint) }}">{{ label }}</a></li>
+	{%- endif %}
+	</li>
+      {%- endfor %}
+    </ul>
     <div id="main">{% block main required %}{% endblock %}</div>
   </body>
 </html>