boursecu_admin/src/core/layouts/BaseSideMenu.vue

<template>
  <!--  :class="[, isMobile ? null : 'shadow']"-->
  <!--  :theme="sideTheme"-->
  <ALayoutSider
    :theme="menuTheme"
    :class="[prefixCls]"
    :width="layoutStore.sideMenu.width"
    :collapsible="layoutStore.sideMenu.collapsible"
    :collapsedWidth="layoutStore.sideMenu.collapsedWidth"
    v-model:collapsed="layoutStore.sideMenu.collapsed"
    :trigger="null"
  >
    <div
      class="flex items-center logo px-4 py-2 gap-3"
      :style="`height:calc(${layoutStore.header.height} - 1px );min-height:calc(${layoutStore.header.height} - 1px )`"
    >
      <img src="@/assets/img/saminLogo_.png" class="object-cover" style="max-height: 32px" alt="" />

      <!--      <img src="@/assets/img/logo.svg" class="object-cover w-full" style="max-height: 32px" />-->
      <!--      <h1 class="contents">پنل مدیریتی</h1>-->
      <!--      11111-->
      <!--      <router-link to="/myDocuments/workplace">
        <img src="@/assets/img/logo.png" />
        <h1>{{ systemName }}</h1>
      </router-link>-->
    </div>

    <BasicMenu class="flex-1 overflow-scroll scroll-none" />
    <!--    <div class="side-version text-center flex flex-col text-xs text-slate-400 items-center">
      <span>نسخه {{ version() }}</span>
      <span class="flex text-center gap-1 justify-center">
        <span>نسخه core</span>
        <span>{{ coreVersion() }}</span>
      </span>
    </div>-->
    <!--    <i-menu
      :theme="theme"
      :collapsed="collapsed"
      :options="menuData"
      @select="onSelect"
      class="menu"
    />-->

    <!--        v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    theme="dark"-->
    <!--    <AMenu :inline-collapsed="layoutStore.sideMenu.collapsed" mode="inline" v-if="false">
      <AMenuItem key="1">
        <template #icon>
          <span>111</span>
          &lt;!&ndash;          <PieChartOutlined />&ndash;&gt;
        </template>
        <span>پیشخوان</span>
      </AMenuItem>
      <AMenuItem key="2">
        <template #icon>
          <span>1111</span>
          <DesktopOutlined />
        </template>
        <span>Option 2</span>
      </AMenuItem>
      <AMenuItem key="3">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>Option 3</span>
      </AMenuItem>
      <ASubMenu key="sub1">
        <template #icon>
          <MailOutlined />
        </template>
        <template #title>Navigation One</template>
        <AMenuItem key="5">Option 5</AMenuItem>
        <AMenuItem key="6">Option 6</AMenuItem>
        <AMenuItem key="7">Option 7</AMenuItem>
        <AMenuItem key="8">Option 8</AMenuItem>
      </ASubMenu>
      <ASubMenu key="sub2">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>Navigation Two</template>
        <AMenuItem key="9">Option 9</AMenuItem>
        <AMenuItem key="10">Option 10</AMenuItem>
        <ASubMenu key="sub3" title="Submenu">
          <AMenuItem key="11">Option 11</AMenuItem>
          <AMenuItem key="12">Option 12</AMenuItem>
        </ASubMenu>
      </ASubMenu>
    </AMenu>-->
  </ALayoutSider>
</template>

<script lang="ts" setup>
import { useLayoutStore } from '@core/stores/layout'
import { usePrefix } from '@core/composable/usePrefix'
import BasicMenu from '@core/layouts/composnts/BasicMenu.vue'
import { useAdminTheme } from '@core/composable/useAdminTheme'
//import { coreVersion, version } from '../utils'
//import { isDate } from 'lodash'
const layoutStore = useLayoutStore()
const { prefixCls } = usePrefix('basic-side-menu')
const { menuTheme } = useAdminTheme()
</script>

<style lang="less">
@prefix:~ '@{prefixCls}-basic-side-menu';

.@{prefix}{

/*  & ul{
    display: none;
  }*/


  /*background-color: antiquewhite;*/
  position: fixed;
  height: 100vh;
  right: 0;
  top: 0;

  .ant-layout-sider-children{
    display: flex;
    flex-direction: column;
  }

  .logo{
    border-bottom: 1px solid var(--admin-border);
    overflow: hidden;
    transition: all 0.3s;
  }

  .side-version{
    border-top: 1px solid var(--admin-border);
    @apply p-2;
    max-height: 50px
  }

}
</style>