From fa14529fb2ea89e9458fea28f27e3f658a81644b Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alireza-hassani@outlook.com>
Date: Sun, 13 Dec 2020 19:30:43 +0330
Subject: [PATCH] feat:side bar

---
 .../js/Global/components/Drawer/SideBar.vue   | 450 ++++++++++--------
 .../js/Global/components/Drawer/Tile.vue      | 207 ++++----
 2 files changed, 371 insertions(+), 286 deletions(-)

diff --git a/resources/js/Global/components/Drawer/SideBar.vue b/resources/js/Global/components/Drawer/SideBar.vue
index 69630f6..86fb983 100644
--- a/resources/js/Global/components/Drawer/SideBar.vue
+++ b/resources/js/Global/components/Drawer/SideBar.vue
@@ -1,221 +1,297 @@
 <template>
-	<v-layout wrap>
-		<v-container class="Header">
-			<v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon>
-			<a :href="mainHref">
-				<v-icon class="Home" dark>WMi-Real-Estate</v-icon>
-			</a>
+    <v-layout wrap>
+        <v-container class="Header">
+            <v-icon class="Menu" @click.stop="drawer = !drawer" dark>WMi-menu</v-icon>
+            <a :href="mainHref">
+                <v-icon class="Home" dark>WMi-Real-Estate</v-icon>
+            </a>
             <div class="Name caption"> {{ getAuthUser.name }} </div>
-			<div class="Time">
-				<div class="En Bold">{{ getCurrentTime }}</div>
-				<div class="Fa Thin">{{  new Date() | moment("dddd  jDD  jMMMM jYYYY") }}</div>
-			</div>
-			<!-- <div class="Notification" dark>
+            <div class="Time">
+                <div class="En Bold">{{ getCurrentTime }}</div>
+                <div class="Fa Thin">{{  new Date() | moment("dddd  jDD  jMMMM jYYYY") }}</div>
+            </div>
+            <!-- <div class="Notification" dark>
                 <wm-notifications></wm-notifications>
-			</div>-->
-		</v-container>
+            </div>-->
+        </v-container>
 
-		<v-navigation-drawer v-model="drawer" app temporary right width="320">
-			<v-list class="pa-1">
+        <v-navigation-drawer v-model="drawer" app temporary right width="420">
+            <v-list class="pa-1">
                 <div class="row user-info">
                     <v-flex lg9 class="pa-3">
-						<img class="Avatar" :src="$_getPath()+'images/Global/Misc/Avatar.png'" />
+                        <img class="Avatar" :src="$_getPath()+'images/Global/Misc/Avatar.png'" />
                         <div class="Title">
                             <div class="Name Fa">{{ getAuthUser.name }}</div>
                             <div class="Role Fa">مدیریت</div>
                         </div>
                     </v-flex>
                     <v-flex lg3>
-						<a class="LogOut">
-							<v-tooltip bottom color="black" transition="slide-x-transition">
+                        <a class="LogOut">
+                            <v-tooltip bottom color="black" transition="slide-x-transition">
                                 <template v-slot:activator="{ on }">
                                     <v-btn class="mt-4" small @click.native.stop="logout" slot="activator" outlined fab color="black" dark v-on="on">
                                         <v-icon dark>WMi-off-1</v-icon>
                                     </v-btn>
                                 </template>
-								<span>خروج از حساب کاربری</span>
-							</v-tooltip>
-						</a>
+                                <span>خروج از حساب کاربری</span>
+                            </v-tooltip>
+                        </a>
                     </v-flex>
                 </div>
-			</v-list>
+            </v-list>
 
-			<v-list class="pt-0" dense>
-				<v-divider class="Divider"/>
-				<a :href="item.href" v-for="(item, key) in Items" :key="key">
-					<template v-if="(!item.permissionClass || $_can(item.permissionClass, false, item.module)) && ($_hasModule(item.moduleName, true))">
-						<wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/>
-					</template>
-				</a>
-			</v-list>
-		</v-navigation-drawer>
-	</v-layout>
+            <v-list class="pt-0" dense>
+                <v-divider class="Divider"/>
+                <a :href="item.href" v-for="(item, key) in Items" :key="key">
+                    <template v-if="(!item.permissionClass || $_can(item.permissionClass, false, item.module)) && ($_hasModule(item.moduleName, true))">
+                        <wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn" :icon="item.icon" :tileClass="item.tileClass"/>
+                    </template>
+                </a>
+            </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-layout>
 </template>
 
 <script>
