appscms-tools-theme 4.6.8 → 4.7.0

data/_includes/appscms/navbars/toolbar.html

@@ -1,9 +1,90 @@
 
+<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 -%}
 <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"
@@ -14,6 +95,22 @@
             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">
+           
+            <button class="mobile-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 id="mobile-results" class="mobile-searchbarResults"></div>
+        </div>
+      </div>
+        {%- endif -%}
+      
         {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
         <li class="appscms-toolbar-list-item">
           <span
@@ -44,41 +141,39 @@
               <div class="col-md-8">
                 <div class="appscms-other-tools">
                   <div class="expand_menu-name-categiry">OTHER TOOLS</div>
-                  {% assign link_count = item.links | size %} {% if link_count >
-                  0 %} {% assign half = link_count | divided_by: 2 %} {% assign
-                  remainder = link_count | modulo: 2 %}
+
+                  {% 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 item.links | slice: 0, half -%}
+                        {%- for i in second_half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
-                          <ul class=""></ul>
+                         
                         </li>
-                        {%- endfor -%} {%- if remainder != 0 -%}
-                        <li>
-                          <a href="{{ item.links[half].url }}"
-                            >{{ item.links[half].name }}</a
-                          >
-                          <ul class=""></ul>
-                        </li>
-                        {%- endif -%}
+                        {%- endfor -%}
                       </ul>
                     </div>
                     <div class="col-md-6">
                       <ul class="mega_menu">
-                        {%- for i in item.links | slice: half | plus: remainder,
-                        link_count - half - remainder -%}
+                        {%- for i in first_half | slice: 0, half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
-                          <ul class=""></ul>
+                         
                         </li>
-                        {%- endfor -%}
+                        {%- endfor -%} 
                       </ul>
                     </div>
+                   
+                   
                   </div>
-                  {% endif %}
+                 
                 </div>
               </div>
             </div>
@@ -115,48 +210,39 @@
               <div class="col-lg-6">
                 <div class="appscms-other-tools">
                   <div class="expand_menu-name-categiry">OTHER TOOLS</div>
-                  {% assign link_count = item.links | size %} {% if link_count >
-                  0 %} {% assign half = link_count | divided_by: 2 %} {% assign
-                  remainder = link_count | modulo: 2 %}
-
                   <div class="row">
-                    <div class="col-lg-6">
+                    <div class="col-md-6">
                       <ul class="mega_menu">
-                        {%- for i in item.links | slice: 0, half -%}
+                        {%- for i in second_half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
-                          <ul class=""></ul>
+                         
                         </li>
-                        {%- endfor -%} {%- if remainder != 0 -%}
-                        <li>
-                          <a href="{{ item.links[half].url }}"
-                            >{{ item.links[half].name }}</a
-                          >
-                          <ul class=""></ul>
-                        </li>
-                        {%- endif -%}
+                        {%- endfor -%}
                       </ul>
                     </div>
-                    <div class="col-lg-6">
+                    <div class="col-md-6">
                       <ul class="mega_menu">
-                        {%- for i in item.links | slice: half | plus: remainder,
-                        link_count - half - remainder -%}
+                        {%- for i in first_half | slice: 0, half -%}
                         <li>
                           <a href="{{ i.url }}">{{ i.name }}</a>
-                          <ul class=""></ul>
+                         
                         </li>
-                        {%- endfor -%}
+                        {%- endfor -%} 
                       </ul>
                     </div>
+                   
+                   
                   </div>
-                  {% endif %}
                 </div>
               </div>
             </div>
           </div>
         </li>
         {%- endfor -%}
+        <button class="scroll-right">&#10095;</button>
       </div>
+
     </div>
   </div>
 </div>
@@ -243,3 +329,101 @@
 {%- 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>