hhh_new/template/navbar.html

<nav class="navbar navbar-expand-lg navbar-light bg-light p-lg-0">
  <div class="container-fluid flex-row-reverse flex-lg-row">
    <button id="search-btn" data-bs-toggle="modal" data-bs-target="#searchModal"
      class="d-block d-lg-none search-btn mb-1 pe-4">
      <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-search.svg" alt="" />
    </button>
    <a href="https://hhh.com.tw/">
      <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" class="logo" />
    </a>
    <a href="https://hhh.com.tw/calculator_request/index.html" class="renovation-btn d-none d-lg-block"
      target="_blank">裝修計算機</a>
    <button class="navbar-toggler mb-menu-btn" type="button" data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <span class="shadow-item"></span>
    <div class="collapse navbar-collapse mt-3 mt-lg-0" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto align-items-lg-center px-3 px-lg-0 pb-1 pb-lg-0">
        <!-- <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <div class="d-flex">
            <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://shop.hhh.com.tw/" target="_blank"
              style="color: var(--sub-color)">
              <img class="d-block d-lg-none" src=".../../img/menu/cart.svg" alt="">
              <span class="fw-bold ms-3 ms-lg-0">+好物</span>
            </a>
          </div>
        </li> -->

        <li class="nav-item dropdown">
          <!-- <a href="https://hhh.com.tw/columns/lists/all-columntypea/" target="" data-bs-toggle="dropdown"
            aria-expanded="false" class="nav-link dropdown-toggle">
            <span>專欄文章</span>
          </a> -->

          <span class="nav-link d-flex align-items-center justify-content-between" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="../../img/menu/pen.svg" alt="" class="d-block d-lg-none">
              <a onclick="window.location.href='https://hhh.com.tw/columns/lists/all-columntypea/';">
                <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>專欄文章</p>
              </a>
            </section>
            <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
          </span>

          <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/editorchoose-columntypea/';"
                    class="submenu">
                    <p>編輯精選</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hometrends-columntypeb/"
                      target="" class="dropdown-item py-2">居家趨勢</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/hotrank-columntypeb/" target=""
                      class="dropdown-item py-2">人氣排行</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/archdesign-columntypeb/"
                      target="" class="dropdown-item py-2">建築設計</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/styleselection-columntypeb/"
                      target="" class="dropdown-item py-2">風格選店</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/charitable-columntypeb/"
                      target="" class="dropdown-item py-2">公益活動</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/editorchoose-columntypea/exhibition-columntypeb/"
                      target="" class="dropdown-item py-2">展演資訊</a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/housedesign-columntypea/';"
                    class="submenu">
                    <p>居家設計</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/smallhouse-columntypeb/" target=""
                      class="dropdown-item py-2">小宅規劃</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/oldhouse-columntypeb/" target=""
                      class="dropdown-item py-2">老屋翻新</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/stylebuild-columntypeb/" target=""
                      class="dropdown-item py-2">風格營造</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/color-columntypeb/" target=""
                      class="dropdown-item py-2">配色佈置</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/goodhouse-columntypeb/" target=""
                      class="dropdown-item py-2">好宅特輯</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/housedesign-columntypea/proposal-columntypeb/" target=""
                      class="dropdown-item py-2">設計提案</a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/decoration-columntypea/';"
                    class="submenu">
                    <p>裝修前線</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/news-columntypeb/" target=""
                      class="dropdown-item py-2">新聞最前線</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/allocation-columntypeb/" target=""
                      class="dropdown-item py-2">預算分配</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/process-columntypeb/" target=""
                      class="dropdown-item py-2">施工流程</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/knowledge-columntypeb/" target=""
                      class="dropdown-item py-2">建材知識</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/decoration-columntypea/decorating-columntypeb/" target=""
                      class="dropdown-item py-2">裝潢撇步</a>
                  </li>
                </ul>
              </div>
            </li>


            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/plus-columntypea/';"
                    class="submenu">
                    <p>生活 PLUS</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/plus-columntypea/fengshui-columntypeb/" target=""
                      class="dropdown-item py-2">居家風水</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/plus-columntypea/housekeeping-columntypeb/" target=""
                      class="dropdown-item py-2">家事清潔</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/plus-columntypea/storageskills-columntypeb/" target=""
                      class="dropdown-item py-2">收納技巧</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/plus-columntypea/renovation-columntypeb/" target=""
                      class="dropdown-item py-2">改造修繕</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/plus-columntypea/retire-columntypeb/" target=""
                      class="dropdown-item py-2">退休好幸福</a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/gooditem-columntypea/';"
                    class="submenu">
                    <p>品牌好物</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/furnishings-columntypeb/" target=""
                      class="dropdown-item py-2">家具家飾</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/appliances-columntypeb/" target=""
                      class="dropdown-item py-2">美型家電</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/recommend-columntypeb/" target=""
                      class="dropdown-item py-2">推薦廚衛</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/homegoods-columntypeb/" target=""
                      class="dropdown-item py-2">居家好物</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/quality-columntypeb/" target=""
                      class="dropdown-item py-2">優質建材</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/gooditem-columntypea/brandnews-columntypeb/" target=""
                      class="dropdown-item py-2">品牌新訊</a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2 py-1">
                <span class="nav-link d-flex align-items-center justify-content-between p-2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
                  <a onclick="window.location.href='https://hhh.com.tw/columns/lists/focus-columntypea/';"
                    class="submenu">
                    <p>房市焦點</p>
                  </a>
                  <div class="expand">
                    <i aria-hidden="true" class="fas fa-chevron-down d-block d-lg-none"></i>
                    <i aria-hidden="true" class="v-icon fa fa-angle-right theme--light d-none d-lg-block"
                      style="font-size: 14px"></i>
                  </div>
                </span>
                <ul class="dropdown-menu dropdown-level-width p-0 p-lg-2">
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/focus-columntypea/housingnews-columntypeb/" target=""
                      class="dropdown-item py-2">房市新聞</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/focus-columntypea/specsearch-columntypeb/" target=""
                      class="dropdown-item py-2">建案特搜</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/focus-columntypea/buyandsell-columntypeb/" target=""
                      class="dropdown-item py-2">買屋賣屋</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/focus-columntypea/mortgage-columntypeb/" target=""
                      class="dropdown-item py-2">房貸稅務</a>
                  </li>
                  <li>
                    <a href="https://hhh.com.tw/columns/lists/focus-columntypea/renting-columntypeb/" target=""
                      class="dropdown-item py-2">租房須知</a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item dropdown dropdown-sub hover-block">
              <div class="dropdown ps-0 ps-lg-4 pe-0">
                <a class="nav-link p-2 my-1" href="https://hhh.com.tw/topic/lists/1-page/new-sort/" class="submenu">
                  <p>主題企劃</p>
                </a>
              </div>
            </li>
          </ul>
        </li>

        <!-- <li class="nav-item">
            <a href="https://hhh.com.tw/about/calculator/" target="_blank" class="nav-link">估預算</a>
          </li> -->
        <!-- <li class="nav-item dropdown"><a href="https://hhh.com.tw/photos/index/" target=""
              class="nav-link">
              <span>找風格</span>
              </a>
            <ul class="dropdown-menu dropdown-level-width">
              <li class="nav-item dropdown dropdown-sub">
                <div class="d-flex justify-content-between align-items-center py-2">
                  <a href="https://hhh.com.tw/photos/lists/nordic-style/" class="submenu dropdown-item">北歐風</a>
                </div>
              </li>
              <li class="nav-item dropdown dropdown-sub">
                <div class="d-flex justify-content-between align-items-center py-2"><a
                    href="https://hhh.com.tw/photos/lists/modern-style/" class="submenu dropdown-item">現代風</a>
                </div>
              </li>
              <li class="nav-item dropdown dropdown-sub">
                <div class="d-flex justify-content-between align-items-center py-2"><a
                    href="https://hhh.com.tw/photos/lists/industry-style/" class="submenu dropdown-item">工業風</a>
                </div>
              </li>
            </ul>
          </li> -->

        <li class="nav-item dropdown">
          <span class="nav-link d-flex align-items-center justify-content-between" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="../../img/menu/designs.svg" alt="" class="d-block d-lg-none">
              <a onclick="window.location.href='https://hhh.com.tw/cases/lists/';">
                <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>空間靈感</p>
              </a>
            </section>
            <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
          </span>

          <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/cases/lists/small-ctype/" class="submenu dropdown-item">小坪數</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/cases/lists/renovation-condition/" class="submenu dropdown-item">老屋翻新</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/search/lists/case/%E9%A2%A8%E6%B0%B4-keyword/"
                  class="submenu dropdown-item">風水</a>
              </div>
            </li>
          </ul>
        </li>

        <li class="nav-item dropdown">
          <span class="nav-link d-flex align-items-center justify-content-between" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="../../img/menu/person.svg" alt="" class="d-block d-lg-none">
              <a onclick="window.location.href='https://hhh.com.tw/designers/lists/';">
                <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>設計師</p>
              </a>
            </section>
            <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
          </span>

          <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/designers/lists/" class="submenu dropdown-item">設計師總覽</a>
              </div>
            </li>
            <!--
              <li class="nav-item dropdown dropdown-sub">
                <div class="d-flex justify-content-between align-items-center py-2">
                  <a href="https://event.hhh.com.tw/EmergingDesigners/" target="_blank"
                    class="submenu dropdown-item">新銳設計師</a>
                </div>
              </li>
  -->
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://event.hhh.com.tw/2023-Most-Favorite-Designers/index.php" target="_blank"
                  class="submenu dropdown-item">觀眾最愛設計師</a>
              </div>
            </li>
            <!--
              <li class="nav-item dropdown dropdown-sub">
                <div class="d-flex justify-content-between align-items-center py-2">
                  <a href="https://event.hhh.com.tw/2023trends/" target="_blank" class="submenu dropdown-item">大師有約</a>
                </div>
              </li>
  -->
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://event.hhh.com.tw/topglory/" target="_blank" class="submenu dropdown-item">Glory
                  國際大賞</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/event170427/" target="_blank" class="submenu dropdown-item">老屋翻新</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/minordecor" target="_blank" class="submenu dropdown-item">輕裝修方案</a>
              </div>
            </li>
            <!--
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://matching.framer.website/" target="_blank" class="submenu dropdown-item">居家快易便</a>
              </div>
            </li>
			-->
          </ul>
        </li>

        <li class="nav-item dropdown">
          <span class="nav-link d-flex align-items-center justify-content-between" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="../../img/menu/videos.svg" alt="" class="d-block d-lg-none">
              <a onclick="window.location.href='https://hhh.com.tw/videos/lists/';">
                <p class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>裝修影片</p>
              </a>
            </section>
            <div class="expand d-block d-lg-none"><i class="fas fa-chevron-down"></i></div>
          </span>

          <ul class="dropdown-menu dropdown-level-width py-0 py-lg-2 list">
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/videos/lists/" class="submenu dropdown-item">發燒影音</a>
              </div>
            </li>
            <!-- <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/video-list-5945tw.php" class="submenu dropdown-item">呼叫師傅</a>
              </div>
            </li> -->
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2">
                <a href="https://hhh.com.tw/program/" class="submenu dropdown-item">TV 節目表</a>
              </div>
            </li>
          </ul>
        </li>

        <!-- <li class="nav-item dropdown"><a href="https://hhh.com.tw/products/lists/" target="" data-toggle="dropdown"
            class="nav-link">居家商品</a>
          <ul class="dropdown-menu dropdown-level-width">
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/" class="submenu dropdown-item">商品總覽</a></div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/furniture-pcategorya/" class="submenu dropdown-item">傢俱</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/household-pcategorya/" class="submenu dropdown-item">家電</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/kitchen-pcategorya/" class="submenu dropdown-item">廚房</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/bathroom-pcategorya/" class="submenu dropdown-item">衛浴</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/products/lists/lighting-pcategorya/" class="submenu dropdown-item">照明</a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/brands/lists/" class="submenu dropdown-item">品牌總覽</a></div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://hhh.com.tw/brand-index.php?brand_id=194" target="_blank"
                  class="submenu dropdown-item">軟裝佈置</a></div>
            </li>
            <li class="nav-item dropdown dropdown-sub">
              <div class="d-flex justify-content-between align-items-center py-2"><a
                  href="https://event.hhh.com.tw/2021-Top-Brands/index.php" target="_blank"
                  class="submenu dropdown-item">消費者愛用品牌</a></div>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="d-flex">
            <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://hhh.com.tw/brands/lists/"
              target="_blank">
              <img src="../../img/menu/sofa.svg" alt="" height="22" class="d-block d-lg-none">
              <span class="ms-3 ms-lg-0">品牌館</span>
            </a>
          </div>
        </li> -->

        <li class="nav-item">
          <div class="d-flex">
            <a class="nav-link d-flex align-items-center w-100" href="https://hhh.com.tw/builder/lists/">
              <img src="../../img/menu/building.svg" alt="" height="22" class="d-block d-lg-none mx-1">
              <span class="ms-3 ms-lg-0 d-flex"><span class="search-text">尋找</span>新建案</span>
            </a>
          </div>
        </li>
        <!-- <li class="nav-item">
          <div class="d-flex">
            <a class="nav-link d-flex align-items-center w-100 mt-lg-2" href="https://hhh.com.tw/forum/category/"
              target="_blank">
              <img src="../../img/menu/discuss.svg" alt="" class="d-block d-lg-none">
              <span class="ms-3 ms-lg-0">討論區</span>
            </a>
          </div>
        </li> -->
      </ul>

      <ul class="navbar-nav mb-2 mb-lg-0 ms-auto d-none d-lg-flex">
        <li class="nav-item d-flex align-items-center" id="app_user">
          <!-- <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
              <section class="d-flex align-items-center">
                <img src="../../img/icon/material-people.svg" alt="" class="me-2" />
                <span>登入</span>
              </section>
            </a> -->
        </li>
        <!-- 暫時隱藏 -->
        <!-- <li class="nav-item">
            <a class="nav-link" href="#">
              <section class="d-flex align-items-center">
                <img src="https://hhh.com.tw/images/icon/feather-briefcase.svg" alt="" class="me-2">
                <span class="pt-1">設計師登入</span>
              </section>
            </a>
          </li> -->
        <li class="nav-item d-none d-lg-block">
          <a class="nav-link" href="javascript:;" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
            <button type="button" class="search-btn">
              <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-search.svg" alt="" />
            </button>
          </a>
        </li>
      </ul>

      <!-- Footer -->
      <footer class="d-block d-lg-none footer">
        <div class="container" style="margin:0 auto;">
          <div class="row">
            <div class="col-12 col-lg-4 about-list">
              <section>
                <h4>相關連結</h4>
                <div class="d-flex justify-content-lg-center">
                  <ul>
                    <li>
                      <a href="https://event.hhh.com.tw/agent/lecture.html" target="_blank">
                        <img src="../../img/menu/freelecture.svg" alt="免費報名幸福講堂">
                        免費報名幸福講堂
                      </a>
                    </li>
                    <li>
                      <a href="https://event.hhh.com.tw/agent/" target="_blank">
                        <img src="../../img/menu/agent.svg" alt="幸福經紀人">
                        幸福經紀人 <span>0800-366-086</span>
                      </a>
                    </li>

                    <li>
                      <a href="http://gstv.com.tw/" target="_blank">
                        <img src="../../img/menu/tv.svg" alt="幸福空間居家台">
                        幸福空間居家台
                      </a>
                    </li>
                    <li>
                      <a href="https://event.hhh.com.tw/contest/2018/" target="_blank">
                        <img src="../../img/menu/prize.svg" alt="ADA 亞洲設計獎">
                        ADA 亞洲設計獎
                      </a>
                    </li>

                    <li>
                      <a href="https://www.leju.com.tw/" target="_blank">
                        <img src="../../img/menu/Image-1@2x.png" alt="樂居網">
                        樂居網
                      </a>
                    </li>
                  </ul>
                </div>
              </section>
            </div>
            <div class="col-12 col-lg-4 follow-list">
              <section>
                <h4>追蹤我們</h4>
                <div class="d-flex flex-column align-items-center">
                  <section class="media">
                    <a href="https://www.facebook.com/hhhfb" target="_blank">
                      <img src="../../img/media/fb.svg" alt="Facebook" class="media-item before">
                      <img src="../../img/media/fb_h.svg" alt="Facebook" class="media-item after">
                    </a>
                    <a href="https://page.line.me/ovs4341s?openQrModal=true" target="_blank">
                      <img src="../../img/media/ln.svg" alt="Line" class="media-item before">
                      <img src="../../img/media/ln_h.svg" alt="Line" class="media-item after">
                    </a>
                    <a href="https://www.youtube.com/user/gorgeousspace" target="_blank">
                      <img src="../../img/media/yt.svg" alt="YouTube" class="media-item before">
                      <img src="../../img/media/yt_h.svg" alt="YouTube" class="media-item after">
                    </a>
                    <a href="https://www.instagram.com/gorgeous_space/" target="_blank">
                      <img src="../../img/media/ig.svg" alt="Instagram" class="media-item before">
                      <img src="../../img/media/ig_h.svg" alt="Instagram" class="media-item after">
                    </a>

                    <a href="https://www.tiktok.com/@gorgeousspace" target="_blank">
                      <img src="../../img/media/tt.svg" alt="Tiktok" class="media-item before">
                      <img src="../../img/media/tt_h.svg" alt="Tiktok" class="media-item after rounded-circle">
                    </a>
                  </section>

                </div>
              </section>
            </div>
            <div class="col-12 col-lg-4 more-list">
              <section>
                <h4 class="d-none d-lg-block">了解更多</h4>
                <div class="d-flex flex-column mt-2 mt-lg-0">
                  <section class="subscriber-item">
                    <input type="email" placeholder="訂閱電子報，請輸入您的 Email">
                    <button class="d-flex justify-content-center align-items-center">
                      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                      <p class="mb-0">訂閱</p>
                    </button>
                  </section>
                  <div class="d-lg-flex justify-content-center">
                    <section class="mt-4 link">
                      <a href="https://hhh.com.tw/about/contact/" target="_blank">
                        聯絡我們
                      </a>
                      <a href="https://hhh.com.tw/about/privacy_policy" target="_blank">
                        隱私保護
                      </a>
                      <a href="https://hhh.com.tw/about/" target="_blank">
                        關於我們
                      </a>
                      <a href="https://hhh.com.tw/about/timeline/" target="_blank">
                        公司歷程
                      </a>
                      <a href="https://www.104.com.tw/company/d6hr8sg" target="_blank">
                        企業徵才
                      </a>
                      <a href="https://hhh.com.tw/about/sitemap/" target="_blank">
                        網站地圖
                      </a>
                    </section>
                  </div>
                </div>
              </section>
            </div>
            <h2 class="d-none d-md-block">
              幸福空間 版權所有 © Gorgeous Space Co.Ltd. All Rights Reserved
            </h2>
            <h2 class="d-block d-md-none">
              幸福空間 版權所有 <br> © Gorgeous Space Co.Ltd. All Rights Reserved
            </h2>
          </div>
        </div>
      </footer>
    </div>
  </div>
