fix style

dreammall-earth · Jun 27, 2024 · 6a40561 · 6a40561
1 parent 3cb1728
commit 6a40561
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue
@@ -25,11 +25,11 @@
       </v-row>
     </v-app-bar>
   </div>
-  <ListWithNavigationDrawer
-    :drawer="drawer"
-    :location="location"
-    @update:drawer="updateDrawer($event)"
-  />
+    <ListWithNavigationDrawer
+      :drawer="drawer"
+      :location="location"
+      @update:drawer="updateDrawer"
+    />
 </template>
 
 <script lang="ts" setup>
@@ -41,27 +41,28 @@ import NewsIndicator from '#components/menu/NewsIndicator.vue'
 import TabControl from '#components/menu/TabControl.vue'
 import UserInfo from '#components/menu/UserInfo.vue'
 import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
-
 import Circle from './CircleElement.vue'
 
 const drawer = ref(false)
 const toggleDrawer = () => {
   drawer.value = !drawer.value
 }
-const updateDrawer = (event: boolean) => {
-  drawer.value = event
+const updateDrawer = (value: boolean) => {
+  drawer.value = value
 }
 const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('right')
 </script>
 
 <style scoped lang="scss">
 .app-bar {
-  position: static !important;
+  position: sticky;
+  top: 0;
   background: transparent !important;
 }
 
 .top-menu {
   position: sticky;
   top: 0;
+  z-index: 1000;
 }
 </style>
diff --git a/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.vue b/frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- <NavigationDrawer :model-value="drawer" :location="location" @update:model-value="updateDrawer"> -->
-  <v-navigation-drawer :model-value="drawer" :location="location">
+  <v-navigation-drawer :model-value="drawer" :location="location" @update:model-value="updateDrawer" app width="auto" class="menu-drawer-top">
     <SearchField
       v-model="search"
       label="Open Tables, Jobs"
@@ -11,18 +10,16 @@
       <ListElement :items="filteredItems" />
     </v-list>
   </v-navigation-drawer>
-  <!-- </NavigationDrawer> -->
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineProps } from 'vue'
+import { ref, computed } from 'vue'
 import { VAvatar, VIcon, VImg } from 'vuetify/components'
 
 import ListElement from '#components/vuetify/Atoms/ListElement.vue'
-// import NavigationDrawer from '#components/vuetify/Atoms/NavigationDrawer.vue'
 import SearchField from '#components/vuetify/Molecules/SearchField.vue'
 
-defineProps({
+const props = defineProps({
   drawer: {
     type: Boolean,
     required: true,
@@ -33,7 +30,9 @@ defineProps({
     default: 'right',
   },
 })
-// const emits = defineEmits(['update:drawer'])
+
+const emits = defineEmits(['update:drawer'])
+
 const search = ref('')
 const items = [
   {
@@ -118,10 +117,20 @@ const items = [
     appendProps: { icon: 'mdi-dots-vertical', class: 'append-icon' },
   },
 ]
+
 const filteredItems = computed(() => {
   if (!search.value) {
     return items
   }
   return items.filter((item) => item.title.toLowerCase().includes(search.value.toLowerCase()))
 })
+
+const updateDrawer = (value: boolean) => {
+  emits('update:drawer', value)
+}
 </script>
+<style scoped>
+.menu-drawer-top {
+  margin-top: 74px;
+}
+</style>