I want to make side bar on mobile view not despairing after refreshing page when user manually close it.
User can get side bar by pressing hamburger icon can filter the products from there but the question is user filter data it moves to next page or reload and hide the sidebar i want to make it not hidden until user close it in new page or refreshed page...
How can I do it?
here is the code
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version -->
<div class="col-md-3 page-sidebar mobile-filter-sidebar pb-4" id="sidebar">
<aside>
<div class="sidebar-modern-inner enable-long-words">
<div>
<form action="{{url('filteradsbypackages')}}" method="get" enctype="multipart/form-data">
@foreach($data as $packages)
<div class="form-check col-12 gap">
<input class="form-check-input" type="checkbox" id="featuredChk" name="promoTypeFilter" value="{{$packages->id}}" onchange="this.form.submit()">
<label class="form-check-label" for="featuredChk">
<label class="filter_doorstep">{{t($packages->short_name)}}</label>
</label>
</div>
@endforeach
</form>
</div>
@includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.fields', 'search.inc.sidebar.fields'])
@includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.categories', 'search.inc.sidebar.categories'])
@includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.cities', 'search.inc.sidebar.cities'])
@if (!config('settings.list.hide_dates'))
@includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.date', 'search.inc.sidebar.date'])
@endif
@includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.price', 'search.inc.sidebar.price'])
</div>
</aside>
</div>
@section('after_scripts')
@parent
<script>
var baseUrl = '{{ request()->url() }}';
</script>
@endsection
When the user opens the Sidebar, you can set a variable (eg: isSideBarOpen) in your local storage to "true".
window.localStorage.setItem(isSideBarOpen","true")
if the user closes it you set it to "false"
window.localStorage.setItem(isSideBarOpen","false")
every time the user loads your app, you will check
if(window.localStorage.getItem("isSideBarOpen") === "true") {
// your logic to open/close SideBar
}
I think it is better to store all data related to page state.
You can store it in localStorage or event in your DB.
Considering the following situation:
1- Store all data in DB in every change => [you might have lots of updateState request for each user]
2- Store all data in localStorage => Save them in DB periodically by a timer or save data when a specific action happen. [As an example when user logout, store data in DB]
To do this you can write a Javascript or Jquery
function updateSate(args= {}) {
let sate = {
isSideBarOpen: documents.getElementById or get it from args,
...otherdata
}
//store it in localStorage using
localStorage.setItem('state', JSON.stringify(state));
}
//call storeState to save localStorage in DB
function storeState() {
send request to save it
}
//Read the page state from localStorage when page is loaded