fix: menu items width

retejs · Mar 9, 2024 · 757d1f7 · 757d1f7
1 parent 0cde781
commit 757d1f7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/components/Nav.vue b/components/Nav.vue
@@ -1,20 +1,23 @@
 <template lang="pug">
 client-only
-  Menu(width="auto" :active-name="activeName" :open-names="cascadePaths")
+  Menu(width="100%" :active-name="activeName" :open-names="cascadePaths")
     template(v-for="item in list")
       MenuItem(
         v-if="!item.children && !item.placeholder"
         :name="sanitize(item._path)"
         :to="sanitize(item._path)"
       )
-        slot(name="item" :data="item") {{ item.title }}
+        slot(name="item" :data="item")
+          .title {{ item.title }}
       Submenu.submenu(v-if="item.children" :name="sanitize(item._path)")
-        template(#title) {{ item.title }}
+        template(#title)
+          .title {{ item.title }}
         Nav(:list="item.children" :active="activeName")
   template(#placeholder)
     SsrNav(:list="list" :active="activeName")
       template(#item="{ data }")
-        slot(name="item" :data="data") {{ data.title }}
+        slot(name="item" :data="data")
+          .title {{ data.title }}
 </template>
 
 <script>
@@ -51,3 +54,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/components/shared/NavMenu.vue b/components/shared/NavMenu.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-Menu.menu(width="auto")
+Menu.menu(width="17em")
   h1.title
     .text
       slot(name="title")
@@ -24,6 +24,7 @@ export default {
   min-width: 200px
   height: calc(100vh - var(--header-offset))
   overflow: auto
+  overflow-x: hidden
   position: sticky
   top: var(--header-offset)
   .menu-burger