alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:side bar

Browse Source
product
Alireza Hassani 4 years ago
parent 479712e7a8
commit fa14529fb2
2 changed files with 371 additions and 286 deletions
Show Stats Download Patch File Download Diff File

174
resources/js/Global/components/Drawer/SideBar.vue
Unescape View File

@ -15,7 +15,7 @@
</div>--> </div>-->
</v-container> </v-container>
<v-navigation-drawer v-model="drawer" app temporary right width="320"> <v-navigation-drawer v-model="drawer" app temporary right width="420">
<v-list class="pa-1"> <v-list class="pa-1">
<div class="row user-info"> <div class="row user-info">
<v-flex lg9 class="pa-3"> <v-flex lg9 class="pa-3">
@ -48,16 +48,40 @@
</template> </template>
</a> </a>
</v-list> </v-list>
<div class="footer">
<div class="flex-justified-space-between links">
<div class="flex-justified-right texts">
<a href="https://www.willaarts.ir/ContactUs" class="WM-Link"> تماس با ما </a>
<a href="https://www.willaarts.ir/AboutUs" class="WM-Link"> درباره ی ما </a>
<a href="https://www.willaarts.ir/FAQ" class="WM-Link"> سوالات متداول </a>
</div>
<div class="social-media flex-justified-left">
<a href="https://www.aparat.com/WillaArts" class="WM-Link"> <v-icon>WMi-aparat</v-icon> </a>
<a href="https://www.instagram.com/willaarts.ir/" class="WM-Link"> <v-icon>WMi-instagram-2</v-icon> </a>
<a href="https://www.linkedin.com/in/willaartsgroup/" class="WM-Link"> <v-icon>WMi-linkedin-1</v-icon> </a>
</div>
</div>
<a href="https://www.willaarts.ir/ContactUs" class="WM-Link">
<div class="flex-justified-center water-mark">
<v-icon class="text--32">WMi-willa-engine</v-icon>
<div class="text-right">
<div class="Fa"> قدرت گرفته از سیستم ویـــــلااِنجین </div>
<div class="En"> Powered By WillaEngine IMS </div>
</div>
</div>
</a>
</div>
</v-navigation-drawer> </v-navigation-drawer>
</v-layout> </v-layout>
</template> </template>
<script> <script>
import Tile from "@Global/components/Drawer/Tile"; import Tile from "@Global/components/Drawer/Tile";
import Notifications from "@Global/components/Drawer/Notifications"; import Notifications from "@Global/components/Drawer/Notifications";
import Routes from "@Global/utils/common/routes"; import Routes from "@Global/utils/common/routes";
import { mapActions, mapGetters } from "vuex"; import { mapActions, mapGetters } from "vuex";
export default { export default {
data() { data() {
return { return {
fav: true, fav: true,
@ -66,14 +90,14 @@ export default {
hints: true, hints: true,
drawer: false, drawer: false,
Items: [ Items: [
{ titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/profile' }, { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/dashboard' },
{ {
titleEn: " My Users ", titleEn: " My Users ",
titleFa: " کاربران مجموعه ی من ", titleFa: " کاربران مجموعه ی من ",
icon: "users", icon: "users",
permissionClass: "User::index", permissionClass: "User::index",
module: "core", module: "core",
href: Routes.user(), href: '/user/home',
tileClass: 'red-theme', tileClass: 'red-theme',
}, },
{ {
@ -123,99 +147,151 @@ export default {
...mapGetters("rolePermission", ["getModules"]), ...mapGetters("rolePermission", ["getModules"]),
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-info .Title { .user-info .Title {
float: right; float: right;
} }
.user-info .Avatar { .user-info .Avatar {
float: right; float: right;
width: 48px; width: 48px;
margin: 0px 10px; margin: 0px 10px;
} }
.user-info .Title .Name { .user-info .Title .Name {
font-size: 14px; font-size: 14px;
} }
.Header .Menu { .Header .Menu {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;
} }
.Header .Home { .Header .Home {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 20px; top: 20px;
} }
.Header .Name { .Header .Name {
position: absolute; position: absolute;
right: 80px; right: 80px;
top: 20px; top: 20px;
color: #fff; color: #fff;
line-height: 18px; line-height: 18px;
} }
.Notification { .Notification {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 20px;
} }
.Divider { .Divider {
margin: 0px; margin: 0px;
} }
.Name { .Name {
font-size: 16px; font-size: 16px;
} }
.Role { .Role {
font-size: 14px; font-size: 14px;
color: #aaaaaa; color: #aaaaaa;
} }
.Time { .Time {
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.Time .En { .Time .En {
font-size: 22px; font-size: 22px;
} }
.Time .Fa { .Time .Fa {
font-size: 14px; font-size: 14px;
margin-top: -5px; margin-top: -5px;
} }
.Header { .Header {
padding-bottom: 0px; padding-bottom: 0px;
} }
.LogOut { .LogOut {
position: absolute; position: absolute;
left: 10px; left: 10px;
} }
.drawer-trigger { .drawer-trigger {
position: fixed; position: fixed;
top: 0px; top: 0px;
padding: 40px; padding: 40px;
background-color: white; background-color: white;
left: 400px; left: 400px;
} }
.drawer-trigger.active { .drawer-trigger.active {
color: red; color: red;
} }
.drawer { .drawer {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: -600px; left: -600px;
bottom: 0px; bottom: 0px;
background-color: white; background-color: white;
width: 600px; width: 600px;
}
.drawer.open { }
.drawer.open {
left: 0px; left: 0px;
} }
.v-application .caption { .v-application .caption {
font-family: iranyekan-regular!important; font-family: iranyekan-regular!important;
} }
.footer {
position: absolute;
bottom: 0px;
width: 420px;
padding-bottom: 10px;
text-align: center;
padding-left: 20px;
}
.footer .water-mark {
}
.footer .links {
width: 420px;
border-bottom: 1px solid #eeeeee;
padding-bottom: 10px;
margin: auto;
}
.footer .links .texts a {
font-size: 14px;
color: #9e9e9e;
margin-right: 20px;
transition: 0.2s;
}
.footer .links .social-media {
padding-left: 10px;
}
.footer .links .social-media a {
margin-right: 5px;
transition: 0.2s;
}
.footer .links .social-media a .v-icon {
color: #9e9e9e;
font-size: 16px;
}
.footer .links a:hover, .footer .links .social-media a:hover .v-icon {
color: #000;
}
.footer .water-mark .v-icon {
font-size: 50px;
color: #000;
}
.footer .water-mark .Fa {
font-size: 16px;
}
.footer .water-mark .En {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 4px;
margin-right: -4px;
}
</style> </style>

95
resources/js/Global/components/Drawer/Tile.vue
Unescape View File

@ -1,16 +1,18 @@
<template> <template>
<div class="Tile" :class="tileClass"> <div class="Tile" :class="tileClass">
<div class="flex-justified-right">
<i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/> <i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/>
<div class="Title"> <div class="Title">
<div class="TitleFa Fa">{{ TitleFa }}</div> <div class="TitleFa Fa">{{ TitleFa }}</div>
<div class="TitleEn En">{{ TitleEn }}</div> <div class="TitleEn En">{{ TitleEn }}</div>
</div> </div>
</div>
<v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon> <v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon>
<!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> --> <!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
TitleFa : {default: ' عنوان بخش '}, TitleFa : {default: ' عنوان بخش '},
TitleEn : {default: ' Section Title '}, TitleEn : {default: ' Section Title '},
@ -18,11 +20,11 @@ export default {
hasDetail: {default: true}, hasDetail: {default: true},
tileClass: {default: ''} tileClass: {default: ''}
} }
} }
</script> </script>
<style scoped> <style scoped>
.Tile { .Tile {
padding: 1em; padding: 0.4em;
padding-right: 20px; padding-right: 20px;
cursor: pointer; cursor: pointer;
display: -webkit-inline-flex; display: -webkit-inline-flex;
@ -33,8 +35,8 @@ export default {
transition: color 1000ms; transition: color 1000ms;
color: #383838; color: #383838;
text-align: right; text-align: right;
} }
.Tile:before { .Tile:before {
content: ""; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
@ -51,66 +53,73 @@ export default {
transition-property: transform; transition-property: transform;
-webkit-transition: 300ms cubic-bezier(1, 0, 0, 1); -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
transition: 300ms cubic-bezier(1, 0, 0, 1); transition: 300ms cubic-bezier(1, 0, 0, 1);
} }
.Tile.orange-theme:before { .Tile.orange-theme:before {
background: var(--color-orange); background: var(--color-orange);
} }
.Tile.red-theme:before { .Tile.red-theme:before {
background: var(--color-red); background: var(--color-red);
} }
.Tile.cyan-theme:before { .Tile.cyan-theme:before {
background: var(--color-cyan); background: var(--color-cyan);
} }
.Tile.orange-theme .pre-icon { .Tile.orange-theme .pre-icon {
color: var(--color-orange); color: var(--color-orange);
} }
.Tile.red-theme .pre-icon { .Tile.red-theme .pre-icon {
color: var(--color-red); color: var(--color-red);
} }
.Tile.cyan-theme .pre-icon { .Tile.cyan-theme .pre-icon {
color: var(--color-cyan); color: var(--color-cyan);
} }
.Tile:hover:before { .Tile:hover:before {
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transform: scaleX(1); transform: scaleX(1);
} }
.Tile:hover, .Tile:hover .post-icon, .Tile:hover .pre-icon, .Tile:hover .TitleEn {
color: #fff; .Tile .pre-icon {
}
.Tile .pre-icon {
padding-left: 5px; padding-left: 5px;
margin-top: 5px;
font-size: 35px; font-size: 35px;
opacity: 0.2; opacity: 1;
} transition: 300ms cubic-bezier(1, 0, 0, 1);
.Tile .Title { }
.Tile .Title {
padding-left: 10px; padding-left: 10px;
margin-right:-30px; margin-right: 0px;
} transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile .TitleFa { .Tile .TitleFa {
font-size: 16px; font-size: 18px;
line-height: 22px; line-height: 22px;
} color: #000;
.Tile .TitleEn { transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile .TitleEn {
letter-spacing: 3px; letter-spacing: 3px;
line-height: 20px; line-height: 20px;
font-size: 10px; font-size: 10px;
color: #a29da9; color: #a0a0a0;
text-transform: uppercase;
} transition: 300ms cubic-bezier(1, 0, 0, 1);
.Tile .post-icon::before { }
.Tile:hover, .Tile:hover .post-icon, .Tile:hover .pre-icon, .Tile:hover .TitleEn, .Tile:hover .TitleFa {
color: #fff;
}
.Tile .post-icon::before {
margin-top: 0px; margin-top: 0px;
} }
.post-icon { .post-icon {
font-size: 24px !important; font-size: 24px !important;
margin-right: auto; margin-right: auto;
color: #888; color: #888;
} }
.Tile:hover .post-icon { .Tile:hover .post-icon {
transform: translateX(-4px); transform: translateX(-4px);
} }
</style> </style>

Write Preview
Loading…
Cancel
Save