Locale select panel mock

libretranslate/locales/.gitignore

@@ -1,2 +1,3 @@
 **/*.mo
 .langs.py
+.swag.py

libretranslate/static/css/main.css

@@ -39,6 +39,61 @@ h3.header {
   position: relative;
 }
 
+.top-nav .locale-panel{
+  position: absolute;
+  top: 64px;
+  height: 68px;
+  left: -9px;
+  padding: 0 16px;
+  background: #1565c0;
+  width: 240px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0px 4px 5px 0 rgb(0 0 0 / 20%);
+}
+
+.locale-panel select{
+  display: block;
+  height: 32px;
+  font-size: 14px;
+  background-color: #fff;
+}
+
+.locale-panel a{
+  line-height: normal;
+  font-size: 90%;
+  padding: 0;
+  margin-top: 6px;
+  text-align: right;
+}
+
+.locale-panel a i.material-icons{
+  display: inline-block;
+  line-height: initial;
+  line-height: 14px;
+  font-size: 100%;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+
+.locale-panel a:hover{
+  background-color: transparent;
+}
+
+#nav-mobile .locale-panel{
+  color: rgba(0,0,0,0.87);
+  padding: 0 32px;
+}
+
+#nav-mobile .locale-panel a{
+  padding: 0;
+}
+
+#nav-mobile .locale-panel a i.material-icons{
+  float: none;
+}
+
 .language-select {
   display: inline-flex;
   align-items: center;

libretranslate/templates/index.html

@@ -62,7 +62,7 @@
 					<img src="{{ url_for('static', filename='icon.svg') }}" alt="LibreTranslate" class="logo">
 					<span>LibreTranslate</span>
 				</a>
-				<ul class="right hide-on-med-and-down">
+				<ul class="right hide-on-med-and-down top-nav position-relative">
 					{% set menulinks %}
 					<li><a href="{{ swagger_url }}">{{ _h("API Docs") }}</a></li>
 					{% if get_api_key_link %}
@@ -72,7 +72,15 @@
 					{% if api_keys %}
 					<li><a class="noline" href="javascript:setApiKey()" title="{{ _h('Set API Key') }}"><i class="material-icons">vpn_key</i></a></li>
 					{% endif %}
-					<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a></li>
+					<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
+					</li>
+					<li class="locale-panel">
+						<select id="locales">
+							<option value="en">English</option>
+							<option value="it">Italian</option>
+						</select>
+						<a href="#">Improve this language<i class="material-icons">create</i></a>
+					</li>
 					{% endset %}
 					{{ menulinks }}
 				</ul>