From 1017baf1ce76fc70f2a3be0cf4f1e02668e5a181 Mon Sep 17 00:00:00 2001
From: Amirul Amin <amirul@tuxuri.com>
Date: Mon, 28 Jun 2021 20:16:18 +0800
Subject: [PATCH] fix: header responsive

---
 .../accounts/forms/LogOutFormComponent.vue    | 210 +++++++++++++++---
 resources/views/partials/header.blade.php     | 120 ++++------
 2 files changed, 228 insertions(+), 102 deletions(-)

diff --git a/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue b/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue
index b32d8912..3f52f93e 100644
--- a/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue
@@ -1,10 +1,18 @@
 <template>
     <div class="row h-100 parentContainer">
         <div class="col">
-            <div class="row align-items-center justify-content-center b-a b-thick h-100 pointer requestModal" data-type="logoutModal" style="border-color: #ffffff3d">
-                <div class="col p-r-10 p-l-10">
-                    <i class="fa fa-power-off fs-12 text-primary-lighter"></i>
-                    <loading-component class="fixed-top h-100 bg-white" style="height: 200px; top: 0;" key="1" color="success" v-show="loading"></loading-component>
+            <div class="row h-100 pointer requestModal" data-type="logoutModal">
+                <div class="col-auto p-r-20">
+                    <div class="all-caps fs-12" :style="{ color: color }">
+                        Logout
+                    </div>
+                    <loading-component
+                        class="fixed-top h-100 bg-white"
+                        style="height: 200px; top: 0;"
+                        key="1"
+                        color="success"
+                        v-show="loading"
+                    ></loading-component>
                 </div>
             </div>
             <modal-component styleType="fill-in" type="logoutModal">
@@ -14,22 +22,151 @@
                             <div class="col">
                                 <div class="row text-center">
                                     <div class="col">
