purityselect/resources/js/@layouts/components/VerticalNav.vue

<script setup>
import axios from '@axios';
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
import { useDisplay } from 'vuetify';
const currentUser = ref(localStorage.getItem('user_role'));
const seetingPlanLogo = ref();
const props = defineProps({
    tag: {
        type: [
            String,
            null,
        ],
        required: false,
        default: 'aside',
    },
    isOverlayNavActive: {
        type: Boolean,
        required: true,
    },
    toggleIsOverlayNavActive: {
        type: Function,
        required: true,
    },
})

const { mdAndDown } = useDisplay()
const refNav = ref()
const route = useRoute()

watch(() => route.path, () => {
    props.toggleIsOverlayNavActive(false)
})
onMounted(async () => {


    let setting = await axios.post('/api/settings', {})
    // console.log(setting.data)
    seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
})
const isVerticalNavScrolled = ref(false)
const updateIsVerticalNavScrolled = val => isVerticalNavScrolled.value = val

const handleNavScroll = evt => {
    isVerticalNavScrolled.value = evt.target.scrollTop > 0
}
</script>

<template>
    <Component :is="props.tag" ref="refNav" class="layout-vertical-nav" :class="[
        {
            'visible': isOverlayNavActive,
            'scrolled': isVerticalNavScrolled,
            'overlay-nav': mdAndDown,
        },
    ]">
        <!-- 👉 Header -->
        <div class="nav-header px-0 py-3">
            <slot name="nav-header">
                <RouterLink to="/provider/dashboard" v-if="currentUser == 'agent'"
                    class="app-logo d-flex align-center gap-x-3 app-title-wrapper">
                    <!-- <div class="d-flex " /> -->


                    <h1 class="leading-normal text-primary">
                        <VImg :src="seetingPlanLogo" width="150" height="50" class="logo-img" />
                    </h1>
                </RouterLink>
                <RouterLink to="/" v-if="currentUser == 'patient'"
                    class="app-logo d-flex align-center gap-x-3 app-title-wrapper">
                    <!-- <div class="d-flex " /> -->

                    <h1 class="leading-normal text-primary" style="margin-right: 27px;">
                        <VImg :src="seetingPlanLogo" width="150" height="50" class="logo-img" />
                    </h1>
                </RouterLink>
            </slot>
        </div>
        <slot name="before-nav-items">
            <div class="vertical-nav-items-shadow" />
        </slot>
        <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
            <PerfectScrollbar tag="ul" class="nav-items" :options="{ wheelPropagation: false }"
                @ps-scroll-y="handleNavScroll">
                <slot />
            </PerfectScrollbar>
        </slot>

        <slot name="after-nav-items" />
    </Component>
</template>

<style lang="scss">
@use "@configured-variables" as variables;
@use "@layouts/styles/mixins";

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto
}


.nav-header.px-0.py-3 {
    margin: 1px 45px !important;
}

.layout-nav-type-vertical .layout-vertical-nav .nav-link .router-link-exact-active:after,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active:not(.nav-group .nav-group)>:first-child:after {
    position: absolute;
    background-color: rgb(var(--v-theme-yellow-theme-button)) !important;
    block-size: 2.625rem;
    border-end-start-radius: .375rem;
    border-start-start-radius: .375rem;
    content: "";
    inline-size: .25rem;
    inset-inline-end: -1rem;

}

.nav-header {
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
}

// 👉 Vertical Nav
.layout-vertical-nav {
    position: fixed;
    z-index: variables.$layout-vertical-nav-z-index;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: variables.$layout-vertical-nav-width;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    will-change: transform, inline-size;
    background-color: rgb(var(--v-theme-yellow)) !important;

    .nav-header {
        display: flex;
        align-items: center;

        .header-action {
            cursor: pointer;
        }
    }

    .app-title-wrapper {
        margin-inline-end: auto;
    }

    .nav-items {
        block-size: 100%;
        padding-left: 0px;
        // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
        // overflow-x: hidden;

        // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
        // overflow-y: auto;
    }

    .nav-item-title {
        overflow: hidden;
        margin-inline-end: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // 👉 Collapsed
    .layout-vertical-nav-collapsed & {
        &:not(.hovered) {
            inline-size: variables.$layout-vertical-nav-collapsed-width;
        }
    }

    // 👉 Overlay nav
    &.overlay-nav {
        &:not(.visible) {
            transform: translateX(-#{variables.$layout-vertical-nav-width});

            @include mixins.rtl {
                transform: translateX(variables.$layout-vertical-nav-width);
            }
        }
    }
}
</style>