how to make a sidebar that not hidden after refresh page until user manually close it-CodePudding

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  id="sidebar">
    <aside>
        <div >
            
        <div>   
            <form action="{{url('filteradsbypackages')}}" method="get" enctype="multipart/form-data">
                @foreach($data as $packages)
                <div >
                    <input  type="checkbox" id="featuredChk" name="promoTypeFilter" value="{{$packages->id}}" onchange="this.form.submit()">
                    <label  for="featuredChk">
                        <label >{{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

CodePudding user response：

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
   }

CodePudding user response：

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