-                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                                             width="64" height="64"
-                                             viewBox="0 0 172 172"
-                                             style=" fill:#000000;"><defs><linearGradient x1="86" y1="73.90625" x2="86" y2="102.15725" gradientUnits="userSpaceOnUse" id="color-1_48180_gr1"><stop offset="0" stop-color="#f6ab9c"></stop><stop offset="1" stop-color="#f6ab9c"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-2_48180_gr2"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-3_48180_gr3"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-4_48180_gr4"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,77.9375c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-1_48180_gr1)"></path><path d="M112.89113,27.10075l-2.15269,4.9235c22.52125,9.84431 37.07406,32.08606 37.07406,56.66325c0,34.08556 -27.72694,61.8125 -61.8125,61.8125c-34.08556,0 -61.8125,-27.72694 -61.8125,-61.8125c0,-24.5745 14.55013,-46.81356 37.07138,-56.66325l-2.15269,-4.9235c-24.48044,10.70163 -40.29369,34.87838 -40.29369,61.58675c0,37.04719 30.14031,67.1875 67.1875,67.1875c37.04719,0 67.1875,-30.14031 67.1875,-67.1875c0,-26.71106 -15.81862,-50.88781 -40.29637,-61.58675z" fill="url(#color-2_48180_gr2)"></path><path d="M86,134.375c-25.19263,0 -45.6875,-20.49487 -45.6875,-45.6875c0,-15.28381 7.59219,-29.48725 20.30944,-37.99587l-2.99388,-4.46663c-14.20881,9.50837 -22.69056,25.38613 -22.69056,42.4625c0,28.15694 22.90556,51.0625 51.0625,51.0625c28.15694,0 51.0625,-22.90556 51.0625,-51.0625c0,-17.14356 -8.5355,-33.05088 -22.83031,-42.55387l-2.97506,4.47738c12.7925,8.50325 20.43037,22.73625 20.43037,38.0765c0,25.19263 -20.49487,45.6875 -45.6875,45.6875z" fill="url(#color-3_48180_gr3)"></path><path d="M72.40394,48.375h10.90856v27.14644c-5.375,1.24969 -10.75,6.67575 -10.75,13.16606c0,7.40944 6.02806,13.4375 13.4375,13.4375c7.40944,0 13.4375,-6.02806 13.4375,-13.4375c0,-6.49031 -5.375,-11.91638 -10.75,-13.16606v-27.14644h10.90587c1.86244,0 3.59856,-0.96481 4.52575,-2.52356c0.88956,-1.49156 0.9245,-3.29219 0.09675,-4.816l-11.33856,-20.92487c-1.33031,-2.45906 -3.96406,-3.98556 -6.87731,-3.98556c-2.91325,0 -5.547,1.5265 -6.88,3.98288l-11.33856,20.92488c-0.82775,1.52381 -0.79281,3.32444 0.09675,4.816c0.92719,1.56144 2.66331,2.52625 4.52575,2.52625zM94.0625,88.6875c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625c4.44512,0 8.0625,3.61737 8.0625,8.0625zM83.84463,22.67175c0.58856,-1.08844 1.79794,-1.17175 2.15537,-1.17175c0.35744,0 1.56681,0.08331 2.15537,1.17175l11.01606,20.33094l-26.41275,0.13438z" fill="url(#color-4_48180_gr4)"></path></g></g></svg>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            x="0px"
+                                            y="0px"
+                                            width="64"
+                                            height="64"
+                                            viewBox="0 0 172 172"
+                                            style=" fill:#000000;"
+                                        >
+                                            <defs>
+                                                <linearGradient
+                                                    x1="86"
+                                                    y1="73.90625"
+                                                    x2="86"
+                                                    y2="102.15725"
+                                                    gradientUnits="userSpaceOnUse"
+                                                    id="color-1_48180_gr1"
+                                                >
+                                                    <stop
+                                                        offset="0"
+                                                        stop-color="#f6ab9c"
+                                                    ></stop>
+                                                    <stop
+                                                        offset="1"
+                                                        stop-color="#f6ab9c"
+                                                    ></stop>
+                                                </linearGradient>
+                                                <linearGradient
+                                                    x1="86"
+                                                    y1="12.09375"
+                                                    x2="86"
+                                                    y2="161.54563"
+                                                    gradientUnits="userSpaceOnUse"
+                                                    id="color-2_48180_gr2"
+                                                >
+                                                    <stop
+                                                        offset="0"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                    <stop
+                                                        offset="1"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                </linearGradient>
+                                                <linearGradient
+                                                    x1="86"
+                                                    y1="12.09375"
+                                                    x2="86"
+                                                    y2="161.54563"
+                                                    gradientUnits="userSpaceOnUse"
+                                                    id="color-3_48180_gr3"
+                                                >
+                                                    <stop
+                                                        offset="0"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                    <stop
+                                                        offset="1"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                </linearGradient>
+                                                <linearGradient
+                                                    x1="86"
+                                                    y1="12.09375"
+                                                    x2="86"
+                                                    y2="161.54563"
+                                                    gradientUnits="userSpaceOnUse"
+                                                    id="color-4_48180_gr4"
+                                                >
+                                                    <stop
+                                                        offset="0"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                    <stop
+                                                        offset="1"
+                                                        stop-color="#ed5335"
+                                                    ></stop>
+                                                </linearGradient>
+                                            </defs>
+                                            <g
+                                                fill="none"
+                                                fill-rule="nonzero"
+                                                stroke="none"
+                                                stroke-width="1"
+                                                stroke-linecap="butt"
+                                                stroke-linejoin="miter"
+                                                stroke-miterlimit="10"
+                                                stroke-dasharray=""
+                                                stroke-dashoffset="0"
+                                                font-family="none"
+                                                font-weight="none"
+                                                font-size="none"
+                                                text-anchor="none"
+                                                style="mix-blend-mode: normal"
+                                            >
+                                                <path
+                                                    d="M0,172v-172h172v172z"
+                                                    fill="none"
+                                                ></path>
+                                                <g>
+                                                    <path
+                                                        d="M86,77.9375c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z"
+                                                        fill="url(#color-1_48180_gr1)"
+                                                    ></path>
+                                                    <path
+                                                        d="M112.89113,27.10075l-2.15269,4.9235c22.52125,9.84431 37.07406,32.08606 37.07406,56.66325c0,34.08556 -27.72694,61.8125 -61.8125,61.8125c-34.08556,0 -61.8125,-27.72694 -61.8125,-61.8125c0,-24.5745 14.55013,-46.81356 37.07138,-56.66325l-2.15269,-4.9235c-24.48044,10.70163 -40.29369,34.87838 -40.29369,61.58675c0,37.04719 30.14031,67.1875 67.1875,67.1875c37.04719,0 67.1875,-30.14031 67.1875,-67.1875c0,-26.71106 -15.81862,-50.88781 -40.29637,-61.58675z"
+                                                        fill="url(#color-2_48180_gr2)"
+                                                    ></path>
+                                                    <path
+                                                        d="M86,134.375c-25.19263,0 -45.6875,-20.49487 -45.6875,-45.6875c0,-15.28381 7.59219,-29.48725 20.30944,-37.99587l-2.99388,-4.46663c-14.20881,9.50837 -22.69056,25.38613 -22.69056,42.4625c0,28.15694 22.90556,51.0625 51.0625,51.0625c28.15694,0 51.0625,-22.90556 51.0625,-51.0625c0,-17.14356 -8.5355,-33.05088 -22.83031,-42.55387l-2.97506,4.47738c12.7925,8.50325 20.43037,22.73625 20.43037,38.0765c0,25.19263 -20.49487,45.6875 -45.6875,45.6875z"
+                                                        fill="url(#color-3_48180_gr3)"
+                                                    ></path>
+                                                    <path
+                                                        d="M72.40394,48.375h10.90856v27.14644c-5.375,1.24969 -10.75,6.67575 -10.75,13.16606c0,7.40944 6.02806,13.4375 13.4375,13.4375c7.40944,0 13.4375,-6.02806 13.4375,-13.4375c0,-6.49031 -5.375,-11.91638 -10.75,-13.16606v-27.14644h10.90587c1.86244,0 3.59856,-0.96481 4.52575,-2.52356c0.88956,-1.49156 0.9245,-3.29219 0.09675,-4.816l-11.33856,-20.92487c-1.33031,-2.45906 -3.96406,-3.98556 -6.87731,-3.98556c-2.91325,0 -5.547,1.5265 -6.88,3.98288l-11.33856,20.92488c-0.82775,1.52381 -0.79281,3.32444 0.09675,4.816c0.92719,1.56144 2.66331,2.52625 4.52575,2.52625zM94.0625,88.6875c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625c4.44512,0 8.0625,3.61737 8.0625,8.0625zM83.84463,22.67175c0.58856,-1.08844 1.79794,-1.17175 2.15537,-1.17175c0.35744,0 1.56681,0.08331 2.15537,1.17175l11.01606,20.33094l-26.41275,0.13438z"
+                                                        fill="url(#color-4_48180_gr4)"
+                                                    ></path>
+                                                </g>
+                                            </g>
+                                        </svg>
                                     </div>
                                 </div>
                                 <h3 class="all-caps">Are you leaving?</h3>
