_includes/appscms/navbars/navbar.html in appscms-tools-theme-4.8.3 vs _includes/appscms/navbars/navbar.html in appscms-tools-theme-4.8.4
- old
+ new
@@ -1,84 +1,138 @@
-{% assign lang = page.lang | default: "en" %} {% assign siteData =
-site.data.header[lang].data %} {% assign featureData = page.fileName %} {%
-assign folder = page.folderName %} {% assign Data= site.data[folder][lang][file]
-%}
-<nav class="appscms-navbar">
- <div class="row w-100 h-100 col-11 mx-auto">
- <div class="appscms-navbar-nav">
- {%- if siteData.navbarBrandLogoSvg -%}
- <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
- {%- elsif siteData.navbarBrandText -%}
- <span> {{siteData.navbarBrandText}}</span>
- {%- else -%} {%- endif -%}
- <div class="d-flex align-items-center">
- {%- if site.navigationSearch -%}
- <div class="nav-search mr-4">
- <div class="search-container">
- <input
- type="text"
- class="search-input"
- placeholder="Search Tools"
- />
+<style>
+ .search-container {
+ display: flex;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ overflow: hidden;
+ height: 38px;
+ width: 400px;
+ background-color: white;
+ position: relative;
+}
- <button class="search-button">
- <svg
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- stroke="#ffffff"
- >
- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
- <g
- id="SVGRepo_tracerCarrier"
- stroke-linecap="round"
- stroke-linejoin="round"
- ></g>
- <g id="SVGRepo_iconCarrier">
- <path
- d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
- stroke="#ffffff"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- ></path>
- </g>
- </svg>
- </button>
- </div>
+.search-input {
+ flex: 1;
+ border: none;
+ padding: 12px 16px;
+ font-size: 16px;
+ outline: none;
+}
- <div id="results" class="searchbarResults"></div>
- </div>
- {%- endif -%} {%- if siteData.navItems -%}
- <div class="appscms-navbar-nav-links">
+.search-input::placeholder {
+ color: #888;
+}
+
+.search-button {
+ background-color: #3078F2;
+ border: none;
+ padding: 0 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ outline: none;
+ border-radius: 0 !important;
+}
+
+.search-button svg {
+ /* fill: #fff; */
+ height: 20px;
+}
+
+.search-button:active {
+ background-color: #555;
+}
+.nav-search{
+ position: relative;
+}
+.result-item{
+ padding: 9px 12px;
+}
+.result-item a{
+ color: #222325;
+}
+.searchbarResults{
+ overflow: scroll;
+ height: 60vh;
+ background-color: #fff;
+ border: 1px solid #e4e5e7;
+ border-radius: 6px;
+ -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
+ box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #74767e;
+ cursor: default;
+ margin-top: 8px;
+ padding: 12px;
+ position: absolute;
+ width: 100%;
+ z-index: 101;
+ display: none;
+}
+</style>
+{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
+ %} {% assign featureData = page.fileName %} {% assign folder = page.folderName
+ %} {% assign Data= site.data[folder][lang][file] %}
+ <nav class="appscms-navbar">
+ <div class="row w-100 h-100">
+ <div class="col-11 mx-auto">
+ <div class="appscms-navbar-nav">
+ {%- if siteData.navbarBrandLogoSvg -%}
+ <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
+ {%- elsif siteData.navbarBrandText -%}
+ <span> {{siteData.navbarBrandText}}
+ {%- else -%}
+ {%- endif -%}
+ <div class="d-flex align-items-center">
+ {%- if site.navigationSearch -%}
+ <div class="nav-search mr-4">
+ <div class="search-container">
+ <input type="text" class="search-input" placeholder="Search Tools">
+
+ <button class="search-button">
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+ </button>
+ </div>
+
+ <div id="results" class="searchbarResults"></div>
+ </div>
+ {%- endif -%}
+
+
+ {%- if siteData.navItems -%}
+ <div class="appscms-navbar-nav-links">
{%- for item in siteData.navItems -%}
<a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
{%- endfor -%}
+ </div>
+ {%- endif -%}
</div>
- {%- endif -%}
+
+ <div id="hamburger" data-open="false" class="hamburger">
+ <svg
+ style="font-size:25px"
+ stroke="currentColor"
+ fill="currentColor"
+ stroke-width="0"
+ viewBox="0 0 512 512"
+ aria-hidden="true"
+ focusable="false"
+ height="50px"
+ width="1em"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill="none"
+ stroke-linecap="round"
+ stroke-miterlimit="10"
+ stroke-width="48"
+ d="M88 152h336M88 256h336M88 360h336"
+ ></path>
+ </svg>
+ </div>
</div>
-
- <div id="hamburger" data-open="false" class="hamburger">
- <svg
- style="font-size: 25px"
- stroke="currentColor"
- fill="currentColor"
- stroke-width="0"
- viewBox="0 0 512 512"
- aria-hidden="true"
- focusable="false"
- height="50px"
- width="1em"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill="none"
- stroke-linecap="round"
- stroke-miterlimit="10"
- stroke-width="48"
- d="M88 152h336M88 256h336M88 360h336"
- ></path>
- </svg>
</div>
</div>
- </div>
-</nav>
+ </nav>
+