-import Tile from "@Global/components/Drawer/Tile";
-import Notifications from "@Global/components/Drawer/Notifications";
-import Routes from "@Global/utils/common/routes";
-import { mapActions, mapGetters } from "vuex";
-export default {
-	data() {
-		return {
-			fav: true,
-			menu: true,
-			message: false,
-			hints: true,
-			drawer: false,
-			Items: [
-				{ titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/profile' },
-				{
-					titleEn: " My Users ",
-					titleFa: " کاربران مجموعه ی من ",
-					icon: "users",
-					permissionClass: "User::index",
-					module: "core",
-					href: Routes.user(),
-                    tileClass: 'red-theme',
-                },
-                {
-					titleEn: " Product Management ",
-					titleFa: " مدیریت محصولات ",
-					icon: "dropbox",
-					href: '/product/home',
-                    tileClass: 'cyan-theme',
-				},
-                {
-                    titleEn: " Blog Management ",
-                    titleFa: " مدیریت خبرنامه ",
-                    moduleName: "blog",
-                    icon: "rss",
-                    href: '/blog',
-                    tileClass: 'orange-theme',
-                },
-                {
-                    titleEn: " Portfolio Management ",
-                    titleFa: " مدیریت نمونه کارها ",
-                    moduleName: "portfolio",
-                    icon: "art-gallery",
-                    href: '/portfolio',
-                },
-                // {
-				// 	titleEn: " SMS Management ",
-				// 	titleFa: " مدیریت پیام های کوتاه ",
-				// 	icon: "comment-alt",
-				// 	permissionClass: "SMS::manage",
-				// 	href: '/sms/manage',
-				// }
-			],
-			user: { name: "" },
-			mainHref: Routes.main(),
-		};
-	},
-    components: {
-		"wm-list-tile": Tile,
-		"wm-notifications": Notifications
-	},
-    methods: {
-        ...mapActions("auth", ["logout"]),
-    },
-    computed: {
-		...mapGetters("auth", ["getAuthUser"]),
-		...mapGetters("common", ["getCurrentTime"]),
-        ...mapGetters("rolePermission", ["getModules"]),
+    import Tile from "@Global/components/Drawer/Tile";
+    import Notifications from "@Global/components/Drawer/Notifications";
+    import Routes from "@Global/utils/common/routes";
+    import { mapActions, mapGetters } from "vuex";
+    export default {
+        data() {
+            return {
+                fav: true,
+                menu: true,
+                message: false,
+                hints: true,
+                drawer: false,
+                Items: [
+                    { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'user', permissionClass: null, href: '/user/dashboard' },
+                    {
+                        titleEn: " My Users ",
+                        titleFa: " کاربران مجموعه ی من ",
+                        icon: "users",
+                        permissionClass: "User::index",
+                        module: "core",
+                        href: '/user/home',
+                        tileClass: 'red-theme',
+                    },
+                    {
+                        titleEn: " Product Management ",
+                        titleFa: " مدیریت محصولات ",
+                        icon: "dropbox",
+                        href: '/product/home',
+                        tileClass: 'cyan-theme',
+                    },
+                    {
+                        titleEn: " Blog Management ",
+                        titleFa: " مدیریت خبرنامه ",
+                        moduleName: "blog",
+                        icon: "rss",
+                        href: '/blog',
+                        tileClass: 'orange-theme',
+                    },
+                    {
+                        titleEn: " Portfolio Management ",
+                        titleFa: " مدیریت نمونه کارها ",
+                        moduleName: "portfolio",
+                        icon: "art-gallery",
+                        href: '/portfolio',
+                    },
+                    // {
+                    // 	titleEn: " SMS Management ",
+                    // 	titleFa: " مدیریت پیام های کوتاه ",
+                    // 	icon: "comment-alt",
+                    // 	permissionClass: "SMS::manage",
+                    // 	href: '/sms/manage',
+                    // }
+                ],
+                user: { name: "" },
+                mainHref: Routes.main(),
+            };
+        },
+        components: {
+            "wm-list-tile": Tile,
+            "wm-notifications": Notifications
+        },
+        methods: {
+            ...mapActions("auth", ["logout"]),
+        },
+        computed: {
+            ...mapGetters("auth", ["getAuthUser"]),
+            ...mapGetters("common", ["getCurrentTime"]),
+            ...mapGetters("rolePermission", ["getModules"]),
 
-    }
-};
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
 
-.user-info .Title {
-    float: right;
-}
-.user-info .Avatar {
-    float: right;
-    width: 48px;
-    margin: 0px 10px;
-}
-.user-info .Title .Name {
-    font-size: 14px;
-}
+    .user-info .Title {
+        float: right;
+    }
+    .user-info .Avatar {
+        float: right;
+        width: 48px;
+        margin: 0px 10px;
+    }
+    .user-info .Title .Name {
+        font-size: 14px;
+    }
+
+    .Header .Menu {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+    }
+    .Header .Home {
+        position: absolute;
+        right: 50px;
+        top: 20px;
+    }
+    .Header .Name {
+        position: absolute;
+        right: 80px;
+        top: 20px;
+        color: #fff;
+        line-height: 18px;
+    }
+
+    .Notification {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+    }
+    .Divider {
+        margin: 0px;
+    }
+    .Name {
+        font-size: 16px;
+    }
+    .Role {
+        font-size: 14px;
+        color: #aaaaaa;
+    }
+    .Time {
+        text-align: center;
+        color: #fff;
+    }
+    .Time .En {
+        font-size: 22px;
+    }
+    .Time .Fa {
+        font-size: 14px;
+        margin-top: -5px;
+    }
+    .Header {
+        padding-bottom: 0px;
+    }
+    .LogOut {
+        position: absolute;
+        left: 10px;
+    }
+    .drawer-trigger {
+        position: fixed;
+        top: 0px;
+        padding: 40px;
+        background-color: white;
+        left: 400px;
+    }
+
+    .drawer-trigger.active {
+        color: red;
+    }
 
-.Header .Menu {
-	position: absolute;
-	right: 20px;
-	top: 20px;
-}
-.Header .Home {
-	position: absolute;
-	right: 50px;
-	top: 20px;
-}
-.Header .Name {
-	position: absolute;
-    right: 80px;
-    top: 20px;
-    color: #fff;
-    line-height: 18px;
-}
+    .drawer {
+        position: fixed;
+        top: 0px;
+        left: -600px;
+        bottom: 0px;
+        background-color: white;
+        width: 600px;
 
-.Notification {
-	position: absolute;
-	left: 20px;
-	top: 20px;
-}
-.Divider {
-	margin: 0px;
-}
-.Name {
-	font-size: 16px;
-}
-.Role {
-	font-size: 14px;
-	color: #aaaaaa;
-}
-.Time {
-	text-align: center;
-	color: #fff;
-}
-.Time .En {
-    font-size: 22px;
-}
-.Time .Fa {
-    font-size: 14px;
-    margin-top: -5px;
-}
-.Header {
-	padding-bottom: 0px;
-}
-.LogOut {
-	position: absolute;
-	left: 10px;
-}
-.drawer-trigger {
-	position: fixed;
-	top: 0px;
-	padding: 40px;
-	background-color: white;
-	left: 400px;
-}
+    }
 
-.drawer-trigger.active {
-	color: red;
-}
+    .drawer.open {
+        left: 0px;
+    }
+    .v-application .caption {
+        font-family: iranyekan-regular!important;
+    }
 
-.drawer {
-	position: fixed;
-	top: 0px;
-	left: -600px;
-	bottom: 0px;
-	background-color: white;
-	width: 600px;
-}
+    .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;
 
-.drawer.open {
-	left: 0px;
-}
-.v-application .caption {
-    font-family: iranyekan-regular!important;
-}
+    }
+    .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>
diff --git a/resources/js/Global/components/Drawer/Tile.vue b/resources/js/Global/components/Drawer/Tile.vue
index 1766736..a2dd227 100644
--- a/resources/js/Global/components/Drawer/Tile.vue
+++ b/resources/js/Global/components/Drawer/Tile.vue
@@ -1,116 +1,125 @@
 <template>
     <div class="Tile" :class="tileClass">
-        <i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/>
-        <div class="Title">
-            <div class="TitleFa Fa">{{ TitleFa }}</div>
-            <div class="TitleEn En">{{ TitleEn }}</div>
+        <div class="flex-justified-right">
+            <i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/>
+            <div class="Title">
+                <div class="TitleFa Fa">{{ TitleFa }}</div>
+                <div class="TitleEn En">{{ TitleEn }}</div>
+            </div>
         </div>
         <v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon>
         <!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> -->
     </div>
 </template>
 <script>
-export default {
-    props: {
-        TitleFa : {default: ' عنوان بخش '},
-        TitleEn : {default: ' Section Title '},
-        icon : {default: null},
-        hasDetail: {default: true},
-        tileClass: {default: ''}
-    }
-}
+    export default {
+        props: {
+            TitleFa : {default: ' عنوان بخش '},
+            TitleEn : {default: ' Section Title '},
+            icon : {default: null},
+            hasDetail: {default: true},
+            tileClass: {default: ''}
+        }
+    }
 </script>
 <style scoped>
-.Tile {
-    padding: 1em;
-    padding-right: 20px;
-    cursor: pointer;
-    display: -webkit-inline-flex;
-    width: 100%;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-transition: color 1000ms;
-    transition: color 1000ms;
-    color: #383838;
-    text-align: right;
-}
-.Tile:before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--color-black);
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0);
-    -webkit-transform-origin: 100% 50%;
-    transform-origin: 100% 50%;
-    -webkit-transition-property: transform;
-    transition-property: transform;
-    -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
-    transition: 300ms cubic-bezier(1, 0, 0, 1);
-}
-.Tile.orange-theme:before {
-    background: var(--color-orange);
-}
-.Tile.red-theme:before {
-    background: var(--color-red);
-}
-.Tile.cyan-theme:before {
-    background: var(--color-cyan);
-}
+    .Tile {
+        padding: 0.4em;
+        padding-right: 20px;
+        cursor: pointer;
+        display: -webkit-inline-flex;
+        width: 100%;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-transition: color 1000ms;
+        transition: color 1000ms;
+        color: #383838;
+        text-align: right;
+    }
+    .Tile:before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--color-black);
+        -webkit-transform: scaleX(0);
+        transform: scaleX(0);
+        -webkit-transform-origin: 100% 50%;
+        transform-origin: 100% 50%;
+        -webkit-transition-property: transform;
+        transition-property: transform;
+        -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
+    .Tile.orange-theme:before {
+        background: var(--color-orange);
+    }
+    .Tile.red-theme:before {
+        background: var(--color-red);
+    }
+    .Tile.cyan-theme:before {
+        background: var(--color-cyan);
+    }
 
