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.
105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<script lang="ts">
|
|
export interface SubNavItem {
|
|
label: string
|
|
to: string
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{
|
|
navs: SubNavItem[]
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
|
|
const isCurrentPath = (path: string) => {
|
|
return route.path === path
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-end ml-4 z-0">
|
|
<div
|
|
v-for="(nav, i) in navs"
|
|
:key="i"
|
|
class="subnav-item"
|
|
:class="`${isCurrentPath(nav.to) ? 'active' : ''}`"
|
|
:style="{
|
|
'z-index': isCurrentPath(nav.to) ? 10 : -i,
|
|
}"
|
|
>
|
|
<svg
|
|
class="absolute inset-0 aspect-auto top-1"
|
|
viewBox="0 0 206.5 72"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
:id="`paint_linear_${i}`"
|
|
gradient-units="objectBoundingBox"
|
|
x1="0.5"
|
|
y1="0"
|
|
x2="0.5"
|
|
y2="1"
|
|
>
|
|
<stop stop-color="var(--svg-stop1)" />
|
|
<stop
|
|
offset="1"
|
|
stop-color="var(--svg-stop2)"
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<g>
|
|
<path
|
|
id="subnav_item_active"
|
|
d="M51.9 0L154.6 0C172.19 0 187.72 11.48 192.86 28.31L206.5 72L0 72L13.35 28.31C18.49 11.48 34.02 0 51.9 0Z"
|
|
:fill="`url(#paint_linear_${i})`"
|
|
fill-opacity="1.000000"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<NuxtLink
|
|
class="text-base font-medium z-10 select-none pb-0.5"
|
|
:class="{
|
|
'text-secondary': isCurrentPath(nav.to),
|
|
'text-neutral-400 dark:text-neutral-500': !isCurrentPath(nav.to),
|
|
}"
|
|
:to="nav.to"
|
|
>
|
|
{{ nav.label }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.subnav-item {
|
|
@apply relative flex justify-center items-center px-5 pt-2 drop-shadow-lg;
|
|
|
|
--svg-stop1: #ffffff;
|
|
--svg-stop2: #f3f3f3;
|
|
|
|
&:not(:first-of-type) {
|
|
@apply -ml-4;
|
|
}
|
|
|
|
&.active {
|
|
--svg-stop1: #6059f4;
|
|
--svg-stop2: #8e59f4;
|
|
}
|
|
}
|
|
|
|
.dark .subnav-item {
|
|
--svg-stop1: #000000;
|
|
--svg-stop2: #0c0c0c;
|
|
|
|
&.active {
|
|
--svg-stop1: #6d7ca6;
|
|
--svg-stop2: #6f6da6;
|
|
}
|
|
}
|
|
</style>
|