[WIP] - feat(frontend): #709 sidebar to show open bbb room

frontend/.storybook/StoryWrapper.vue

@@ -1,6 +1,5 @@
-<!-- .storybook/StoryWrapper.vue -->
 <template>
-  <v-app :theme="themeName">
+  <v-app :theme="themeName" :style="{ height: appHeight }">
     <v-main>
       <slot name="story"></slot>
     </v-main>
@@ -9,12 +8,18 @@
 
 <script>
 export const DEFAULT_THEME = 'light'
+export const DEFAULT_HEIGHT = 'auto' // Fallback height
+
 export default {
   props: {
     themeName: {
       default: DEFAULT_THEME,
       type: String,
     },
+    appHeight: {
+      default: DEFAULT_HEIGHT,
+      type: String,
+    },
   },
 }
 </script>
@@ -24,3 +29,5 @@ export default {
   min-height: unset;
 }
 </style>
+
+

frontend/.storybook/main.ts

@@ -17,6 +17,22 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
+  viteFinal: (config) => {
+    // Add your Vite configuration here, if necessary
+    return {
+      ...config,
+      // css: {
+      //   preprocessorOptions: {
+      //     scss: {
+      //       additionalData: `
+      //         @import "/dreammall.earth/frontend/src/assets/scss/mixins.scss";
+      //         @import "/dreammall.earth/frontend/src/assets/scss/style.scss";
+      //       `,
+      //     },
+      //   },
+      // },
+    }
+  },
 }
 
 export default config

frontend/.storybook/preview.ts

@@ -1,9 +1,9 @@
 import { setup } from '@storybook/vue3'
 import { createPinia } from 'pinia'
-
 import { setPageContext } from '#context/usePageContext'
 import i18n from '#plugins/i18n'
 import CreateVuetify from '#plugins/vuetify'
+import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
 
 import { withVuetifyTheme } from './withVuetifyTheme.decorator'
 
@@ -14,7 +14,15 @@ setup((app) => {
   const pinia = createPinia()
   app.use(pinia)
   app.use(i18n)
-  app.use(CreateVuetify(i18n))
+  app.use(CreateVuetify(i18n, {
+    icons: {
+      defaultSet: 'mdi',
+      aliases,
+      sets: {
+        mdi,
+      },
+    },
+  }))
 
   setPageContext(app, { urlPathname: '' })
 })
