69 lines
1.7 KiB
Vue
Executable File
69 lines
1.7 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useDisplay } from 'vuetify';
|
|
const { xs, lgAndUp } = useDisplay();
|
|
const sDrawer = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<!---/Left chat list -->
|
|
<div class="d-flex mainbox rounded-md">
|
|
<div class="left-part" v-if="lgAndUp">
|
|
<!-- <perfect-scrollbar style="height: calc(100vh - 290px)"> -->
|
|
<slot name="leftpart"></slot>
|
|
<!-- </perfect-scrollbar> -->
|
|
</div>
|
|
|
|
<!---right chat conversation -->
|
|
<div class="right-part">
|
|
<!---Toggle Button For mobile-->
|
|
<v-btn block @click="sDrawer = !sDrawer" variant="text" class="d-lg-none d-md-flex d-sm-flex">
|
|
<Menu2Icon size="20" class="mr-2" /> Menu
|
|
</v-btn>
|
|
<v-divider class="d-lg-none d-block" />
|
|
<slot name="rightpart"></slot>
|
|
</div>
|
|
|
|
<!---right chat conversation -->
|
|
</div>
|
|
|
|
<v-navigation-drawer temporary v-model="sDrawer" width="320" top v-if="!lgAndUp">
|
|
<v-card-text class="pa-0">
|
|
<slot name="mobileLeftContent"></slot>
|
|
</v-card-text>
|
|
</v-navigation-drawer>
|
|
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.mainbox {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.left-part {
|
|
width: 320px;
|
|
border-inline-end-width: thin !important;
|
|
border-inline-end-style: solid !important;
|
|
border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
|
min-height: 500px;
|
|
transition: 0.1s ease-in;
|
|
flex-shrink: 0;
|
|
}
|
|
.v-theme--light {
|
|
.left-part {
|
|
background: white;
|
|
}
|
|
}
|
|
.v-theme--dark {
|
|
.left-part {
|
|
background: #2b2b2b;
|
|
}
|
|
}
|
|
|
|
|
|
.right-part{
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|