-                                <div class="fs-11">Are you sure you want to log out ? You will return to the login screen.</div>
+                                <div class="fs-11">
+                                    Are you sure you want to log out ? You will
+                                    return to the login screen.
+                                </div>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col p-r-5">
-                                <div class="btn btn-sm btn-default btn-block b-rad-none" data-dismiss="modal">Stay Here</div>
+                                <div
+                                    class="btn btn-sm btn-default btn-block b-rad-none"
+                                    data-dismiss="modal"
+                                >
+                                    Stay Here
+                                </div>
                             </div>
                             <div class="col p-l-5">
-                                <div class="btn btn-sm btn-danger btn-block b-rad-none" data-dismiss="modal" @click="logout()">Logout</div>
+                                <div
+                                    class="btn btn-sm btn-danger btn-block b-rad-none"
+                                    data-dismiss="modal"
+                                    @click="logout()"
+                                >
+                                    Logout
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -37,27 +174,40 @@
             </modal-component>
         </div>
     </div>
-
 </template>
 <script>
-    export default {
-        data(){
-            return {
-                loading: false
-            }
+export default {
+    data() {
+        return {
+            loading: false
+        };
+    },
+    props: {
+        color: String
+    },
+    methods: {
+        logout() {
+            this.loading = true;
+            this.submit(
+                this.route("api.account.authentication.logout"),
+                "get",
+                this.section,
+                false,
+                false
+            );
         },
-        methods:{
-            logout(){
-                this.loading = true;
-                this.submit(this.route('api.account.authentication.logout'), 'get', this.section, false, false)
-            },
-            successHandler(){
-                this.$store.dispatch('userAuthentication', {access_token: '', redirect_url: this.route('login')});
-            },
-            errorHandler(){
-                this.$store.dispatch('userAuthentication', {access_token: '', redirect_url: this.route('login')});
-            }
+        successHandler() {
+            this.$store.dispatch("userAuthentication", {
+                access_token: "",
+                redirect_url: this.route("login")
+            });
+        },
+        errorHandler() {
+            this.$store.dispatch("userAuthentication", {
+                access_token: "",
+                redirect_url: this.route("login")
+            });
         }
     }
-
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 9a0e09ad..10bd50ec 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -2,87 +2,63 @@
     <div class="row bg-primary-complete-gradient align-items-center justify-content-center">
         <div class="col">
             <div class="container-fluid container-fixed-lg no-padding">
-                <div class="row align-items-center justify-content-center">
+                <div class="align-items-center justify-content-center">
                     <div class="col-auto hide">
                         <a href="#" class="btn-link toggle-sidebar fa fa-bars text-white" data-toggle="horizontal-menu"></a>
                     </div>
-                    <div class="col-auto d-xs-none bg-complete-light p-t-10 p-b-10 p-l-30 p-r-30">
-                        <a href="{{route('dashboard')}}"><div class="row">
-                            <div class="col">
-                                <img src="{{asset('images/logo-light.png')}}" alt="logo" height="22">
+                    <nav class="navbar m-b-0 px-0 navbar-dark navbar-expand-sm">
+                        <div class="d-flex align-self-start">
+                            <a href="{{route('dashboard')}}"><div class="row">
+                                <div class="col">
+                                    <img src="{{asset('images/logo-light.png')}}" alt="logo" height="22">
+                                </div>
                             </div>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <div class="m-t-5 all-caps fs-10 text-white hint-text">Overseas Transfers Management</div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="m-t-5 all-caps fs-10 text-white hint-text">Overseas Transfers Management</div>
+                                </div>
                             </div>
+                            </a>
                         </div>
-                        </a>
-                    </div>
-                    <div class="col text-right p-r-30 d-none d-md-inline">
-                        <div class="row justify-content-end">
-                            <div class="col text-left">
-                                <div class="row justify-content-end">
-                                    <div class="col-auto p-r-20">
-                                        <a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
-                                    </div>
-                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
-                                        <a href="{{route('payments')}}">
-                                            <div class="text-white all-caps fs-12">Payments & Billing</div>
-                                        </a>
-                                    </div>
-                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
-                                        <a href="{{route('bookings')}}">
-                                            <div class="text-white all-caps fs-12">Transfers</div>
-                                        </a>
-                                    </div>
-                                    <div class="col-auto p-r-20"  v-if="$store.getters.isAdmin">
-                                        <a href="{{route('bookings.urgent')}}">
-                                            <div class="text-white all-caps fs-12">Urgent List</div>
-                                        </a>
-                                    </div>
-                                    <div v-if="!$store.getters.isAdmin" class="col-auto p-r-20">
-                                        <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
-                                    </div>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon">
+                                <i class="fa fa-navicon" style="color: rgba(255, 255, 255, 0.5); font-size: 28px; line-height: unset !important"></i>
+                            </span>
+                        </button>
+                        <div class="collapse navbar-collapse py-2 py-sm-0" id="navbar-list-2">
+                            <div class="navbar-nav row justify-content-end">
+                                <div class="col-auto p-r-20 py-2 py-sm-0">
+                                    <a href="{{route('dashboard')}}"><div class="text-white all-caps fs-12">Dashboard</div></a>
+                                </div>
+                                <div class="col-auto p-r-20 py-2 py-sm-0"  v-if="$store.getters.isAdmin">
+                                    <a href="{{route('payments')}}">
+                                        <div class="text-white all-caps fs-12">Payments & Billing</div>
+                                    </a>
+                                </div>
+                                <div class="col-auto p-r-20 py-2 py-sm-0"  v-if="$store.getters.isAdmin">
+                                    <a href="{{route('bookings')}}">
+                                        <div class="text-white all-caps fs-12">Transfers</div>
+                                    </a>
+                                </div>
+                                <div class="col-auto p-r-20 py-2 py-sm-0"  v-if="$store.getters.isAdmin">
+                                    <a href="{{route('bookings.urgent')}}">
+                                        <div class="text-white all-caps fs-12">Urgent List</div>
+                                    </a>
+                                </div>
+                                <div v-if="!$store.getters.isAdmin" class="col-auto p-r-20 py-2 py-sm-0">
+                                    <a href="{{route('banks')}}"><div class="text-white all-caps fs-12">Bank Accounts</div></a>
+                                </div>
+                                <div class="col-auto p-r-20 py-2 py-sm-0">
+                                    <a href="{{route('settings')}}">
+                                        <div class="text-white all-caps fs-12">Settings</div>
+                                    </a>
+                                </div>
+                                <div class="col-auto p-r-20 py-2 py-sm-0">
+                                    <log-out-form-component color="#ffffff"></log-out-form-component>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="col-auto p-r-30">
-                        <div class="row no-margin">
-                            <div class="col-auto m-r-5 hide">
-                                <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
-                                    <div class="col p-r-10 p-l-10">
-                                        <i class="fa fa-bell fs-12 text-primary-lighter"></i>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-auto m-r-20 d-none d-md-inline">
-                                <div class="row align-items-center p-t-5 p-b-5 b-a b-thick" style="border-color: #ffffff3d">
-                                    <div class="col-auto">
-                                        <div class="fs-12 text-primary-lighter">Hi, <span v-text="$store.getters.getUserName.split(' ').slice(0,2).join(' ')"></span>!</div>
-                                    </div>
-                                    <div class="col-auto p-l-0 p-r-10 hide">
-                                        <div class="btn btn-xs btn-primary p-t-0 p-b-0 text-primary-lighter" style="background-color: rgba(255, 255, 255, 0.2);">
-                                            <i class="fa fa-angle-down fs-14 m-t-5"></i>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-auto m-r-5 d-none d-md-inline">
-                                <a href="{{route('settings')}}">
-                                    <div class="row align-items-center justify-content-center b-a b-thick h-100" style="border-color: #ffffff3d">
-                                        <div class="col p-r-10 p-l-10">
-                                            <i class="fa fa-cog fs-12 text-primary-lighter"></i>
-                                        </div>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="col-12 col-md-auto text-right">
-                                <log-out-form-component></log-out-form-component>
-                            </div>
-                        </div>
-                    </div>
+                    </nav>
                 </div>
             </div>
         </div>