@@ -28,12 +36,25 @@ export const globalTypes = {
     defaultValue: 'light',
     toolbar: {
       icon: 'paintbrush',
-      // Array of plain string values or MenuItem shape
       items: [
         { value: 'light', title: 'Light', left: '🌞' },
         { value: 'dark', title: 'Dark', left: '🌛' },
       ],
-      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+  appHeight: {
+    name: 'App Height',
+    description: 'Height of the app container',
+    defaultValue: 'auto',
+    toolbar: {
+      icon: 'arrows-alt-v',
+      items: [
+        { value: '50vh', title: '50vh' },
+        { value: '75vh', title: '75vh' },
+        { value: '100vh', title: '100vh' },
+        { value: '100%', title: '100%' },
+      ],
       dynamicTitle: true,
     },
   },

frontend/.storybook/withVuetifyTheme.decorator.ts

@@ -1,16 +1,19 @@
 import { h } from 'vue'
-
-import StoryWrapper, { DEFAULT_THEME } from './StoryWrapper.vue'
+import StoryWrapper, { DEFAULT_THEME, DEFAULT_HEIGHT } from './StoryWrapper.vue'
 
 export const withVuetifyTheme = (storyFn, context) => {
   // Pull our global theme variable, fallback to DEFAULT_THEME
   const themeName = context.globals.theme || DEFAULT_THEME
+
+  // Check if story specific height is defined, otherwise use global height or default
+  const appHeight = context.parameters.appHeight || context.globals.appHeight || DEFAULT_HEIGHT
+
   const story = storyFn()
 
   return () => {
     return h(
       StoryWrapper,
-      { themeName }, // Props for StoryWrapper
+      { themeName, appHeight }, // Props for StoryWrapper
       {
         // Puts your story into StoryWrapper's "story" slot with your story args
         story: () => h(story, { ...context.args }),

frontend/src/components/menu/BottomMenu.stories.ts

@@ -5,7 +5,7 @@ import BottomMenu from './BottomMenu.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
-  title: 'Menu/BottomMenu',
+  title: 'ORGANISMS/BottomMenu',
   component: BottomMenu as SBComp,
   tags: ['autodocs'],
   argTypes: {},

frontend/src/components/menu/BottomMenu.test.ts

@@ -1,34 +1,61 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { h } from 'vue'
-import { VApp } from 'vuetify/components'
-
-import { useAuthStore } from '#stores/authStore.js'
-import { authService } from '#tests/mock.authService.js'
+import { createVuetify } from 'vuetify'
 
 import BottomMenu from './BottomMenu.vue'
-import UserDropdown from './UserDropdown.vue'
+import Circle from './CircleElement.vue'
+import ListWithNavigationDrawer from './ListWithNavigationDrawer.vue'
 
 describe('BottomMenu', () => {
-  const Wrapper = () => {
-    return mount(VApp, {
-      slots: {
-        default: h(BottomMenu),
-      },
-    })
-  }
-  let wrapper: ReturnType<typeof Wrapper>
+  let wrapper: VueWrapper<InstanceType<typeof BottomMenu>>
+  let toggleDrawer: ReturnType<typeof vi.fn>
+  const vuetify = createVuetify()
 
   beforeEach(() => {
-    wrapper = Wrapper()
+    toggleDrawer = vi.fn()
+    wrapper = mount(BottomMenu, {
+      global: {
+        plugins: [vuetify],
+        mocks: {
+          toggleDrawer,
+        },
+      },
+    })
   })
 
   it('renders BottomMenu', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
 
+  it('toggles drawer on Circle click', async () => {
+    await wrapper.findComponent(Circle).trigger('click')
+    expect(toggleDrawer).toHaveBeenCalled()
+    await flushPromises()
+    expect(wrapper.findComponent(ListWithNavigationDrawer).props('drawer')).toBe(true)
+  })
+
+  it('passes location prop to ListWithNavigationDrawer', () => {
+    const listWithNavigationDrawer = wrapper.findComponent(ListWithNavigationDrawer)
+    expect(listWithNavigationDrawer.props('location')).toBe('bottom')
+  })
+
+  it('handles item click and closes menu', async () => {
+    const listWithNavigationDrawer = wrapper.findComponent(ListWithNavigationDrawer)
+    const emitSpy = vi.spyOn(listWithNavigationDrawer.vm, '$emit')
+    await listWithNavigationDrawer.findAll('.custom-list-item')[0].trigger('click')
+    expect(emitSpy).toHaveBeenCalledWith('item-click', false)
+    // Hier können zusätzliche Tests hinzugefügt werden, um zu prüfen, ob das Menü geschlossen wird.
+  })
+
   describe('signout button', () => {
-    const authStore = useAuthStore()
+    const authStore = {
+      save: vi.fn(),
+      clear: vi.fn(),
+    }
+
+    const authService = {
+      signOut: vi.fn().mockResolvedValue('signed out'),
+    }
 
     const authServiceSpy = vi.spyOn(authService, 'signOut')
     const storeSpy = vi.spyOn(authStore, 'clear')
@@ -59,7 +86,7 @@ describe('BottomMenu', () => {
       beforeEach(async () => {
         await wrapper.find('button.user-info').trigger('click')
         await flushPromises()
-        await wrapper.findComponent(UserDropdown).find('button.sign-out').trigger('click')
+        await wrapper.find('button.sign-out').trigger('click')
       })
 
       it('calls auth service sign out', () => {
@@ -78,7 +105,7 @@ describe('BottomMenu', () => {
         authServiceSpy.mockRejectedValue('Error!')
         await wrapper.find('button.user-info').trigger('click')
         await flushPromises()
-        await wrapper.findComponent(UserDropdown).find('button.sign-out').trigger('click')
+        await wrapper.find('button.sign-out').trigger('click')
       })
 
       it('logs the error', () => {

frontend/src/components/menu/BottomMenu.vue

@@ -1,28 +1,49 @@
 <template>
-  <div
-    class="bottom-menu w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface"
-  >
-    <MessageIndicator :number-of-messages="3" />
-    <NewsIndicator :has-news="true" />
-    <Circle>
-      <v-icon icon="$camera"></v-icon>
-    </Circle>
-    <UserInfo />
+  <div>
+    <v-bottom-navigation>
+      <v-btn value="message">
+        <MessageIndicator :number-of-messages="3" />
+      </v-btn>
+      <v-btn value="news">
+        <NewsIndicator :has-news="true" />
+      </v-btn>
+      <v-btn value="rooms">
+        <Circle @click="toggleDrawer">
+          <v-icon icon="$camera"></v-icon>
+        </Circle>
+      </v-btn>
+      <v-btn value="rooms">
+        <UserInfo />
+      </v-btn>
+    </v-bottom-navigation>
+    <ListWithNavigationDrawer
+      :drawer="drawer"
+      :location="location"
+      @update:drawer="drawer = $event"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import Circle from './CircleElement.vue'
+import ListWithNavigationDrawer from './ListWithNavigationDrawer.vue'
 import MessageIndicator from './MessageIndicator.vue'
 import NewsIndicator from './NewsIndicator.vue'
 import UserInfo from './UserInfo.vue'
+
+const drawer = ref(false)
+
+const toggleDrawer = () => {
+  drawer.value = !drawer.value
+}
+
+const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('bottom')
 </script>
 
 <style scoped lang="scss">
-.bottom-menu {
-  bottom: 0;
-  background: var(--v-bottom-menu-background) !important;
-  backdrop-filter: blur(20px);
-  border-radius: 30px 30px 0 0;
+v-bottom-navigation {
+  z-index: 10;
 }
 </style>