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,27 +2,29 @@
     <a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a>
 </h2>
 
-<nav class="navbar">
-    {{ with .Site.Home }}
-    <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
+<div class="topbar">
+    <nav class="navbar">
+        {{ with .Site.Home }}
+        <a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
+        {{ end }}
+
+        {{ range .Site.Menus.main }}
+
+        {{ $isActive := false }}
+        {{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
+        {{ $isActive = true }}
+        {{ end }}
+
+        <a class="navbar-item{{ if $isActive }} active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+
+        {{ end }}
+    </nav>
+
+    {{ if .Site.IsMultiLingual }}
+    <nav class="langpicker">
+        {{ range .Site.Home.AllTranslations }}
+        <a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+        {{ end }}
+    </nav>
     {{ end }}
-
-    {{ range .Site.Menus.main }}
-
-    {{ $isActive := false }}
-    {{ if or ($.HasMenuCurrent .Menu .) ($.IsMenuCurrent .Menu .) }}
-    {{ $isActive = true }}
-    {{ end }}
-
-    <a class="navbar-item{{ if $isActive }} active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
-
-    {{ end }}
-</nav>
-
-{{ if .Site.IsMultiLingual }}
-<nav class="langbar">
-    {{ range .Site.Home.AllTranslations }}
-    <a class="langbar-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
-    {{ end }}
-</nav>
-{{ end }}
+</div>