fix: Filter toggle button & Search field style updated in responsive device

[iamibrahimriaz]

PR Type

What kind of change does this PR introduce?

• Bugfix
• Security fix
• Improvement
• New Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Text changes
• Other... Please describe:

Description

Filter toggle button has issue in responsive device. Button was inside of header part, when disable header, then filter button was not exists. Now take it outside from header part.

Before: https://prnt.sc/CjtoJuSjP2VW | https://prnt.sc/NYsKsz-wQ4Yf

After: https://prnt.sc/pChmYOLX2l2t

Any linked issues

Fixes #

Checklist

• My code follows the WordPress coding standards

[gaa23]

It looks way better inside the header when the header is enabled, when its enabled can it nest nicely with the other icons?

[RabbiIslamRony]

@iamibrahimriaz Please add a listing shortcode and Gutenberg block on a same page (https://imgur.com/HqTVQhA
). Then set Gutenberg block sidebar to “no sidebar” and enable the filter button (https://imgur.com/Yh2VitR
). The filter button is not working properly conditionally in the Gutenberg block (https://imgur.com/RrsBBK8
).

[iamibrahimriaz]

It looks way better inside the header when the header is enabled, when its enabled can it nest nicely with the other icons?

@gaa23 The filter toggle button should be separate from the header because the header is an individual module.

[iamibrahimriaz]

@iamibrahimriaz Please add a listing shortcode and Gutenberg block on a same page (https://imgur.com/HqTVQhA ). Then set Gutenberg block sidebar to “no sidebar” and enable the filter button (https://imgur.com/Yh2VitR ). The filter button is not working properly conditionally in the Gutenberg block (https://imgur.com/RrsBBK8 ).

Fixed