</nav>

<script>
  // 登入
  function hhh_user_api_login() {
    window.location.href = `https://hhh.com.tw/users`;
  }

  let userData = [];

  function hhh_user_api() {
    console.log('登入');
    $.ajax({
      method: "post",
      url: "https://hhh.com.tw/adapter/index?http_method=GET&api_url=/base/v1/member/index",
      // async: false,
      dataType: "json",
    }).done(function (msg) {
      userData = msg;
      let app_user = "";
      console.log('hhh_user_msg', msg);
      if (msg.status == "Success") {
        app_user += `
        <div class="dropdown">
          <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" onclick="hhh_user_api_login()">
            <div class="d-flex align-items-center">
              <img src="${msg.data["user_avatar"]}" alt="user_avatar" class="user-avatar">
              <p class="ms-2">${msg.data["name"]}</p>
            </div>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="https://hhh.com.tw/users">會員專區</a></li>
          </ul>
        </div>`;
      } else {
        app_user += `
        <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
          <section class="d-flex align-items-center">
            <img src="../../img/icon/material-people.svg" alt="" class="me-2" />
            <span>登入</span>
          </section>
        </a>`;
      }
      $("#app_user").html(app_user);
    }).fail(function (err) {
      console.log('err', err);
    });
  }

  hhh_user_api();

  // 首頁搜尋
  $(".search-modal .keyword-list li").on("click", (e) => {
    dataLayer.push({
      'event': 'Click_Promo_Keyword',
      'promo_keyword': `${e.target.innerText}`,
      'promo_category': 'All_Search'
    });
    location.href = `https://hhh.com.tw/search/lists/case/${e.target.innerText}-keyword/`;
  });

  $(".search-modal #search-input").on("click", () => {
    let keyword = $(".search-modal .keyword").val();

    dataLayer.push({
      'event': 'View_Search_Results',
      'search_term': `${keyword}`,
      'search_category': 'All_Search'
    });

    location.href = `https://hhh.com.tw/search/lists/case/${keyword}-keyword/`;
  });

  $(".search-modal .keyword").on("keydown", (event) => {
    if (event.key === "Enter") {
      let keyword = $(".search-modal .keyword").val();

      dataLayer.push({
        'event': 'View_Search_Results',
        'search_term': `${keyword}`,
        'search_category': 'All_Search'
      });

      location.href = `https://hhh.com.tw/search/lists/case/${keyword}-keyword/`;
    }
  });

  $(".nav-item.dropdown .nav-link").on("click", function () {
    $(this).find(".expand").toggleClass("rotate")
  });

  $(".nav-item.dropdown").on("click", function () {
    if (window.innerWidth > 991) {
      $(".dropdown-menu").removeClass("show");
      $(".nav-link").removeClass("show");
    }
  });

  // 開啟手機選單時隱藏 body
  $(".mb-menu-btn").on("click", function () {
    $('#navbar').toggleClass("show");
  });
</script>