How to make a sliding search bar for a menu in Bootstrap?

Question

Bootstrap

Good afternoon. I am a beginner WordPress developer. I am making my first WordPress template.
I need to make a search function in the header of the site, in the menu section. I've tried a lot but I can't get it. Can someone help me?
- In the menu (right side) there is a search icon, when you click on it - menu sections should be hidden and a search bar should be displayed instead. When you click on the cross icon - the search bar is hidden and the menu sections are displayed (ajax loading or css)
- There is a square icon in the menu (left side), when you click on it - the menu sections should be hidden and categories of posts should be displayed instead. When you click on the cross icon - categories of posts are hidden and menu sections are displayed (ajax loading or css)
Demo on the picture:

Here is the finished code that I have already done:

<div class="container">
  <nav class="navbar-default" role="navigation">
    <div class="container-fluid">
  
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
      
      <a href="#" class="navbar-brand hidden-xs"><span class="dripicons-view-thumb"></span></a>
    
        <a href="#" class="navbar-brand pull-right hidden-xs"><span class="dripicons-search"></span></a>
       
        <div class="navbar-collapse collapse">
           <?php
        wp_nav_menu( array(
        'theme_location' => 'primary-menu',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => 'wp_page_menu',
        'walker' => new wp_bootstrap_navwalker())
        );
      ?>
        </div>

    </div>
</nav>
</div>

<script type="text/javascript">
  $(document).ready(function () {
        $(".navbar-toggle").on("click", function () {
            $(this).toggleClass("active");
        });
    });
</script>