_includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.8.3 vs _includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.8.4
- old
+ new
@@ -1,254 +1,441 @@
+<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">❮</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">
<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>
+
</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>
- </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>
+ </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 %}
- <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>
+ {% 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>
</div>
- </section>
+ </div>
{%- endif -%}
+
</div>
</div>
- </nav>
+ </li>
{%- endfor -%}
<button class="scroll-right">❯</button>
</div>
+
</div>
</div>
</div>
{%- else -%}
<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"
- />
+ <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">
<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 -%} {%- 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">❯</button>
</div>
</div>
</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