_includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.6.9 vs _includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.7.0
- old
+ new
@@ -1,21 +1,118 @@
+<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">❮</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"
/>
</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
class="appscms-toolbar-list-item-span d-flex justify-content-between"
>
@@ -42,45 +139,43 @@
</div>
</div>
<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>
</div>
</li>
@@ -113,52 +208,43 @@
</div>
</div>
<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">❯</button>
</div>
+
</div>
</div>
</div>
{%- else -%}
<div class="appscms-toolbar">
@@ -241,5 +327,103 @@
</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>
\ No newline at end of file