pop up side panel with select dropdown listbox

I'm not sure what you meant by the left side of the pages so let's start with adding it in the menu first.

Try this:

- Create a new custom link menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

- Use the search icon svg as the label:
<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg>

- Add the CSS class slideout-toggle to the menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Hi Leo,
After following your instructions above I now have 2 hamburgers and a very faint magnify glass.
See here: https://florapalaestina-ethnobotany.org/
Any possibility of getting rid of the hamburgers and making the magnify glass more visible - say a white magnifying glass?
Thanks
David

ok so added in Additional Css:

svg {
     background: #F2E6B5}

Still need to get rid of hamburgers

Thanks

Used this

.menu-item-align-right
{display: none}

to hide right side hamburger, understand the magnify icon is being displayed together with the other hamburger.
How do I remove both hamburgers from menu?
Thanks

Try this CSS:

.slideout-toggle:not(.has-svg-icon) a:before {
    display: none;
}

Hi Leo,
Thanks for CSS it takes out the hamburger leaving only the icon as I wanted.
Problem now is when side panel opens the rest of the page has a dark shadow and is almost not visible.
Like side panel and page to be visible.
Thanks

Try this CSS:

.slideout-overlay {
    background-color: transparent;
}

Thanks very much for your time Leo.
Thanks for your support and introducing me to the world of svg's and Off Canvas panel - much appreciated.

No problem David!

I want to provide an update on one more thing - it's not crucial so it's up to you.

Instead of the CSS here:
https://generatepress.com/forums/topic/pop-up-side-panel-with-select-dropdown-listbox/page/2/#post-1692738

You can actually add has-svg-icon along with the slideout-toggle class in step 3 here:
https://generatepress.com/forums/topic/pop-up-side-panel-with-select-dropdown-listbox/page/2/#post-1690503

like this: slideout-toggle has-svg-icon

Thanks Leo,
Updated as you suggested - not sure what changes to look for - but it's all working ok.

There should be no change in the appearance - just less CSS :)