スマホ対応

src/App.vue

@@ -2,12 +2,41 @@
 import NavigationBar from '/@/components/NavigationBar/NavigationBar.vue'
 import PageHeader from '/@/components/Layout/PageHeader.vue'
 import Loading from '/@/pages/Loading.vue'
+import { useResponsiveStore } from '/@/store/responsive'
+import { computed, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const { isMobile } = storeToRefs(useResponsiveStore())
+
+const isOpenNavigationBar = ref(!isMobile.value)
+const showCover = computed(() => isMobile.value && isOpenNavigationBar.value)
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (!isMobile.value) {
+      return
+    }
+    isOpenNavigationBar.value = false
+  }
+)
 </script>
 
 <template>
   <div :class="$style.container">
-    <page-header :class="$style.header" />
-    <navigation-bar />
+    <page-header
+      :class="$style.header"
+      :is-open-navigation-bar="isOpenNavigationBar"
+      @toggle-navigation-bar="isOpenNavigationBar = !isOpenNavigationBar"
+    />
+    <div
+      v-if="showCover"
+      :class="$style.navigationBarCover"
+      @click="isOpenNavigationBar = false"
+    />
+    <navigation-bar v-if="isOpenNavigationBar" :class="$style.navigationBar" />
     <div :class="$style.content">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
@@ -38,6 +67,30 @@ import Loading from '/@/pages/Loading.vue'
   height: 100%;
 }
 
+@media (width <= 768px) {
+  .navigationBarCover {
+    position: absolute;
+    z-index: $z-index-navigationBarCover;
+    top: 5rem;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: $color-background-dim;
+    opacity: 0.5;
+  }
+  .navigationBar {
+    position: absolute;
+    z-index: $z-index-navigationBar;
+    top: 5rem;
+    left: 0;
+    height: 100%;
+    width: 260px;
+  }
+  .container {
+    grid-template-columns: 1fr;
+  }
+}
+
 .content {
   overflow: {
     x: hidden;

src/components/Layout/PageContainer.vue

@@ -1,14 +1,20 @@
-<script setup lang="ts"></script>
-
 <template>
-  <main :class="$style.container"><slot /></main>
+  <main :class="$style.container">
+    <slot />
+  </main>
 </template>
 
 <style lang="scss" module>
 .container {
   width: 100%;
   max-width: 1024px;
   margin: 0 auto;
-  padding: 0 3rem 3rem;
+  padding: 4rem 3rem 3rem;
+}
+
+@media (width <= 768px) {
+  .container {
+    padding: 2rem 1.25rem;
+  }
 }
 </style>

src/components/Layout/PageHeader.vue

@@ -1,23 +1,33 @@
+<script lang="ts" setup>
+import SearchInput from '/@/components/UI/SearchInput.vue'
+import Icon from '/@/components/UI/Icon.vue'
+import { storeToRefs } from 'pinia';
+import { useResponsiveStore } from '/@/store/responsive';
+
+interface Props {
+  isOpenNavigationBar: boolean
+}
+defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'toggleNavigationBar'): void
+}>()
+
+const { isMobile } = storeToRefs(useResponsiveStore())
+</script>
+
 <template>
   <div :class="$style.container">
-    <div>Logo</div>
+    <div :class="$style.leftContainer">
+      <button v-if="isMobile" @click="emit('toggleNavigationBar')">
+        <icon name="mdi:menu" />
+      </button>
+      <div>Logo</div>
+    </div>
     <search-input />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import SearchInput from '/@/components/UI/SearchInput.vue'
