chore: init read-star monorepo

apps/user/src/layouts/modules/global-sider/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app'
+import { useAppStore } from '@/store/modules/app'
+import { useThemeStore } from '@/store/modules/theme'
+import GlobalLogo from '../global-logo/index.vue'
+
+defineOptions({
+  name: 'GlobalSider',
+})
+
+const appStore = useAppStore()
+const themeStore = useThemeStore()
+
+const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first')
+const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first')
+const darkMenu = computed(
+  () =>
+    !themeStore.darkMode && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value && themeStore.sider.inverted,
+)
+const showLogo = computed(() => themeStore.layout.mode === 'vertical')
+const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'))
+</script>
+
+<template>
+  <DarkModeContainer class="size-full flex-col-stretch shadow-sider" :inverted="darkMenu">
+    <GlobalLogo
+      v-if="showLogo"
+      :show-title="!appStore.siderCollapse"
+      :style="{ height: `${themeStore.header.height}px` }"
+    />
+    <div :id="GLOBAL_SIDER_MENU_ID" :class="menuWrapperClass" />
+  </DarkModeContainer>
+</template>
+
+<style scoped></style>