Timothy Yin
6221602d5e
- Updated Container.vue to import SubNavItem from Secondary.vue and renamed component usage. - Removed NavMain.vue and NavUser.vue components, consolidating sidebar functionality. - Deleted Sidebar.vue and created a new sidebar structure in index.vue. - Implemented new Main.vue and User.vue components under sidebar/nav for better organization. - Added DPlayer for video playback in preview page and adjusted layout accordingly. - Introduced new course Card.vue component for displaying course information. - Created Secondary.vue for secondary navigation with improved styling and functionality. - Updated package.json to include dplayer and its types for video handling.
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import type { LucideIcon } from 'lucide-vue-next'
|
|
import type { RouteLocationRaw } from 'vue-router'
|
|
import type { SidebarProps } from '~/components/ui/sidebar'
|
|
|
|
export interface SidebarNavItem {
|
|
title: string
|
|
url?: string | RouteLocationRaw
|
|
icon: LucideIcon | string
|
|
isActive?: boolean
|
|
isExternal?: boolean
|
|
items?: {
|
|
title: string
|
|
url: string
|
|
}[]
|
|
}
|
|
|
|
export interface SidebarNavGroup {
|
|
label?: string
|
|
items: SidebarNavItem[]
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<
|
|
SidebarProps & {
|
|
nav: SidebarNavGroup[]
|
|
}
|
|
>(),
|
|
{
|
|
collapsible: 'offcanvas',
|
|
variant: 'sidebar',
|
|
},
|
|
)
|
|
|
|
const loginState = useLoginState()
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar v-bind="props">
|
|
<SidebarHeader>
|
|
<div
|
|
class="flex h-12 justify-center items-center gap-2 rounded truncate group-has-[[data-collapsible=icon]]/sidebar-wrapper:justify-start transition-all duration-200 ease-in-out"
|
|
>
|
|
<img
|
|
src="/images/xsh_logo.png"
|
|
alt="Logo"
|
|
class="w-9 max-w-9 aspect-square group-has-[[data-collapsible=icon]]/sidebar-wrapper:w-full transition-all duration-200 ease-in-out"
|
|
/>
|
|
<h1 class="text-lg font-medium">智课教学平台</h1>
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<slot name="extra-header" />
|
|
<AppSidebarNavMain :nav="nav" />
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<AppSidebarNavUser :user="loginState.user" />
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|
|
|
|
<style scoped></style>
|