Admin Button Refactored

This commit is contained in:
devansh bawari 2021-03-11 12:35:05 +05:30
parent 33aaaae5b9
commit 90fd113df1
7 changed files with 62 additions and 33 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
{
"/js/admin.js": "/js/admin.js?id=8b1af13048dc69b6bae1",
"/js/admin.js": "/js/admin.js?id=c156943c5badc7f93027",
"/css/admin.css": "/css/admin.css?id=f762f47b1bbc81ec1f84"
}

View File

@ -17,6 +17,7 @@ Vue.use(VeeValidate, {
});
Vue.prototype.$http = axios
Vue.component('nav-slide-button', require('./components/navigation/nav-slide-button').default);
Vue.component('required-if', require('./components/validators/required-if').default);
window.eventBus = new Vue();

View File

@ -0,0 +1,57 @@
<template>
<span class="toggle-aside-nav" @click="toggle">
<i class="icon" :class="iconClass"></i>
</span>
</template>
<style scoped>
.toggle-aside-nav {
position: absolute;
top: 50px;
left: 78px;
}
</style>
<script>
export default {
data: function() {
return {
iconClass: 'accordian-right-icon'
};
},
methods: {
toggle: function () {
if ($('.aside-nav').is(':visible')) {
this.hide();
} else {
this.show();
}
},
hide: function () {
let self = this;
$('.aside-nav').hide(function () {
self.iconClass = 'accordian-right-icon';
$('.content-wrapper').css({
marginLeft: 'unset'
});
});
},
show: function () {
let self = this;
$('.aside-nav').show(function () {
self.iconClass = 'accordian-left-icon';
$('.content-wrapper').css({
marginLeft: '280px'
});
});
}
}
}
</script>

View File

@ -28,6 +28,7 @@
{!! view_render_event('bagisto.admin.layout.body.before') !!}
<div id="app">
<flash-wrapper ref='flashes'></flash-wrapper>
{!! view_render_event('bagisto.admin.layout.nav-top.before') !!}
@ -145,30 +146,6 @@
});
}
});
$(document).ready(() => {
$('#randomButton').on('click', (e) => {
if ($('.aside-nav').is(':visible')) {
$('.aside-nav').hide(function () {
$(e.currentTarget.children).removeClass('accordian-left-icon');
$(e.currentTarget.children).addClass('accordian-right-icon');
$('.content-wrapper').css({
marginLeft: 'unset'
});
});
} else {
$('.aside-nav').show(function () {
$(e.currentTarget.children).removeClass('accordian-right-icon');
$(e.currentTarget.children).addClass('accordian-left-icon');
$('.content-wrapper').css({
marginLeft: '280px'
});
});
}
});
});
</script>
@stack('scripts')

View File

@ -30,8 +30,4 @@
@endforeach
@endif
</ul>
{{-- <div class="close-nav-aside">
<i class="icon angle-left-icon close-icon"></i>
</div> --}}
</div>

View File

@ -1,8 +1,6 @@
<div class="navbar-left">
{{-- button for toggling aside nav --}}
<span class="toggle-aside-nav" id="randomButton" style="position: absolute; left: 78px; top: 50px;">
<i class="icon accordian-right-icon"></i>
</span>
<nav-slide-button></nav-slide-button>
{{-- left menu bar --}}
<ul class="menubar">