-
-export default defineComponent({
-  name: 'Header',
-  components: { SearchInput },
-  setup() {
-    return {}
-  }
-})
-</script>
-
 <style lang="scss" module>
 .container {
   display: flex;
@@ -27,4 +37,16 @@ export default defineComponent({
   align-items: center;
   border-bottom: solid 0.1rem $color-secondary;
 }
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (width <= 768px) {
+  .container {
+    padding: 0 1rem;
+  }
+}
 </style>

src/components/UI/FormDuration.vue

@@ -53,6 +53,7 @@ const handleInput = (value: string, dateType: DateType) => {
 .container {
   display: flex;
   align-items: flex-end;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 .sinceHead {

src/components/UI/FormProjectDuration.vue

@@ -102,6 +102,7 @@ const handleInput = (value: string, dateType: DateType) => {
 .container {
   display: flex;
   align-items: flex-end;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 .sinceHead {

src/components/Users/UserProfileEdit.vue

@@ -37,14 +37,14 @@ const updateUserProfile = async () => {
 
 <template>
   <div>
-    <div>
+    <section>
       <h2 :class="$style.shouldShowRealnameText">本名を表示する</h2>
       <div :class="$style.toggleContainer">
         <p>{{ user.realName }}</p>
         <toggle-switch v-model="shouldShowRealname" />
       </div>
-    </div>
-    <div>
+    </section>
+    <section>
       <h2 :class="$style.bio">自己紹介</h2>
       <div :class="$style.textareaContainer">
         <form-text-area
@@ -53,15 +53,16 @@ const updateUserProfile = async () => {
           :limit="256"
           placeholder="自己紹介を入力してください"
         />
-        <base-button
-          icon="mdi:update"
-          :class="$style.updateButton"
-          :disabled="isSending"
-          @click="updateUserProfile"
-        >
-          Update
-        </base-button>
       </div>
+    </section>
+    <div :class="$style.buttonContainer">
+      <base-button
+        icon="mdi:update"
+        :disabled="isSending"
+        @click="updateUserProfile"
+      >
+        Update
+      </base-button>
     </div>
   </div>
 </template>
@@ -77,13 +78,16 @@ const updateUserProfile = async () => {
   font-size: 1.25rem;
 }
 .textareaContainer {
-  margin: 0.5rem 0 0 0.5rem;
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
 }
 .bio {
   font-size: 1.25rem;
   margin-top: 2rem;
 }
-.updateButton {
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
   margin-top: 2rem;
 }
 </style>

src/components/Users/UserProfileMobile.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import UserIcon from '/@/components/UI/UserIcon.vue'
+import UserAccounts from '/@/components/Users/UserAccounts.vue'
+import type { UserDetail } from '/@/lib/apis'
+
+interface Props {
+  user: UserDetail
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div>
+    <div :class="$style.iconAndNameContainer">
+      <user-icon :user-id="user.id" :size="64" />
+      <div :class="$style.nameContainer">
+        <p :class="$style.name">{{ user.name }}</p>
+        <p :class="$style.realName">{{ user.realName }}</p>
+      </div>
+    </div>
+    <div :class="$style.accounts">
+      <user-accounts :accounts="user.accounts" />
+      <router-link to="/users/accounts" :class="$style.link">
+        <base-button icon="mdi:account">Edit</base-button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.iconAndNameContainer {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+.nameContainer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 1rem;
+}
+.name {
+  color: $color-primary;
+  font-size: 1.5rem;
+}
+.realName {
+  font-size: 1.25rem;
+}
+.accounts {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-top: 1rem;
+}
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

src/main.ts

@@ -5,7 +5,6 @@ import App from './App.vue'
 import type { PluginOptions } from 'vue-toastification'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
-import './styles/toast.scss'
 
 import './index.scss'
 import '@purge-icons/generated'

src/pages/Contest.vue

@@ -88,7 +88,7 @@ const contestTeams: ContestTeam[] = (
   align-items: center;
 }
 .header {
-  margin: 4rem 0 2rem;
+  margin-bottom: 2rem;
 }
 .link {
   text-decoration: none;

src/pages/ContestEdit.vue

@@ -153,7 +153,7 @@ const deleteContest = async () => {
   align-items: center;
 }
 .header {
-  margin: 4rem 0 2rem;
+  margin-bottom: 2rem;
 }
 .labeledForm {
   margin-bottom: 2rem;