pull/5880/head
Mert Sincan 2024-06-11 23:26:03 +01:00
commit 8b6cc1b060
4 changed files with 38 additions and 44 deletions

View File

@ -25,16 +25,15 @@
</SelectButton>
</div>
<div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full rounded-3xl p-0 flex lg:hidden items-start gap-6 overflow-hidden">
<img :src="selectedSampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" alt="Hero" />
<template v-for="sampleOption of sampleOptions" :key="sampleOption.title">
<img v-if="selectedSampleOption.title === sampleOption.title" :src="sampleOption.src + (isDark() ? '-dark.jpg' : '.jpg')" class="w-full" />
</template>
</div>
<div class="bg-surface-0 border border-black/10 dark:border-white/20 dark:bg-surface-950 w-full h-[85vh] max-h-[1040px] rounded-3xl p-6 hidden lg:flex lg:mt-20 items-start gap-6 overflow-hidden">
<div :class="isSlimMenu ? 'w-auto' : 'w-72'" class="rounded-2xl p-5 bg-surface-50 dark:bg-surface-900 h-full flex flex-col justify-between">
<div :class="isSlimMenu ? 'w-12 flex flex-col items-center' : 'w-auto'">
<div class="flex items-center gap-3">
<div class="w-11 h-11">
<span
class="bg-surface-950 dark:bg-surface-0 rounded-xl flex items-center justify-center p-2 drop-shadow-[0px_2px_0px_var(--p-surface-700)] dark:drop-shadow-[0px_2px_0px_var(--p-surface-100)] shadow-[0px_0px_3px_0px_rgba(188, 190, 195, 0.64)_inset]"
>
<div class="w-11 h-11 bg-surface-950 dark:bg-surface-0 rounded-xl flex items-center justify-center">
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.65 11.0645L13.1283 10.7253L14.3119 12.4216V17.6803L18.3698 14.2876V8.52002L16.5099 9.19856L14.65 11.0645Z" class="fill-surface-0 dark:fill-surface-950" />
<path d="M5.18078 11.0645L6.70251 10.7253L5.51894 12.4216V17.6803L1.46098 14.2876V8.52002L3.32088 9.19856L5.18078 11.0645Z" class="fill-surface-0 dark:fill-surface-950" />
@ -57,7 +56,6 @@
<path d="M13.8041 3.60283L17.3548 3.26356L14.9876 0.888672H12.6205L13.8041 3.60283Z" class="fill-surface-0 dark:fill-surface-950" />
<path d="M6.02676 3.60283L2.47604 3.26356L4.84318 0.888672H7.21033L6.02676 3.60283Z" class="fill-surface-0 dark:fill-surface-950" />
</svg>
</span>
</div>
<div :class="isSlimMenu ? 'hidden' : 'block'" class="text-surface-950 dark:text-surface-0 font-medium text-3xl">Prime</div>
</div>
@ -94,7 +92,7 @@
}
]"
>
<a @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none">
<a v-if="false" @click="toggleSlimMenu" class="cursor-pointer block p-0 m-0 leading-none">
<i :class="isSlimMenu ? 'pi pi-window-maximize' : 'pi pi-window-minimize'"></i>
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-8'"></span>
<span :class="isSlimMenu ? 'hidden' : 'font-medium leading-none'"> Slim Mode</span>
@ -155,7 +153,7 @@ export default {
{ icon: 'pi pi-cog', title: 'Settings' }
],
selectedSampleAppsSidebarNav: 'Overview',
isSlimMenu: false,
isSlimMenu: true,
isSlimMenuSelected: false,
sampleOptions: [
{ icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' },
@ -167,14 +165,14 @@ export default {
],
selectedSampleOption: { icon: 'pi pi-home', title: 'Overview', src: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/sampleshots/overview' }
};
},
} /*,
beforeUnmount() {
window.removeEventListener('resize', this.handleResize);
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
},*/,
methods: {
setSelectedSampleAppsSidebarNav(title) {
this.selectedSampleAppsSidebarNav = title;
@ -190,10 +188,6 @@ export default {
toggleSlimMenu() {
this.isSlimMenu = !this.isSlimMenu;
this.isSlimMenuSelected = this.isSlimMenu;
},
changeMenu() {
this.isSlimMenu = !this.isSlimMenu;
this.isSlimMenuSelected = this.isSlimMenu;
}
}
};

View File

@ -85,7 +85,7 @@
<Column field="more" header="More">
<template #body>
<div class="flex justify-end w-full">
<Button @click="visibleRight = true" icon="pi pi-ellipsis-h" outlined severity="secondary" />
<Button @click="visibleRight = true" icon="pi pi-ellipsis-h" rounded outlined severity="secondary" />
</div>
</template>
</Column>

View File

@ -143,14 +143,14 @@ export default {
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', watchedPercent: 70, categories: ['Mystery', 'Thriller'] }
],
popularMovies: [
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.7', categories: ['Crime', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.7', categories: ['Drama', 'War'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.7', categories: ['Crime', 'Drama', 'Mystery'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover7.png', name: 'Twelve Angry Men', bookmarked: false, point: '4.6', categories: ['Crime', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover8.png', name: 'Saving Private Ryan', bookmarked: true, point: '4.4', categories: ['Drama', 'War'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover9.png', name: 'Seven', bookmarked: false, point: '4.3', categories: ['Crime', 'Drama', 'Mystery'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover10.png', name: 'Shutter Island', bookmarked: false, point: '4.7', categories: ['Mystery', 'Thriller'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.7', categories: ['Drama', 'Mystery', 'Thriller'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover11.png', name: 'Basic Instinct', bookmarked: true, point: '4.3', categories: ['Drama', 'Mystery', 'Thriller'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover12.png', name: 'Big Hero 6', bookmarked: false, point: '4.7', categories: ['Animation', 'Action', 'Adventure'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.7', categories: ['Action', 'Adventure', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.7', categories: ['Action', 'Crime', 'Thriller'] }
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover13.png', name: 'The Lord Of The Rings: Fellowship of the ring', bookmarked: true, point: '4.9', categories: ['Action', 'Adventure', 'Drama'] },
{ image: 'https://www.primefaces.org/cdn/primevue/images/landing/apps/movie-cover14.png', name: 'Kill Bill', bookmarked: true, point: '4.5', categories: ['Action', 'Crime', 'Thriller'] }
]
};
},

View File

@ -3,7 +3,7 @@
<div class="flex flex-wrap gap-4 items-start justify-between">
<div class="flex-1">
<div class="text-muted-color font-medium leading-normal">Overview</div>
<div class="text-color text-3xl font-semibold leading-normal">Good Morning, Robin 👋</div>
<div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
</div>
<div class="flex gap-2 whitespace-nowrap flex-nowrap">
<IconField iconPosition="left">