-.Tile.orange-theme .pre-icon {
-    color: var(--color-orange);
-}
-.Tile.red-theme .pre-icon {
-    color: var(--color-red);
-}
-.Tile.cyan-theme .pre-icon {
-    color: var(--color-cyan);
-}
+    .Tile.orange-theme .pre-icon {
+        color: var(--color-orange);
+    }
+    .Tile.red-theme .pre-icon {
+        color: var(--color-red);
+    }
+    .Tile.cyan-theme .pre-icon {
+        color: var(--color-cyan);
+    }
 
-.Tile:hover:before {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-}
-.Tile:hover, .Tile:hover .post-icon,  .Tile:hover .pre-icon, .Tile:hover .TitleEn {
-    color: #fff;
-}
-.Tile .pre-icon {
-    padding-left: 5px;
-    font-size: 35px;
-    opacity: 0.2;
-}
-.Tile .Title {
-    padding-left: 10px;
-    margin-right:-30px;
-}
+    .Tile:hover:before {
+        -webkit-transform: scaleX(1);
+        transform: scaleX(1);
+    }
 
-.Tile .TitleFa {
-    font-size: 16px;
-    line-height: 22px;
-}
-.Tile .TitleEn {
-    letter-spacing: 3px;
-    line-height: 20px;
-    font-size: 10px;
-    color: #a29da9;
+    .Tile .pre-icon {
+        padding-left: 5px;
+        margin-top: 5px;
+        font-size: 35px;
+        opacity: 1;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
+    .Tile .Title {
+        padding-left: 10px;
+        margin-right: 0px;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
 
-}
-.Tile .post-icon::before {
-    margin-top: 0px;
-}
+    .Tile .TitleFa {
+        font-size: 18px;
+        line-height: 22px;
+        color: #000;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
+    .Tile .TitleEn {
+        letter-spacing: 3px;
+        line-height: 20px;
+        font-size: 10px;
+        color: #a0a0a0;
+        text-transform: uppercase;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
+    .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;
+    }
 
 
-.post-icon {
-    font-size: 24px !important;
-    margin-right: auto;
-    color: #888;
-}
-.Tile:hover .post-icon {
-    transform: translateX(-4px);
-}
+    .post-icon {
+        font-size: 24px !important;
+        margin-right: auto;
+        color: #888;
+    }
+    .Tile:hover .post-icon {
+        transform: translateX(-4px);
+    }
 </style>