appscms-tools-theme 4.8.3 → 4.8.4

data/_includes/appscms/navbars/devtool-toolbar.html

@@ -1,100 +1,100 @@
-{%- if siteData.megaMenu -%}
-<div class="appscms-toolbar">
-  <div class="row">
-    <div class="col-11 mx-auto">
-      <ul class="appscms-toolbar-list">
-        <div id="close-nav-ham" data-open="1" class="close-nav-ham">
-          <svg
-            height="50px"
-            width="1em"
-            style="font-size: 25px"
-            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">
-              <g clip-path="url(#clip0_429_11083)">
-                <path
-                  d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006"
-                  stroke="#ffffff"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                ></path>
-              </g>
-              <defs>
-                <clipPath id="clip0_429_11083">
-                  <rect width="24" height="24" fill="white"></rect>
-                </clipPath>
-              </defs>
-            </g>
-          </svg>
-        </div>
-        {%- for item in siteData.megaMenu.dropdown -%}
-        <li class="appscms-toolbar-list-item">
-          <span
-            class="appscms-toolbar-list-item-span d-flex justify-content-between" style="color: rgb(240, 240, 240);"
-          >
-            {{item.categoryName}}
-            <svg
-              class="arrow-svg"
-              fill="#fff"
-              width="12px"
-              hegiht="12px"
-              version="1.1"
-              id="Capa_1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              viewBox="0 0 30.727 30.727"
-              xml:space="preserve"
-            >
-              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g
-                id="SVGRepo_tracerCarrier"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ></g>
-              <g id="SVGRepo_iconCarrier">
-                <g>
-                  <path
-                    d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"
-                  ></path>
-                </g>
-              </g>
-            </svg>
-          </span>
-
-          <ul class="list-item-dropdown">
-            <h4 class="list-item-dropdown-heading">
-              {{siteData.megaMenu.nav-link-name}}
-            </h4>
-            <div class="row">
-              {%- assign count = 0 -%} {% for i in item.links %} {% assign count
-              = count | plus:1 %} {%- if count == 1 -%}
-              <div class="col-md-6 col-lg-4 col-xl-3">
-                {%- endif -%} {% if count == 6 %}
-                <li>
-                  <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
-                </li>
-              </div>
-              {% assign count = 0 %} {%- else -%}
-              <li>
-                <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
-              </li>
-              {% endif %} {% endfor %}
-            </div>
-          </ul>
-        </li>
-        {%- endfor -%}
-      </ul>
-    </div>
-  </div>
-</div>
-{%- endif -%}
+{%- if siteData.megaMenu -%}
+<div class="appscms-toolbar">
+  <div class="row">
+    <div class="col-11 mx-auto">
+      <ul class="appscms-toolbar-list">
+        <div id="close-nav-ham" data-open="1" class="close-nav-ham">
+          <svg
+            height="50px"
+            width="1em"
+            style="font-size: 25px"
+            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">
+              <g clip-path="url(#clip0_429_11083)">
+                <path
+                  d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006"
+                  stroke="#ffffff"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </g>
+              <defs>
+                <clipPath id="clip0_429_11083">
+                  <rect width="24" height="24" fill="white"></rect>
+                </clipPath>
+              </defs>
+            </g>
+          </svg>
+        </div>
+        {%- for item in siteData.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span
+            class="appscms-toolbar-list-item-span d-flex justify-content-between" style="color: rgb(240, 240, 240);"
+          >
+            {{item.categoryName}}
+            <svg
+              class="arrow-svg"
+              fill="#fff"
+              width="12px"
+              hegiht="12px"
+              version="1.1"
+              id="Capa_1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              viewBox="0 0 30.727 30.727"
+              xml:space="preserve"
+            >
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
+              <g id="SVGRepo_iconCarrier">
+                <g>
+                  <path
+                    d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"
+                  ></path>
+                </g>
+              </g>
+            </svg>
+          </span>
+
+          <ul class="list-item-dropdown">
+            <h4 class="list-item-dropdown-heading">
+              {{siteData.megaMenu.nav-link-name}}
+            </h4>
+            <div class="row">
+              {%- assign count = 0 -%} {% for i in item.links %} {% assign count
+              = count | plus:1 %} {%- if count == 1 -%}
+              <div class="col-md-6 col-lg-4 col-xl-3">
+                {%- endif -%} {% if count == 6 %}
+                <li>
+                  <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
+                </li>
+              </div>
+              {% assign count = 0 %} {%- else -%}
+              <li>
+                <a class="toolbar-link" style="color: rgb(242, 242, 242);" href="{{i.url}}">{{i.name}}</a>
+              </li>
+              {% endif %} {% endfor %}
+            </div>
+          </ul>
+        </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  </div>
+</div>
+{%- endif -%}

data/_includes/appscms/navbars/navbar.html

@@ -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>
+       
+        <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>
-        {%- endif -%}
       </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>
+