Initial commit
This commit is contained in:
Bahadır Sofuoğlu
251
src/layout/AppConfig.vue
Normal file
251
src/layout/AppConfig.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
|
||||
<i class="pi pi-cog"></i>
|
||||
</button>
|
||||
|
||||
<Sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
|
||||
<h5>Scale</h5>
|
||||
<div class="flex align-items-center">
|
||||
<button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="scale === scales[0]"></button>
|
||||
<div class="flex gap-2 align-items-center">
|
||||
<i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === scale }"></i>
|
||||
</div>
|
||||
<button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="scale === scales[scales.length - 1]"></button>
|
||||
</div>
|
||||
|
||||
<template v-if="!minimal">
|
||||
<h5>Menu Type</h5>
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></RadioButton>
|
||||
<label for="mode1">Static</label>
|
||||
</div>
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></RadioButton>
|
||||
<label for="mode2">Overlay</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="!minimal">
|
||||
<h5>Input Style</h5>
|
||||
<div class="flex">
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></RadioButton>
|
||||
<label for="outlined_input">Outlined</label>
|
||||
</div>
|
||||
<div class="field-radiobutton flex-1">
|
||||
<RadioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></RadioButton>
|
||||
<label for="filled_input">Filled</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Ripple Effect</h5>
|
||||
<InputSwitch [(ngModel)]="ripple"></InputSwitch>
|
||||
</template>
|
||||
|
||||
<h5>Bootstrap</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-light-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('bootstrap4-dark-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-light-deeppurple', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('md-dark-deeppurple', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Material Design Compact</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-light-deeppurple', 'light')">
|
||||
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('mdc-dark-deeppurple', 'dark')">
|
||||
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Tailwind</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('tailwind-light', 'light')">
|
||||
<img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Fluent UI</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('fluent-light', 'light')">
|
||||
<img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2022</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-indigo', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-light-teal', 'light')">
|
||||
<img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-indigo', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('lara-dark-teal', 'dark')">
|
||||
<img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2021</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-blue', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-green', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-orange', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('saga-purple', 'light')">
|
||||
<img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-green', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-orange', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('vela-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-blue', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-green', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-orange', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button class="p-link w-2rem h-2rem" @click="changeTheme('arya-purple', 'dark')">
|
||||
<img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const scales = ref([12, 13, 14, 15, 16]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
9
src/layout/AppFooter.vue
Normal file
9
src/layout/AppFooter.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="layout-footer">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Logo" height="20" class="mr-2" />
|
||||
by
|
||||
<span class="font-medium ml-2">PrimeNG</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
25
src/layout/AppLayout.vue
Normal file
25
src/layout/AppLayout.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="layout-wrapper">
|
||||
<app-topbar></app-topbar>
|
||||
<div class="layout-sidebar">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>
|
||||
<div class="layout-main-container">
|
||||
<div class="layout-main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
<app-config></app-config>
|
||||
<div class="layout-mask"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AppTopbar from './AppTopbar.vue';
|
||||
import AppFooter from './AppFooter.vue';
|
||||
import AppSidebar from './AppSidebar.vue';
|
||||
import AppConfig from './AppConfig.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
176
src/layout/AppMenu.vue
Normal file
176
src/layout/AppMenu.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import AppMenuItem from './AppMenuItem.vue';
|
||||
|
||||
const model = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
|
||||
{ label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
|
||||
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu', preventExact: true },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Prime Blocks',
|
||||
items: [
|
||||
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
|
||||
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-react', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Utilities',
|
||||
items: [
|
||||
{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
|
||||
{ label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
icon: 'pi pi-fw pi-briefcase',
|
||||
to: '/pages',
|
||||
items: [
|
||||
{
|
||||
label: 'Landing',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
to: '/landing'
|
||||
},
|
||||
{
|
||||
label: 'Auth',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'pi pi-fw pi-sign-in',
|
||||
to: '/auth/login'
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
icon: 'pi pi-fw pi-times-circle',
|
||||
to: '/auth/error'
|
||||
},
|
||||
{
|
||||
label: 'Access Denied',
|
||||
icon: 'pi pi-fw pi-lock',
|
||||
to: '/auth/access'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Crud',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
to: '/pages/crud'
|
||||
},
|
||||
{
|
||||
label: 'Timeline',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
to: '/pages/timeline'
|
||||
},
|
||||
{
|
||||
label: 'Not Found',
|
||||
icon: 'pi pi-fw pi-exclamation-circle',
|
||||
to: '/pages/notfound'
|
||||
},
|
||||
{
|
||||
label: 'Empty',
|
||||
icon: 'pi pi-fw pi-circle-off',
|
||||
to: '/pages/empty'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Get Started',
|
||||
items: [
|
||||
{
|
||||
label: 'Documentation',
|
||||
icon: 'pi pi-fw pi-question',
|
||||
to: '/documentation'
|
||||
},
|
||||
{
|
||||
label: 'View Source',
|
||||
icon: 'pi pi-fw pi-search',
|
||||
url: 'https://github.com/primefaces/sakai-react',
|
||||
target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="layout-menu">
|
||||
<template v-for="(item, i) in model" :key="item">
|
||||
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
|
||||
<li v-if="item.separator" class="menu-separator"></li>
|
||||
</template>
|
||||
<li>
|
||||
<a href="https://www.primefaces.org/primeblocks-ng/#/">
|
||||
<img src="assets/layout/images/.png" alt="Prime Blocks" class="w-full mt-3" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
41
src/layout/AppMenuItem.vue
Normal file
41
src/layout/AppMenuItem.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
root: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li :class="{ 'layout-root-menuitem': root, 'active-menuitem': active }">
|
||||
<div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
|
||||
<a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event)" :class="item.class" :target="item.target" tabindex="0">
|
||||
<i :class="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{ item.label }}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
|
||||
</a>
|
||||
<a v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="item.class" tabindex="0" :to="item.to">
|
||||
<i :class="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span class="layout-menuitem-text">{{ item.label }}</span>
|
||||
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
|
||||
</a>
|
||||
<ul v-if="item.items && item.visible !== false">
|
||||
<app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
9
src/layout/AppSidebar.vue
Normal file
9
src/layout/AppSidebar.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup>
|
||||
import AppMenu from './AppMenu.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<app-menu></app-menu>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
35
src/layout/AppTopbar.vue
Normal file
35
src/layout/AppTopbar.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="layout-topbar">
|
||||
<a class="layout-topbar-logo">
|
||||
<img src="assets/layout/images/.svg" alt="logo" />
|
||||
<span>SAKAI</span>
|
||||
</a>
|
||||
|
||||
<button class="p-link layout-menu-button layout-topbar-button">
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
|
||||
<button class="p-link layout-topbar-menu-button layout-topbar-button">
|
||||
<i class="pi pi-ellipsis-v"></i>
|
||||
</button>
|
||||
|
||||
<div class="layout-topbar-menu">
|
||||
<button class="p-link layout-topbar-button">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Calendar</span>
|
||||
</button>
|
||||
<button class="p-link layout-topbar-button">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Profile</span>
|
||||
</button>
|
||||
<button class="p-link layout-topbar-button">
|
||||
<i class="pi pi-cog"></i>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user