hhh_index_dev/hhh_index/template/nav-new.html

<nav class="navbar navbar-expand-lg navbar-light bg-light p-2 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">
      <img src="./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" width="130" class="logo" />
    </a>
    <button class="navbar-toggler p-0" 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 mb-2 mb-lg-0 ms-auto align-items-lg-center">
        <!-- <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="./hhh_index/images/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 mt-lg-2" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="./hhh_index/images/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">專欄文章</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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <span class="nav-link d-flex align-items-center justify-content-between mt-lg-1 py-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 m-0">
              <div class="dropdown ps-0 ps-lg-4 pe-0 pe-lg-2">
                <a class="nav-link ps-5 ps-lg-2 py-3 py-lg-2" 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 mt-lg-2" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="./hhh_index/images/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">空間靈感</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 mt-lg-2" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="./hhh_index/images/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">設計師</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/2022_Emerging/" 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>
          </ul>
        </li>

        <li class="nav-item dropdown">
          <span class="nav-link d-flex align-items-center justify-content-between mt-lg-2" role="button"
            data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="false">
            <section class="d-flex">
              <img src="./hhh_index/images/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">裝修影片</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/builder/lists/"
              target="_blank">
              <img src="./hhh_index/images/menu/building.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 mt-lg-2" href="https://hhh.com.tw/forum/category/"
              target="_blank">
              <img src="./hhh_index/images/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 mt-1" id="app_user">
          <!-- <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
            <section class="d-flex align-items-center">
              <img src="./hhh_index/images/icon/material-people.svg" alt="" class="me-2 mt-1" />
              <span class="pt-1">登入</span>
            </section>
          </a> -->

        </li>
        <!-- 暫時隱藏 -->
        <!-- <li class="nav-item">
          <a class="nav-link" href="#">
            <section class="d-flex align-items-center">
              <img src="./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 mt-1" href="javascript:;" type="button" data-bs-toggle="modal"
            data-bs-target="#searchModal">
            <span>
              <button type="button" class="search-btn">
                <img src="./hhh_index/images/icon/ionic-ios-search.svg" alt="" />
              </button>
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // 首頁搜尋
  $(".search-modal .keyword-list li").on("click", (e) => {
    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();
    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");
    }
  });
</script>