PC版ではロゴと検索窓が出て、スマートフォン版では切り替え表示したいなと思ったら･･･

タイトルの通りですが、PC版では検索窓とサイトのロゴを出したいけど、スマホ版ではどちらも出す余裕はありませんが、ハンバーガーデザインに分けることもしたくなかったので作ってみました

#　コードとデモ
##デモ
https://jsfiddle.net/mqgc207L/

##コード

CSS部

    @media screen and (max-width: 768px) {
      .SearchWindow__view {
          display: none;
      }
    }
 

サンプルではBootstrap4を使っていることもあり、今回は768pxを区分けしましたが、検索窓に張り付けるクラスをとりあえずスマホとPC版を切り替えたいブレークポイントで非表示と表示に切り替えるようにします。

JS部

const SMP_SEARCH  = document.getElementById("SearchWindow");
  const SMP_LOGO    = document.getElementById("LogoWindow");
  const SMP_LINK    = document.getElementById("header__btm--icon");
  const CLS_SEARCH  = 'fas fa-search';
  const CLS_CROSS   = 'fas fa-times';
  const WINDOWS_MD  = 768;
  let flgChenge     = true;

  window.addEventListener('resize', function(e) {
    //現在のサイズを取得
    let nowsize = window.innerWidth;
    if( (nowsize >= WINDOWS_MD)  ){
      //基準以上ならリセット
      display_reset();
      SMP_SEARCH.style.display ="";
    }
  });
 
  function clickBtn1(){
    if(flgChenge){
      // 検索窓表示
      SMP_LINK.className = CLS_CROSS;
      $(SMP_LOGO).hide();
      $(SMP_SEARCH).show();
      $(SMP_SEARCH).removeClass('SearchWindow__view');
      flgChenge = false;
    }else{
      // 検索窓非表示
      display_reset();
    }
  } 

  function display_reset(){
    SMP_LINK.className = CLS_SEARCH;
    $(SMP_LOGO).show();
    $(SMP_SEARCH).hide();
    $(SMP_SEARCH).addClass('SearchWindow__view');
    flgChenge = true;
  }

起動時にフラグ用引数を用意し、ボタンを操作する度にclickBtn1関数を呼び出して表示・商事を繰り返しますが、PC版ではリセットする必要があるので、 window.addEventListener('resize', function(e) {});でリサイズ時のサイズを算定。所定以上ならリセットを行います。なお、display: block;が残っていると拡大→縮小を繰り返すと最初は隠しておくべき検索窓が表示されるので、SMP_SEARCH.style.display ="";で消しておきます。

<header id="header">
  <div class="row" id="header__top">
    <div id="LogoWindow" class="col-md-4 col-12">
      <h1><a href="#">LOGO</a></h1>
    </div>
    <div id = "SearchWindow" class="col-md-8 col-12 SearchWindow__view">
      <form id="header__search" action="/" method="get">
        <input class="validate" name="search" type="text" autocomplete="off" placeholder="キーワードを入力" >
        <button type="submit">検索</button>
      </form>
    </div>
  </div>

  <!--ボタン-->
  <div id="header__btm">
    <div class="d-block d-md-none">
      <a href="#" class="text-grey darken-4" onclick="clickBtn1()">
      <i id="header__btm--icon" class="fas fa-search" style="font-size:2.0rem;"></i></a>
    </div>
  </div>

HTMLの本文です。画像サイズによって表示するかどうかを区分けするのは難しく車輪の差発明になるので、ここではBootstrapの表示ユーティリティを多用しています。グリッドシステムのみのCSSが入ったBootsrap Gridにもこのユーティリティは附属しているので活用して頂ければと思います。