appscms-tools-theme 4.8.3 → 4.8.4

data/_includes/appscms/navbars/toolbar.html

@@ -1,88 +1,157 @@
+<style>
+  .mobile-search-bar {
+    position: relative;
+    height: 100px;
+    width: 100%;
+    display: none;
+  }
+
+  .mobile-search-container {
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+    height: 38px;
+    margin: 20px 0px 20px 0px;
+    background-color: white;
+    position: relative;
+  }
+
+  .mobile-search-input {
+    flex: 1;
+    border: none;
+    padding: 12px 16px;
+    font-size: 16px;
+    outline: none;
+  }
+
+  .mobile-search-input::placeholder {
+    color: #888;
+  }
+
+  .mobile-search-button {
+    background-color: #000;
+    border: none;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .mobile-search-button svg {
+    /* fill: #fff; */
+    height: 20px;
+  }
+
+  .mobile-search-button:active {
+    background-color: #555;
+  }
+
+  .mobile-nav-search {
+    position: relative;
+  }
+
+  .mobile-result-item {
+    padding: 9px 12px;
+  }
+
+  .mobile-result-item a {
+    color: #222325;
+  }
+
+  .mobile-searchbarResults {
+    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: fixed;
+    margin-top: 42px;
+    width: 244px;
+    height: 400px;
+    overflow-y: scroll;
+    z-index: 101;
+    display: none;
+  }
+</style>
+
 {%- if site.newToolBar and page.lang == 'en' -%}
-<div class="appscms-toolbar">
+<div class="appscms-toolbar"> 
   <div class="row">
     <div class="col-11 mx-auto">
       <div class="appscms-toolbar-list">
         <button class="scroll-left">&#10094;</button>
         <div id="close-nav-ham" data-open="1" class="close-nav-ham">
-          <img
-            class="mt-3"
-            style="cursor: pointer"
-            height="30px"
-            width="30px"
-            src="/assets/images/close-button.svg"
-            alt="close-button"
-          />
+          <img class="mt-3" style="cursor: pointer" height="30px" width="30px" src="/assets/images/close-button.svg"
+            alt="close-button" />
         </div>
         {%- if site.navigationSearch -%}
         <div class="mobile-search-bar">
           <div class="mobile-search-container">
-            <input
-              type="text"
-              class="mobile-search-input"
-              placeholder="Search Tools"
-            />
+            <input type="text" class="mobile-search-input" placeholder="Search Tools">
             <button class="mobile-search-button">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="#ffffff"
-              >
+              <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_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>
+                    stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                 </g>
               </svg>
             </button>
             <div id="mobile-results" class="mobile-searchbarResults"></div>
           </div>
         </div>
-        {%- endif -%} {%- if Data.megaMenu -%} {%- for item in
-        Data.megaMenu.dropdown -%}
-        <nav class="appscms-toolbar-list-item">
-          <span
-            class="appscms-toolbar-list-item-span d-flex justify-content-between"
-          >
+        {%- endif -%}
+
+        {%- if Data.megaMenu -%} 
+        {%- for item in Data.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
             {{ item.categoryName }}
           </span>
           <div class="list-item-dropdown">
             <div class="row">
               {% if item.featuredLinks.size > 0 %}
-              <section class="col-lg-4 col-md-6 appscms-featured-tools">
-                <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
-                {%- for i in item.featuredLinks -%}
-                <a href="{{i.url}}" class="category-tools__item">
-                  <figure class="icon_box v_2 v2">
-                    <img src="{{i.iconSrc}}" alt="image for tools" />
-                  </figure>
-                  <div class="category-tools__content">
-                    <h4>{{i.name}}</h4>
-                    <p class="category-tools__descr gray">{{i.text}}</p>
+              <div class="col-lg-4 col-md-6">
+                <div class="appscms-featured-tools">
+                  <div class="category-tools">
+                    <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
+                    {%- for i in item.featuredLinks -%}
+                    <a href="{{i.url}}" class="category-tools__item">
+                      <div class="icon_box v_2 v2">
+                        <img src="{{i.iconSrc}}" alt="icon-img" />
+                      </div>
+                      <div class="category-tools__content">
+                        <h4>{{i.name}}</h4>
+                        <p class="category-tools__descr gray">{{i.text}}</p>
+                      </div>
+                    </a>
+                    {%- endfor -%}
                   </div>
-                </a>
-                {%- endfor -%}
-              </section>
-              {%- endif -%} {%- if item.links.size > 0 -%}
+                </div>
+              </div>
+              {%- endif -%}
+              {%- if item.links.size > 0 -%}
               <div class="col-md-8">
                 <div class="appscms-other-tools">
                   <div class="expand_menu-name-categiry">OTHER TOOLS</div>
 
-                  {% assign array_size = item.links | size %} {% assign
-                  half_size = array_size | divided_by: 2 %} {% assign first_half
-                  = item.links | slice: 0, half_size %} {% assign second_half =
-                  item.links | slice: half_size, array_size %}
+                  {% assign array_size = item.links | size %}
+                  {% assign half_size = array_size | divided_by: 2 %}
+
+                  {% assign first_half = item.links | slice: 0, half_size %}
+                  {% assign second_half = item.links | slice: half_size, array_size %}
+
 
                   <div class="row">
                     <div class="col-md-6">
@@ -90,8 +159,10 @@
                         {%- for i in first_half | slice: 0, half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
+
                         </li>
                         {%- endfor -%}
+
                       </ul>
                     </div>
                     <div class="col-md-6">
@@ -99,78 +170,97 @@
                         {%- for i in second_half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
+
                         </li>
                         {%- endfor -%}
                       </ul>
                     </div>
+
+
                   </div>
+
                 </div>
               </div>
               {%- endif -%}
             </div>
           </div>
-        </nav>
-        {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
-        -%}
-        <nav class="appscms-toolbar-list-item">
-          <span
-            class="appscms-toolbar-list-item-span d-flex justify-content-between"
-          >
+        </li>
+        {%- endfor -%} 
+        {%- endif -%}
+
+        {%- for item in siteData.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
             {{ item.categoryName }}
           </span>
           <div class="list-item-dropdown">
             <div class="row">
               {%- if item.featuredLinks.size > 0 -%}
-              <section class="col-lg-4 col-md-6 appscms-featured-tools">
-                <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
-                {%- for i in item.featuredLinks -%}
-                <a href="{{i.url}}" class="category-tools__item">
-                  <figure class="icon_box v_2 v2">
-                    <img src="{{i.iconSrc}}" alt="icon-img" />
-                  </figure>
-                  <div class="category-tools__content">
-                    <h4>{{i.name}}</h4>
-                    <p class="category-tools__descr gray">{{i.text}}</p>
+              <div class="col-lg-4 col-md-6">
+                <div class="appscms-featured-tools">
+                  <div class="category-tools">
+                    <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
+                    {%- for i in item.featuredLinks -%}
+                    <a href="{{i.url}}" class="category-tools__item">
+                      <div class="icon_box v_2 v2">
+                        <img src="{{i.iconSrc}}" alt="icon-img" />
+                      </div>
+                      <div class="category-tools__content">
+                        <h4>{{i.name}}</h4>
+                        <p class="category-tools__descr gray">{{i.text}}</p>
+                      </div>
+                    </a>
+                    {%- endfor -%}
+                  </div>
+                </div>
+              </div>
+              {%- endif -%}
+              {%- if item.links.size > 0 -%}
+              <div class="col-lg-6">
+                <div class="appscms-other-tools">
+                  <div class="expand_menu-name-categiry">OTHER TOOLS</div>
+                  {% assign array_size = item.links | size %}
+                  {% assign half_size = array_size | divided_by: 2 %}
+
+                  {% assign first_half = item.links | slice: 0, half_size %}
+                  {% assign second_half = item.links | slice: half_size, array_size %}
+
+                  <div class="row">
+                    <div class="col-md-6">
+                      <ul class="mega_menu">
+                        {%- for i in first_half | slice: 0, half -%}
+                        <li>
+                          <a href="{{ i.url }}">{{ i.name }}</a>
+
+                        </li>
+                        {%- endfor -%}
+                      </ul>
+                    </div>
+                    <div class="col-md-6">
+                      <ul class="mega_menu">
+
+                        {%- for i in second_half -%}
+                        <li>
+                          <a href="{{ i.url }}">{{ i.name }}</a>
+
+                        </li>
+                        {%- endfor -%}
+                      </ul>
+                    </div>
+
+
                   </div>
-                </a>
-                {%- endfor -%}
-              </section>
-              {%- endif -%} {%- if item.links.size > 0 -%}
-              <section class="col-lg-6 col-md-8 appscms-other-tools">
-                <div class="expand_menu-name-categiry">OTHER TOOLS</div>
-                {% assign array_size = item.links | size %} {% assign half_size
-                = array_size | divided_by: 2 %} {% assign first_half =
-                item.links | slice: 0, half_size %} {% assign second_half =
-                item.links | slice: half_size, array_size %}
-
-                <div class="row">
-                  <nav class="col-md-6">
-                    <ul class="mega_menu">
-                      {%- for i in first_half | slice: 0, half -%}
-                      <li>
-                        <a href="{{ i.url }}">{{ i.name }}</a>
-                      </li>
-                      {%- endfor -%}
-                    </ul>
-                  </nav>
-                  <nav class="col-md-6">
-                    <ul class="mega_menu">
-                      {%- for i in second_half -%}
-                      <li>
-                        <a href="{{ i.url }}">{{ i.name }}</a>
-                      </li>
-                      {%- endfor -%}
-                    </ul>
-                  </nav>
                 </div>
-              </section>
+              </div>
               {%- endif -%}
+
             </div>
           </div>
-        </nav>
+        </li>
         {%- endfor -%}
         <button class="scroll-right">&#10095;</button>
       </div>
+
     </div>
   </div>
 </div>
@@ -181,47 +271,47 @@
       <div class="appscms-toolbar-list">
         <button class="scroll-left">&#10094;</button>
         <div id="close-nav-ham" data-open="1" class="close-nav-ham">
-          <img
-            class="mt-3"
-            style="cursor: pointer"
-            height="30px"
-            width="30px"
-            src="/assets/images/close-button.svg"
-            alt="close-button"
-          />
+          <img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
+            alt="close-button">
         </div>
-        {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
-        <nav class="appscms-toolbar-list-item">
-          <span
-            class="appscms-toolbar-list-item-span d-flex justify-content-between"
-          >
+        {%- if Data.megaMenu -%}
+        {%- for item in Data.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
             {{ item.categoryName }}
           </span>
           <div class="list-item-dropdown">
-            <h4 class="list-item-dropdown-heading">{{ Data.nav-link-name }}</h4>
+            <h4 class="list-item-dropdown-heading">
+              {{ Data.nav-link-name }}
+            </h4>
             <div class="row">
-              {%- assign count = 0 -%} {%- for i in item.links -%} {%- assign
-              count = count | plus: 1 -%} {%- if count == 1 -%} {%- if site.name
-              == "olarandoms" -%}
+              {%- assign count = 0 -%}
+              {%- for i in item.links -%}
+              {%- assign count = count | plus: 1 -%}
+              {%- if count == 1 -%}
+              {%- if site.name == "olarandoms" -%}
               <div class="col-xl-6">
                 {%- else -%}
                 <div class="col-md-6 col-lg-4">
-                  {%- endif -%} {%- endif -%} {%- if count == 6 -%}
+                  {%- endif -%}
+                  {%- endif -%}
+                  {%- if count == 6 -%}
                   <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                 </div>
-                {%- assign count = 0 -%} {%- else -%}
+                {%- assign count = 0 -%}
+                {%- else -%}
                 <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
-                {%- endif -%} {%- endfor -%}
+                {%- endif -%}
+                {%- endfor -%}
               </div>
             </div>
-          </div>
-        </nav>
-        {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
-        -%}
-        <nav class="appscms-toolbar-list-item">
-          <span
-            class="appscms-toolbar-list-item-span d-flex justify-content-between"
-          >
+        </li>
+        {%- endfor -%}
+        {%- endif -%}
+
+        {%- for item in siteData.megaMenu.dropdown -%}
+        <li class="appscms-toolbar-list-item">
+          <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
             {{ item.categoryName }}
           </span>
           <div class="list-item-dropdown">
@@ -229,22 +319,27 @@
               {{ 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 -%} {%- if site.name
-              == "olarandoms" -%}
+              {%- assign count = 0 -%}
+              {%- for i in item.links -%}
+              {%- assign count = count | plus: 1 -%}
+              {%- if count == 1 -%}
+              {%- if site.name == "olarandoms" -%}
               <div class="col-xl-6">
                 {%- else -%}
                 <div class="col-md-6 col-lg-4">
-                  {%- endif -%} {%- endif -%} {%- if count == 6 -%}
+                  {%- endif -%}
+                  {%- endif -%}
+                  {%- if count == 6 -%}
                   <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
                 </div>
-                {%- assign count = 0 -%} {%- else -%}
+                {%- assign count = 0 -%}
+                {%- else -%}
                 <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
-                {%- endif -%} {%- endfor -%}
+                {%- endif -%}
+                {%- endfor -%}
               </div>
             </div>
-          </div>
-        </nav>
+        </li>
         {%- endfor -%}
         <button class="scroll-right">&#10095;</button>
       </div>
@@ -252,3 +347,95 @@
   </div>
 </div>
 {%- endif -%}
+
+
+
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const scrollContainer = document.querySelector(".appscms-toolbar-list");
+    const scrollLeft = document.querySelector(".scroll-left");
+    const scrollRight = document.querySelector(".scroll-right");
+
+    function updateScrollButtons() {
+      scrollLeft.style.display =
+        scrollContainer.scrollLeft > 0 ? "block" : "none";
+      scrollRight.style.display =
+        scrollContainer.scrollWidth >
+          scrollContainer.clientWidth + scrollContainer.scrollLeft
+          ? "block"
+          : "none";
+    }
+
+    scrollLeft.addEventListener("click", function () {
+      scrollContainer.scrollLeft -= 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollRight.addEventListener("click", function () {
+      scrollContainer.scrollLeft += 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollContainer.addEventListener("scroll", updateScrollButtons);
+
+    // Initial check to hide buttons if necessary
+    updateScrollButtons();
+  });
+
+</script>
+
+<style>
+  .scroll-container {
+    display: flex;
+    align-items: center;
+    background-color: #333;
+    position: relative;
+  }
+
+  .scroll-left,
+  .scroll-right {
+    background-color: #4456f6f7;
+    color: white;
+    border: none;
+    height: 40px;
+    cursor: pointer;
+    position: absolute;
+    width: 40px;
+    top: 50%;
+    z-index: 100;
+    transform: translateY(-50%);
+  }
+
+  .scroll-left {
+    left: 0;
+  }
+
+  .scroll-right {
+    right: 0;
+  }
+
+  .scroll-left:hover,
+  .scroll-right:hover {
+    background-color: #8691f6f7;
+  }
+
+  .navbar {
+    /* overflow-x: auto; */
+    white-space: nowrap;
+    flex-grow: 1;
+    scroll-behavior: smooth;
+    display: flex;
+  }
+
+  .navbar ul {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    list-style-type: none;
+  }
+
+  .navbar li {
+    display: inline;
+  }
+</style>