Move the langbar to be part of the navbar - TODO: dropdown

assets/css/bobastyle.css

@@ -118,7 +118,7 @@ footer {
 
 
 /* Navbar formatting */
-.navbar, .langbar {
+.topbar {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
@@ -127,33 +127,28 @@ footer {
   margin-top: 5px;
   padding: 4px;
   align-items: flex-start;
+}
+
+.navbar, .langpicker {
+  display: flex;
+}
+
+.navbar {
+  flex-grow: 1;
   overflow: auto;
 }
 
-.navbar-item, .langbar-item {
-  /*flex-grow: 1;*/
+.navbar a, .langpicker a {
   padding: 8px 12px;
   border-radius: 12px;
 }
 
-/*.navbar-item:first-child,
-.langbar-item:first-child {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-
-.navbar-item:last-child,
-.langbar-item:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-}*/
-
-.navbar-item:hover, .langbar-item:hover {
+.navbar-item:hover, .langpicker-item:hover {
   background-color: #444;
   text-decoration: none;
 }
 
-.navbar-item.active, .langbar-item.active {
+.topbar .active {
   font-weight: bold;
 }
 

layouts/partials/top.html

@@ -2,6 +2,7 @@
     <a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a>
 </h2>
 
+<div class="topbar">
     <nav class="navbar">
         {{ with .Site.Home }}
         <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
@@ -20,9 +21,10 @@
     </nav>
 
     {{ if .Site.IsMultiLingual }}
-<nav class="langbar">
+    <nav class="langpicker">
         {{ range .Site.Home.AllTranslations }}
-    <a class="langbar-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+        <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
         {{ end }}
     </nav>
     {{ end }}
+</div>