add language selector

assets/scss/layout/_sidebar.scss

@@ -247,6 +247,76 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       }
     }
   } /* .sidebar-bottom */
+  .lang-selector-wrapper {
+    padding: 0.35rem;
+    margin: 0.15rem 0;
+    text-align: center;
+  }
+  
+  /* Dropdown container */
+  .lang-dropdown {
+    position: relative;
+    display: inline-block;
+    width: auto;
+    min-width: 120px;
+    max-width: 80%;
+}
+  
+  /* Select input element */
+  .lang-select {
+    /* Basic styles */
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
+    // padding: 0.5rem 2rem 0.5rem 1rem;
+    border: none;
+    /* Font and colors */
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--sidebar-muted);
+    background-color: var(--sidebar-bg);
+    
+    /* Shape and interaction */
+    border-radius: var(--bs-border-radius, 0.375rem);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    /* Add arrow icon */
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem;
+  }
+  
+  /* Hover state */
+  .lang-select:hover {
+    color: var(--sidebar-active);
+    background-color: var(--sidebar-hover);
+  }
+  
+  /* Focus state */
+  .lang-select:focus {
+    outline: 2px solid var(--sidebar-active);
+    outline-offset: 2px;
+    color: var(--sidebar-active);
+  }
+  
+  /* Firefox browser support */
+  .lang-select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--sidebar-muted);
+  }
+  
+  /* IE browser support */
+  .lang-select::-ms-expand {
+    display: none;
+  }
+
+  .no-hover:hover {
+    background-color: var(--sidebar-bg) !important;
+  }
+
 } /* #sidebar */
 
 [#{$sidebar-display}] {

hugo.toml

@@ -1,4 +1,3 @@
-baseURL = 'https://example.org/'
 title = 'Chirpy'
 enableGitInfo = true
 

layouts/partials/language-selector.html

@@ -1,9 +1,9 @@
-<div class="language-selector">
+<div class="lang-dropdown">
-  <select class="language-dropdown" onchange="location = this.value;">
+  <select class="lang-select" onchange="location = this.value;">
     {{ $currentLang := .Site.Language.Lang }}
     {{ range .Site.Languages }}
       <option value="/{{ .Lang }}/" {{ if eq .Lang $currentLang }}selected{{ end }}>
-        {{ .LanguageName }} ({{ .Lang }})
+        {{ .LanguageName }}
       </option>
     {{ end }}
   </select>

layouts/partials/sidebar.html

@@ -34,8 +34,8 @@
           </li>
           <!-- .nav-item -->
         {{ end }}
-        <li class="nav-item">
+        <li class="nav-item mt-4">
-          <a class="nav-link">
+          <a class="nav-link no-hover">
             <i class="fa-fw fas fa-language"></i>
             {{ partial "language-selector.html" . }}
           </a>