feat:side bar

4 years ago · fa14529fb2
parent 479712e7a8
commit fa14529fb2
2 changed files with 371 additions and 286 deletions
--- a/resources/js/Global/components/Drawer/SideBar.vue
+++ b/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,16 +48,40 @@
                    </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 {
+    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,
@ -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',
                    },
                    {
@ -123,99 +147,151 @@ export default {
            ...mapGetters("rolePermission", ["getModules"]),

        }
-};
+    };
 </script>

 <style lang="scss" scoped>

-.user-info .Title {
+    .user-info .Title {
        float: right;
-}
-.user-info .Avatar {
+    }
+    .user-info .Avatar {
        float: right;
        width: 48px;
        margin: 0px 10px;
-}
-.user-info .Title .Name {
+    }
+    .user-info .Title .Name {
        font-size: 14px;
-}
+    }

-.Header .Menu {
+    .Header .Menu {
        position: absolute;
        right: 20px;
        top: 20px;
-}
-.Header .Home {
+    }
+    .Header .Home {
        position: absolute;
        right: 50px;
        top: 20px;
-}
-.Header .Name {
+    }
+    .Header .Name {
        position: absolute;
        right: 80px;
        top: 20px;
        color: #fff;
        line-height: 18px;
-}
+    }

-.Notification {
+    .Notification {
        position: absolute;
        left: 20px;
        top: 20px;
-}
-.Divider {
+    }
+    .Divider {
        margin: 0px;
-}
-.Name {
+    }
+    .Name {
        font-size: 16px;
-}
-.Role {
+    }
+    .Role {
        font-size: 14px;
        color: #aaaaaa;
-}
-.Time {
+    }
+    .Time {
        text-align: center;
        color: #fff;
-}
-.Time .En {
+    }
+    .Time .En {
        font-size: 22px;
-}
-.Time .Fa {
+    }
+    .Time .Fa {
        font-size: 14px;
        margin-top: -5px;
-}
-.Header {
+    }
+    .Header {
        padding-bottom: 0px;
-}
-.LogOut {
+    }
+    .LogOut {
        position: absolute;
        left: 10px;
-}
-.drawer-trigger {
+    }
+    .drawer-trigger {
        position: fixed;
        top: 0px;
        padding: 40px;
        background-color: white;
        left: 400px;
-}
+    }

-.drawer-trigger.active {
+    .drawer-trigger.active {
        color: red;
-}
+    }

-.drawer {
+    .drawer {
        position: fixed;
        top: 0px;
        left: -600px;
        bottom: 0px;
        background-color: white;
        width: 600px;
-}

-.drawer.open {
+    }
+
+    .drawer.open {
        left: 0px;
-}
-.v-application .caption {
+    }
+    .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>
--- a/resources/js/Global/components/Drawer/Tile.vue
+++ b/resources/js/Global/components/Drawer/Tile.vue
@ -1,16 +1,18 @@
 <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>
 </template>
 <script>
-export default {
+    export default {
        props: {
            TitleFa : {default: ' عنوان بخش '},
            TitleEn : {default: ' Section Title '},
@ -18,11 +20,11 @@ export default {
            hasDetail: {default: true},
            tileClass: {default: ''}
        }
-}
+    }
 </script>
 <style scoped>
-.Tile {
-    padding: 1em;
+    .Tile {
+        padding: 0.4em;
        padding-right: 20px;
        cursor: pointer;
        display: -webkit-inline-flex;
@ -33,8 +35,8 @@ export default {
        transition: color 1000ms;
        color: #383838;
        text-align: right;
-}
-.Tile:before {
+    }
+    .Tile:before {
        content: "";
        position: absolute;
        z-index: -1;
@ -51,66 +53,73 @@ export default {
        transition-property: transform;
        -webkit-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);
-}
-.Tile.red-theme:before {
+    }
+    .Tile.red-theme:before {
        background: var(--color-red);
-}
-.Tile.cyan-theme:before {
+    }
+    .Tile.cyan-theme:before {
        background: var(--color-cyan);
-}
+    }

-.Tile.orange-theme .pre-icon {
+    .Tile.orange-theme .pre-icon {
        color: var(--color-orange);
-}
-.Tile.red-theme .pre-icon {
+    }
+    .Tile.red-theme .pre-icon {
        color: var(--color-red);
-}
-.Tile.cyan-theme .pre-icon {
+    }
+    .Tile.cyan-theme .pre-icon {
        color: var(--color-cyan);
-}
+    }

-.Tile:hover:before {
+    .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 {
+    }
+
+    .Tile .pre-icon {
        padding-left: 5px;
+        margin-top: 5px;
        font-size: 35px;
-    opacity: 0.2;
-}
-.Tile .Title {
+        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;
+    .Tile .TitleFa {
+        font-size: 18px;
        line-height: 22px;
-}
-.Tile .TitleEn {
+        color: #000;
+        transition: 300ms cubic-bezier(1, 0, 0, 1);
+    }
+    .Tile .TitleEn {
        letter-spacing: 3px;
        line-height: 20px;
        font-size: 10px;
-    color: #a29da9;
-
-}
-.Tile .post-icon::before {
+        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 {
+    .post-icon {
        font-size: 24px !important;
        margin-right: auto;
        color: #888;
-}
-.Tile:hover .post-icon {
+    }
+    .Tile:hover .post-icon {
        transform: translateX(-4px);
-}
+    }
 </style>