• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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
about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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
   }
about 3 years ago · Juan Pablo Isaza Report

0

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
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error