From 28dd0fadf9ecb0e3fa438124c4219ea2a0f2883d Mon Sep 17 00:00:00 2001
From: Marvin Dalheimer <me@marvin-dalheimer.de>
Date: Tue, 13 Aug 2019 08:44:40 +0200
Subject: [PATCH] Use ul instead of div and BEM naming

---
 layouts/partials/menu.html    | 17 ++++++++---------
 source/css/header.css         |  7 +++++--
 source/js/languageSelector.js |  4 ++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index bab60fa..689ebdb 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -29,17 +29,16 @@
 
     {{ if $.Site.Params.showLanguageSelector }}
     <div class="spacer"></div>
-    <div class="language-selector">
-
-      <div class="language-selector-actual">
-          <li class="list-inline-item">{{ .Language.LanguageName }} ▾</li>
-      </div>
-      <div class="language-selector-more hidden">
+    <ul class="language-selector">
+      <ul class="language-selector-current">
+          <li>{{ .Language.LanguageName }} ▾</li>
+      </ul>
+      <ul class="language-selector__more hidden">
         {{ range $.Site.Home.AllTranslations }}
-        <li class="list-inline-item"><a class="text-dark" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
         {{ end }}
-      </div>
-    </div>
+      </ul>
+    </ul>
     {{ end }}
   </ul>
 
diff --git a/source/css/header.css b/source/css/header.css
index d912bfe..2f73def 100644
--- a/source/css/header.css
+++ b/source/css/header.css
@@ -127,16 +127,19 @@
 
     .language-selector {
       position: relative;
+      list-style: none;
+      margin: 0;
 
-      .language-selector-actual {
+      &-current {
         list-style-type: none;
         display: flex;
         flex-direction: row;
         color: var(--accent);
         cursor: pointer;
+        margin: 0;
       }
 
-      .language-selector-more {
+      &__more {
         @mixin menu;
         top: 35px;
         right: 0;
diff --git a/source/js/languageSelector.js b/source/js/languageSelector.js
index 3002786..104f28e 100644
--- a/source/js/languageSelector.js
+++ b/source/js/languageSelector.js
@@ -2,8 +2,8 @@ const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWid
 const isMobile = () => window.matchMedia(mobileQuery).matches;
 
 if(!isMobile()) {
-  languageSelector = document.getElementsByClassName("language-selector-actual")[0];
-  moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0];
+  languageSelector = document.querySelector(".language-selector-current");
+  moreLanguagesContainer = document.querySelector(".language-selector__more");
 
   document.body.addEventListener("click", () => {
     if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {