#317 言語選択をドロップダウン形式に変更

assets/i18n/resource.json

@@ -134,6 +134,11 @@
     "en": "Contact Us",
     "cn": "联系我们"
   },
+  "header_language": {
+    "ja": "日本語",
+    "en": "English",
+    "cn": "中文"
+  },
   "unchan_fukidashi": {
     "ja": "トップに戻る",
     "en": "Back to TOP",

index.html

@@ -141,10 +141,6 @@
     style="background-color: #1e2a55"
     class="drawer drawer--top drawer--navbarTopGutter"
   >
-    <div
-      style="position: fixed;z-index: 9999;left: 1rem;top: 1rem;"
-      id="preact-i18n"
-    ></div>
     <header class="drawer-navbar drawer-navbar--fixed" role="banner">
       <div class="drawer-container">
         <div class="drawer-navbar-header">
@@ -154,7 +150,7 @@
           </button>
         </div>
         <nav class="drawer-nav" role="navigation">
-          <ul id="header_contents" class="drawer-menu drawer-menu--right">
+          <ul id="header_contents" class="drawer-menu">
             <!--      各項目へのジャンプ用ヘッダです。-->
             <!--      section_titleクラスを付与したh2要素をジャンプ用タイトルとして使用する想定です。-->
             <li>
@@ -223,6 +219,7 @@
                 >お問い合わせ</a
               >
             </li>
+            <div id="preact-i18n" style="display: inline;"></div>
           </ul>
         </nav>
       </div>
@@ -556,6 +553,10 @@ <h2 class="section_title" id="section_contributors">
       src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"
       defer
     ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
+      defer
+    ></script>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"
       defer

preact/i18n/Switcher.tsx

@@ -20,23 +20,33 @@ const Switcher: FunctionalComponent = () => {
   }, []);
 
   return (
-    <div style={{display: 'flex'}}>
-      <ClickSpan
-        class="flag-icon flag-icon-jp"
-        onClick={setLanguage('ja')}
-        select={select === 'ja'}
-      />
-      <ClickSpan
-        class="flag-icon flag-icon-gb"
-        onClick={setLanguage('en')}
-        select={select === 'en'}
-      />
-      <ClickSpan
-        class="flag-icon flag-icon-cn"
-        onClick={setLanguage('cn')}
-        select={select === 'cn'}
-      />
-    </div>
+    <li class="drawer-dropdown">
+      <a
+        class="drawer-menu-item"
+        data-toggle="dropdown"
+        role="button"
+        aria-expanded="false">
+        <div id="header_language" style="display: inline;"></div>
+        <span class="drawer-caret"></span>
+      </a>
+      <ul class="drawer-dropdown-menu">
+        <li>
+          <a class="drawer-dropdown-menu-item" onClick={setLanguage('ja')}>
+            日本語
+          </a>
+        </li>
+        <li>
+          <a class="drawer-dropdown-menu-item" onClick={setLanguage('en')}>
+            English
+          </a>
+        </li>
+        <li>
+          <a class="drawer-dropdown-menu-item" onClick={setLanguage('cn')}>
+            中文
+          </a>
+        </li>
+      </ul>
+    </li>
   );
 };