feat: add aside slot

playground/components/VSpinner/Default.stories.vue

@@ -1,6 +1,10 @@
 <template>
     <NuxtStory>
         <VSpinner :class="$style.root" />
+        <template #aside>
+            <h2>Settings</h2>
+            <button>ok</button>
+        </template>
     </NuxtStory>
 </template>
 

src/runtime/components/NuxtStory.vue

@@ -1,21 +1,52 @@
 <script setup lang="ts">
+import { useStories } from '../composables/use-stories'
+
 defineProps<{
     layout?: 'fullscreen' | 'default'
 }>()
+
+const { storiesUIVisible } = useStories()
 </script>
 
 <template>
     <div :class="[$style.root, layout && $style['root--layout-' + layout]]">
-        <slot />
+        <div :class="$style.main">
+            <slot />
+        </div>
+        <div v-if="$slots.aside && storiesUIVisible" :class="$style.aside">
+            <slot name="aside" />
+        </div>
     </div>
 </template>
 
 <style lang="scss" module>
 .root {
-    padding: 20px var(--story-padding, 2rem);
+    display: flex;
+}
+
+.main {
+    flex-grow: 1;
+    padding: 20px var(--story-main-padding, 2rem);
 
     &--layout-fullscreen {
-        padding: var(--story-padding, 0);
+        padding: var(--story-main-padding, 0);
     }
 }
+
+.aside {
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    width: 17vw;
+    min-width: 150px;
+    max-width: 400px;
+    padding: 1.5rem 2rem;
+    resize: horizontal;
+    z-index: 1000;
+    height: 100vh;
+    flex-shrink: 0;
+    border-left: 1px solid #e3e3e3ff;
+    background-color: #f6f6f6ff;
+    font-size: 14px;
+}
 </style>

src/runtime/components/StoriesNav.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import type { ComponentPublicInstance } from 'vue'
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStories } from '../composables/use-stories'
 import StoriesNavItem, { type NavItem } from './StoriesNavItem.vue'
@@ -12,7 +11,7 @@ const childRoutes = computed(() => {
     return route.matched[0]?.children
 })
 
-const { storiesNavIsOpen, storiesPath } = useStories()
+const { storiesPath, storiesUIVisible } = useStories()
 
 const itemList = computed(() => {
     const result: NavItem = {}
@@ -43,22 +42,8 @@ const itemList = computed(() => {
     return result
 })
 
-const toggle = ref<ComponentPublicInstance | null>(null)
-watch(
-    () => route.params,
-    () => {
-        if (toggle.value && getComputedStyle(toggle.value.$el).display !== 'none') {
-            storiesNavIsOpen.value = false
-        }
-    },
-)
-
 function onKeyUp(event: KeyboardEvent) {
     if (event.key === 'Escape') search.value = ''
-    if (event.key === 's' && document.activeElement?.tagName !== 'INPUT') {
-        storiesNavIsOpen.value = !storiesNavIsOpen.value
-    }
-    // if (event.key === 't') toggleStoriesNav()
 }
 
 onMounted(() => {
@@ -97,7 +82,7 @@ const filteredItemList = computed(() => {
 </script>
 
 <template>
-    <div :class="[$style.root, storiesNavIsOpen && $style['root--open']]">
+    <div :class="[$style.root, storiesUIVisible && $style['root--open']]">
         <div :class="$style.home">
             <NuxtLink :to="storiesPath('/')" :class="$style.title"> Stories</NuxtLink>
         </div>

src/runtime/components/StoriesPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import StoriesNav from './StoriesNav.vue'
-import { useHead } from '#imports'
+import { useHead, useStories } from '#imports'
+import { onBeforeUnmount, onMounted } from 'vue'
 
 // global styles
 useHead({
@@ -11,6 +12,22 @@ useHead({
         },
     ],
 })
+
+const { storiesUIVisible } = useStories()
+
+function onKeyDown(event: KeyboardEvent) {
+    if (event.metaKey && event.key === '\\') {
+        storiesUIVisible.value = !storiesUIVisible.value
+    }
+}
+
+onMounted(() => {
+    window.addEventListener('keydown', onKeyDown)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onKeyDown)
+})
 </script>
 
 <template>

src/runtime/composables/use-stories.ts

@@ -2,9 +2,8 @@ import { joinURL } from 'ufo'
 import { useState } from '#imports'
 
 export function useStories() {
-    const storiesNavIsOpen = useState('storiesNavIsOpen', () => true)
-    const toggleStoriesNav = () => (storiesNavIsOpen.value = !storiesNavIsOpen.value)
+    const storiesUIVisible = useState('storiesUIVisible', () => true)
     const storiesPath = (path: string) => joinURL('/_stories', path)
 
-    return { storiesNavIsOpen, toggleStoriesNav, storiesPath }
+    return { storiesUIVisible, storiesPath }
 }