feat:side bar

resources/js/Global/components/Drawer/SideBar.vue

@@ -15,7 +15,7 @@
             </div>-->
         </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">
                 <div class="row user-info">
                     <v-flex lg9 class="pa-3">
@@ -48,6 +48,30 @@
                     </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>
@@ -66,14 +90,14 @@ export default {
                 hints: true,
                 drawer: false,
                 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 ",
                         titleFa: " کاربران مجموعه ی من ",
                         icon: "users",
                         permissionClass: "User::index",
                         module: "core",
-					href: Routes.user(),
+                        href: '/user/home',
                         tileClass: 'red-theme',
                     },
                     {
@@ -210,6 +234,7 @@ export default {
         bottom: 0px;
         background-color: white;
         width: 600px;
+
     }
 
     .drawer.open {
@@ -218,4 +243,55 @@ export default {
     .v-application .caption {
         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>

resources/js/Global/components/Drawer/Tile.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="Tile" :class="tileClass">
+        <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>
@@ -22,7 +24,7 @@ export default {
 </script>
 <style scoped>
     .Tile {
-    padding: 1em;
+        padding: 0.4em;
         padding-right: 20px;
         cursor: pointer;
         display: -webkit-inline-flex;
@@ -76,29 +78,36 @@ export default {
         -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;
+        margin-top: 5px;
         font-size: 35px;
-    opacity: 0.2;
+        opacity: 1;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
     }
     .Tile .Title {
         padding-left: 10px;
-    margin-right:-30px;
+        margin-right: 0px;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
     }
 
     .Tile .TitleFa {
-    font-size: 16px;
+        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: #a29da9;
-
+        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;