fix : dropDown overflow

- RWD till 750px
gdsc-ncku · Jan 14, 2024 · d6b4bdf · d6b4bdf
1 parent dae3969
commit d6b4bdf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/src/components/DropDown.vue b/src/components/DropDown.vue
@@ -13,12 +13,11 @@
   </div>
 
   <!-- multi links -->
-  <button
-    v-if="linkList.length > 1"
-    class="group hover:mt-4"
-    type="button"
-  >
-    <div class="flex justify-center lg:gap-x-2 md:gap-x-1">
+  <button v-if="linkList.length > 1" class="group lg:hover:mt-4 md:hover:mt-[18px] hover:mt-[20px]" type="button">
+    <div
+      class="flex justify-center lg:gap-x-2 md:gap-x-1"
+      :class="{ 'lg:px-[9px] md:px-[6px] px-4': hasLongWord(linkList) }"
+    >
       <span
         class="font-bold text-sm lg:text-xl md:text-base"
         :class="{
@@ -54,10 +53,9 @@
         v-for="link in linkList"
         :key="link.name"
         :href="link.link"
-        class="block px-1 py-2 text-xs lg:text-sm text-white hover:bg-primary-50 hover:rounded-sm hover:text-primary-900"
+        class="block px-1 py-2 lg:text-sm text-[11px] text-white hover:bg-primary-50 hover:rounded-sm hover:text-primary-900"
         :class="{
-          'bg-transparent hover:rounded-m':
-            theme === 'light',
+          'bg-transparent hover:rounded-m': theme === 'light',
         }"
         @click="handleLinkClick(link)"
       >
@@ -92,10 +90,14 @@ const props = defineProps({
 });
 
 const { theme, title, linkList } = toRefs(props);
+
+const hasLongWord = (linkList) => {
+  return linkList.some((link) => link.name.length > 5);
+};
 </script>
 
 <style scoped>
 .dark-content {
   color: #404040;
 }
-</style>
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -6,14 +6,14 @@
     }"
   >
     <nav class="flex justify-center xl:gap-28 lg:gap-8 gap-3">
-        <a class="flex flex-col justify-center" href="/">
-          <img
-            :src="theme == 'light' ? '/logo.svg' : '/logo-dark.svg'"
-            alt="logo"
-            class="block xl:w-44 lg:w-36 md:w-28 w-24 cursor-pointer"
-            @click=""
-          />
-        </a>
+      <a class="flex flex-col justify-center" href="/">
+        <img
+          :src="theme == 'light' ? '/logo.svg' : '/logo-dark.svg'"
+          alt="logo"
+          class="block xl:w-44 lg:w-36 md:w-28 w-24 cursor-pointer"
+          @click=""
+        />
+      </a>
 
       <div class="flex xl:gap-7 lg:gap-3 gap-2">
         <template v-for="item in navBarList">
@@ -25,17 +25,19 @@
         </template>
       </div>
 
-      <a
-        href="/signup"
-        class="block text-center font-bold bg-primary-900 rounded-full lg:h-14 lg:w-36 lg:text-xl md:h-10 md:w-24 h-8 w-20"
-      >
-        <div class="flex flex-col justify-center h-full">
-          <span
-            class="text-bold text-primary-50 text-sm lg:text-xl md:text-base"
-            >即刻報名</span
-          >
-        </div>
-      </a>
+      <div class="flex flex-col justify-center">
+        <a
+          href="/signup"
+          class="block text-center font-bold bg-primary-900 rounded-full lg:h-14 lg:w-36 lg:text-xl md:h-10 md:w-24 h-8 w-20"
+        >
+          <div class="flex flex-col justify-center h-full">
+            <span
+              class="text-bold text-primary-50 text-sm lg:text-xl md:text-base"
+              >即刻報名</span
+            >
+          </div>
+        </a>
+      </div>
     </nav>
   </div>
 </template>