added contact page, fixed image size in kosen-x, improved Dropdown component

components/DropDown.vue

@@ -59,8 +59,8 @@ const handleFocusOutEvent = () => {
         >
             {{ property.label }}
         </button>
-        <Transition name="dropdown-fade">
-            <div class="dropdown-item-list" v-if="isOpen">
+        <div class="dropdown-item-list-wrapper">
+            <div class="dropdown-item-list" :class="{ 'show-list': isOpen }">
                 <ul>
                     <li
                         v-for="entry in property.entries"
@@ -70,7 +70,7 @@ const handleFocusOutEvent = () => {
                     </li>
                 </ul>
             </div>
-        </Transition>
+        </div>
     </div>
 </template>
 
@@ -86,25 +86,27 @@ const handleFocusOutEvent = () => {
 }
 
 .dropdown-menu {
-    display: inline-block;
-    width: fit-content;
-    position: relative;
+    display: inline-flex;
+    flex-direction: column;
 }
 
 .dropdown-label {
     background: none;
-    width: fit-content;
+    width: 100%;
     padding: 1rem 2rem;
-    border: transparent solid 3px;
+    border-top: currentColor solid 3px;
+    border-inline: transparent solid 3px;
+    border-bottom: transparent solid 3px;
     font-size: 1em;
     font-weight: bold;
     color: var(--neptune1);
+    transition: 0.2s linear;
 }
 
 .dropdown-label:hover {
     cursor: pointer;
     color: var(--andromeda);
-    border-top: currentColor solid 3px;
+    border: currentColor solid 3px;
     transition: 0.2s linear;
 }
 
@@ -123,24 +125,35 @@ const handleFocusOutEvent = () => {
     }
 }
 
+.dropdown-item-list-wrapper {
+    height: 0;
+}
+
 .dropdown-item-list {
     display: block;
     background: var(--neptune1);
     color: var(--starlight);
     font-weight: bold;
-    position: absolute;
-    top: auto;
+    position: relative;
     z-index: 100;
-    min-width: 100%;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.2s ease;
     width: fit-content;
+    min-width: 9rem;
     text-wrap: nowrap;
+    line-height: 2.125rem;
     & ul {
         list-style: none;
         padding: 0 0.25rem;
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        padding-inline: 0.5rem;
     }
     & ul li {
         margin: 0.5rem 0;
-        transition: 0.2s linear;
     }
     & ul li:first-child {
         margin-top: 0;
@@ -160,4 +173,10 @@ const handleFocusOutEvent = () => {
         text-decoration-thickness: 2px;
     }
 }
+
+.show-list {
+    visibility: visible;
+    opacity: 1;
+    transition: all 0.2s ease;
+}
 </style>

components/Slide.vue

@@ -328,6 +328,7 @@ ul {
     scale: 90%;
     &:hover {
         cursor: pointer;
+        scale: 1.01;
     }
     & svg {
         position: absolute;

components/TheFooter.vue

@@ -52,6 +52,12 @@ const showThePast = (event: Event) => {
                                 <li>
                                     <NuxtLink to="/news"> News </NuxtLink>
                                 </li>
+                                <li>
+                                    <NuxtLink to="/contact">
+                                        Contact
+                                        {{ SiteInfo.clubNameAbbreviation }}
+                                    </NuxtLink>
+                                </li>
                             </ul>
                         </li>
                         <li>

components/TheHeader.vue

@@ -20,6 +20,15 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
     { text: "Gallery", link: "/about/gallery" },
 ];
 
+const informationDropDownEntries: Array<DropDownEntry> = [
+    { text: `About ${SiteInfo.clubNameAbbreviation}`, link: "/about/sera" },
+    {
+        text: "中学生・新入生向け",
+        link: "/about/for-middle-schoolers-and-new-comers",
+    },
+    { text: "Contact", link: "/contact" },
+];
+
 const hamburgerMenuEntries: Array<DropDownEntry> = [
     { text: "Home", link: "/" },
     { text: "News", link: "/news" },
@@ -35,6 +44,7 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
         text: "中学生・新入生向け",
         link: "/about/for-middle-schoolers-and-new-comers",
     },
+    { text: "Contact SERA", link: "/contact" },
 ];
 </script>
 
@@ -47,7 +57,7 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
                     :mode="DropDownMode.onClick"
                     :alignment="DropDownAlignment.Left"
                     :entries="exploreDropDownEntries"
-                    class="left-dropdown"
+                    class="explore-dropdown"
                 />
             </div>
             <div id="logo-link">
@@ -56,12 +66,19 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
                 </NuxtLink>
             </div>
             <div id="header-right">
+                <DropDown
+                    label="Info"
+                    :mode="DropDownMode.onClick"
+                    :alignment="DropDownAlignment.Right"
+                    :entries="informationDropDownEntries"
+                    class="info-dropdown"
+                />
                 <DropDown
                     label="Media"
                     :mode="DropDownMode.onClick"
                     :alignment="DropDownAlignment.Right"
                     :entries="mediaDropDownEntries"
-                    class="right-dropdown"
+                    class="media-dropdown"
                 />
                 <HamburgerMenu
                     :entries="hamburgerMenuEntries"
@@ -97,6 +114,9 @@ header {
 #header-left,
 #header-right {
     display: flex;
+    & > * {
+        margin-inline: 0.25rem;
+    }
 }
 
 #header-left {
@@ -140,8 +160,9 @@ header {
         padding-inline: 1rem;
         width: calc(100% - 2rem);
     }
-    .left-dropdown,
-    .right-dropdown {
+    .explore-dropdown,
+    .info-dropdown,
+    .media-dropdown {
         display: none;
     }
 }