chore: improve code organization

src/runtime/components/NuxtStory.vue

@@ -38,7 +38,7 @@ const { storiesUIVisible } = useStories()
     top: 0;
     overflow-y: auto;
     width: 17vw;
-    min-width: 150px;
+    min-width: 200px;
     max-width: 400px;
     padding: 1.5rem 2rem;
     resize: horizontal;
@@ -48,5 +48,9 @@ const { storiesUIVisible } = useStories()
     border-left: 1px solid #e3e3e3ff;
     background-color: #f6f6f6ff;
     font-size: 14px;
+
+    @media (max-width: 768px) {
+        display: none;
+    }
 }
 </style>

src/runtime/components/StoriesNav.vue

@@ -5,14 +5,15 @@ import { useRoute } from 'vue-router'
 import { useStories } from '../composables/use-stories'
 import StoriesNavItem, { type NavItem } from './StoriesNavItem.vue'
 
+const { storiesPath, storiesUIVisible } = useStories()
+
+// ITEM LIST
 const route = useRoute()
 
 const childRoutes = computed(() => {
     return route.matched[0]?.children
 })
 
-const { storiesPath, storiesUIVisible } = useStories()
-
 const itemList = computed(() => {
     const result: NavItem = {}
 
@@ -42,18 +43,7 @@ const itemList = computed(() => {
     return result
 })
 
-function onKeyUp(event: KeyboardEvent) {
-    if (event.key === 'Escape') search.value = ''
-}
-
-onMounted(() => {
-    window.addEventListener('keyup', onKeyUp)
-})
-
-onBeforeUnmount(() => {
-    window.removeEventListener('keyup', onKeyUp)
-})
-
+// SEARCH
 const search = ref('')
 
 function filterComponentByName(query: string) {
@@ -79,6 +69,18 @@ const filteredItemList = computed(() => {
     if (!search.value) return itemList.value
     else return filterComponentByName(search.value)
 })
+
+function onKeyUp(event: KeyboardEvent) {
+    if (event.key === 'Escape') search.value = ''
+}
+
+onMounted(() => {
+    window.addEventListener('keyup', onKeyUp)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keyup', onKeyUp)
+})
 </script>
 
 <template>

src/runtime/components/StoriesPage.vue

@@ -13,6 +13,7 @@ useHead({
     ],
 })
 
+// UI visibility
 const { storiesUIVisible } = useStories()
 
 function onKeyDown(event: KeyboardEvent) {