Merge pull request #225 from Morichan/ticket-208

多言語選択メニューのユーザビリティ向上

assets/locales/en.json

@@ -157,6 +157,7 @@
   "サイドメニュー項目を開く": "Open side menu items",
   "サイドメニュー項目を閉じる": "Close side menu items",
   "お子様をお持ちの皆様へ": "To families with children",
+  "子供の皆様へ": "こどものみなさん",
   "県民の皆様へ": "To the residents of Miyazaki",
   "宮崎県新型コロナウイルス感染症関連情報": "Information on the new coronavirus infection in Miyazaki Prefecture",
   "宮崎県主催イベント等の開催に関する基準": "Standards for Holding Events Organized by Miyazaki Prefecture",

assets/locales/ja-Hira.json

@@ -145,6 +145,7 @@
   "print": "印刷（いんさつ）",
   "サイドメニュー項目を開く": "なにか 知（し）りたいときに ひだりの サイドメニューボタンを おす",
   "サイドメニュー項目を閉じる": "なにか 知（し）りたいときに ひだりの サイドメニューボタンを とじる",
+  "子供の皆様へ": "こどものみなさん",
   "県民の皆様へ": "宮崎県（みやざきけん）に すんでいる 人（ひと）",
   "宮崎県新型コロナウイルス感染症関連情報": "宮崎県（みやざきけん）からの おしらせ",
   "宮崎県主催イベント等の開催に関する基準": "あつまりを やめる めやす",

assets/locales/ja.json

@@ -160,6 +160,7 @@
   "サイドメニュー項目を開く": "サイドメニュー項目を開く",
   "サイドメニュー項目を閉じる": "サイドメニュー項目を閉じる",
   "お子様をお持ちの皆様へ": "お子様をお持ちの皆様へ",
+  "子供の皆様へ": "こどものみなさん",
   "県民の皆様へ": "県民の皆様へ",
   "宮崎県新型コロナウイルス感染症対策本部報": "宮崎県新型コロナウイルス感染症対策本部報",
   "宮崎県主催等 中止又は延期するイベント等": "宮崎県主催等 中止又は延期するイベント等",

components/LanguageSelector.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="LauguageSelector">
-    <div class="LauguageSelector-Background">
+  <div class="LanguageSelector">
+    <div class="LanguageSelector-Background">
       <EarthIcon class="EarthIcon" aria-hidden="true" />
       <SelectMenuIcon class="SelectMenuIcon" aria-hidden="true" />
     </div>
     <select
       id="LanguageSelector"
       v-model="currentLocaleCode"
-      class="LauguageSelector-Menu"
+      class="LanguageSelector-Menu"
       @change="handleChangeLanguage"
     >
       <option
@@ -50,11 +50,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.LauguageSelector {
+.LanguageSelector {
   position: relative;
 }
 
-.LauguageSelector-Background {
+.LanguageSelector-Background {
   display: flex;
   align-items: center;
   padding: 0 6px;
@@ -77,7 +77,7 @@ export default Vue.extend({
   }
 }
 
-.LauguageSelector-Menu {
+.LanguageSelector-Menu {
   // select 要素のリセット
   -webkit-appearance: none;
   -moz-appearance: none;

components/MenuList.vue

@@ -99,9 +99,10 @@ export default Vue.extend({
   padding: 12px 0;
   border-bottom: 1px solid $gray-4;
 
-  @include largerThan($small) {
-    border-top: 1px solid $gray-4;
-  }
+  // Issue #225 のため除去
+  // @include largerThan($small) {
+  //   border-top: 1px solid $gray-4;
+  // }
 }
 
 .MenuList-Item {

components/SideNavigation.vue

@@ -30,7 +30,6 @@
       </v-icon>
 
       <nav class="SideNavigation-Menu">
-        <MenuList :items="items" @click="$emit('closeNavi', $event)" />
         <div
           v-if="this.$i18n.locales.length > 1"
           class="SideNavigation-Language"
@@ -42,6 +41,7 @@
           </label>
           <LanguageSelector />
         </div>
+        <MenuList :items="items" @click="$emit('closeNavi', $event)" />
       </nav>
 
       <footer class="SideNavigation-Footer">
@@ -128,6 +128,12 @@ export default Vue.extend({
   computed: {
     items(): Item[] {
       return [
+        {
+          icon: 'mdi-human-child',
+          title: this.$t('子供の皆様へ'),
+          link: this.switchLocalePath('ja-basic'),
+          divider: true
+        },
         {
           icon: 'mdi-chart-timeline-variant',
           title: this.$t('県内の最新感染動向'),
@@ -381,7 +387,7 @@ export default Vue.extend({
 }
 
 .SideNavigation-Language {
-  padding-top: 20px;
+  padding-bottom: 5px;
 }
 
 .SideNavigation-LanguageLabel {