main-navbar.liquid

{{ 'navbar.css' | asset_url | preload_tag }}

{% style %}
  :root{
    --yc-nav-height: {{ section.settings.navbar_height }}px;
    --yc-nav-background: {{ section.settings.navbar_background_color.hex }};
    --yc-nav-links-color: {%- if section.settings.navbar_links_color -%}
      {{ section.settings.navbar_links_color.hex }}
    {%- else -%}
      var(--yc-neutral-color){%- endif -%};
    --yc-nav-links-font-weight: {{ section.settings.navbar_links_font_weight }};
    --yc-nav-links-hover-transparency: {{ section.settings.navbar_links_hover_transparency }};
    --yc-nav-font-family: {%- if section.settings.navbar_font_family -%}
      {{ section.settings.navbar_font_family }}, sans-serif{%- else -%}
      var(--yc-font-family){%- endif -%};
    --yc-nav-font-size: {{ section.settings.navbar_font_size }}px;
  }

  .toggle-navbar {
    display: {{ section.settings.toggle_navbar ? 'none' : 'block' }};
  }

  .menu .menu-toggler {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    transform: scale(calc(var(--size) / 100));
  }

  .menu .menu-toggler ion-icon {
    color: var(--color) !important;
  }
{% endstyle %}

{% if section.settings.toggle_navbar != true %}
  <header class='yc-header {%if section.settings.navbar_always_on_top%} nav-fixed {%endif%}'>
    {%- if section.settings.navbar_font_family -%}
      <link
        href='https://fonts.googleapis.com/css2?family={{ section.settings.navbar_font_family }}:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'
        rel='stylesheet'
      >
    {%- endif -%}
    <nav class='yc-navbar container'>
      {%- for block in section.blocks -%}
        {%- case block.type %}
          {%- when 'logo' %}
            <div class='logo'>
              <a href='/' aria-label='home'>
                <img
                  src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-logo.webp' | asset_url }} {%- endif -%}'
                  alt='{{ store.name }}'
                  width="110" height="70"
                >
              </a>
            </div>
          {%- when 'menu' %}
            <div
              class='menu'
              style='
                --background-color: {{ block.settings.navbar_menu_background_color.hex }};
                --border-radius: {{ block.settings.navbar_menu_border_radius }}%;
                --color:{%- if block.settings.navbar_menu_icon_color.hex -%}
                          {{ block.settings.navbar_menu_icon_color.hex }}
                        {%- else -%}
                          var(--yc-nav-links-color)
                        {%- endif -%};
                --size: {{ block.settings.navbar_menu_size }};
              '
            >
              <button
                class='menu-toggler text-3xl'
                onclick="openDrawer('.navbar-drawer')"
                aria-label='open menu'
              >
                <ion-icon name='menu-outline'></ion-icon>
              </button>
              <ul class='menu-list'>
                {% for item in main-link-list.links %}
                  <li class='menu-item {%-if item.active-%} active {%-endif%}'>
                    <a href='{{ item.url }}'>{{ item.title }}</a>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {%- when 'search_and_cart' %}
            <div class='corner'>
              <button
                class='search'
                onclick='openSearch()'
                aria-label="search"
              >
                <ion-icon name="search-outline"></ion-icon>
              </button>
              <div id='searchInputHolder'>
                <div class='container flex justify-center'>
                  <form
                    action='/search'
                    method='GET'
                    class='input w-full flex gap-1 items-center'
                  >
                    <input
                      placeholder='{{ 'navbar.search.placeholder' | t }}'
                      type='text'
                      name='q'
                      value=''
                      class='w-full'
                    >
                    <button
                      type='submit'
                      class='search-btn'
                    >
                      <ion-icon name="search-outline"></ion-icon>
                    </button>
                  </form>
                </div>
              </div>
              <button class='cart relative' id='navbar-cart-icon' onclick='preventCartDrawerOpening("{{ template.name }}")'>
                <span id='cart-items-badge'>
                  {{- cart.items | size -}}
                </span>
                <ion-icon name="cart-outline"></ion-icon>
              </button>
            </div>
        {%- endcase %}
      {%- endfor -%}
    </nav>
  </header>
  <section class='navigation-drawer navbar-drawer block md:hidden'>
    <div class='close-drawer-btn'>
      <ion-icon name="close-outline" class='close-svg'></ion-icon>
    </div>
    <div class='logo flex items-center justify-center'>
      <a href='/' aria-label="home">
        <img
          src='{%- if section.settings.navbar_logo.src -%} {{ section.settings.navbar_logo.src }} {%- else -%} {{ 'default-logo.webp' | asset_url }} {%- endif -%}'
          alt='{{ store.name }}'
          width="110" height="70"
        >
      </a>
    </div>
    <form
      action='/search'
      method='GET'
      class='mobile-search w-full flex gap-1 items-center'
    >
      <input
        placeholder='{{ 'navbar.search.placeholder' | t }}'
        type='text'
        name='q'
        value=''
        class='w-full'
      />
      <button
        type='submit'
        aria-label='search'
      >
        <ion-icon name="search-outline" class="search-icon"></ion-icon>
      </button>
    </form>
    <div class='flex flex-col items-wrapper'>
      {% for item in main-link-list.links %}
        <a
          class='items flex items-center justify-between'
          href='{{ item.url }}'
        >
          <div>
            {{ item.title }}
          </div>
          <ion-icon name='chevron-forward-outline'></ion-icon>
        </a>
      {% endfor %}
    </div>
  </section>
{% endif %}

{%- schema -%}
{
  "label": "Navbar",
  "limit": 1,
  "blocks": [
    {
      "label": "Logo",
      "limit": 1,
      "type": "logo"
    },
    {
      "label": "Menu",
      "limit": 1,
      "type": "menu",
      "settings": [
        {
          "type": "color",
          "id": "navbar_menu_background_color",
          "label": "Background color",
          "default": "#00000000"
        },
        {
          "type": "color",
          "id": "navbar_menu_icon_color",
          "label": "Icon color"
        },
        {
          "type": "range",
          "id": "navbar_menu_size",
          "min": 1,
          "step": 1,
          "max": 200,
          "unit": "%",
          "label": "Size",
          "default": 100
        },
        {
          "type": "range",
          "id": "navbar_menu_border_radius",
          "min": 0,
          "step": 1,
          "max": 50,
          "unit": "%",
          "label": "Border radius",
          "default": 0
        }
      ]
    },
    {
      "label": "Search and cart",
      "limit": 1,
      "type": "search_and_cart"
    }
  ],
  "settings": [
    {
      "type": "paragraph",
      "content": "Main menu can be managed from your [Menu settings](https:\/\/seller-area.youcan.shop\/admin\/menus)"
    },
    {
      "type": "checkbox",
      "id": "toggle_navbar",
      "label": "Hide navbar",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "navbar_logo",
      "label": "Logo"
    },
    {
      "type": "range",
      "id": "navbar_height",
      "min": 20,
      "max": 150,
      "step": 1,
      "unit": "px",
      "label": "Height",
      "default": 60
    },
    {
      "type": "color",
      "id": "navbar_background_color",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "navbar_links_color",
      "label": "Items and links color"
    },
    {
      "type": "range",
      "id": "navbar_links_hover_transparency",
      "min": 0,
      "max": 1,
      "step": 0.10000000000000001,
      "unit": "",
      "label": "Links hover transparency",
      "default": 0.80000000000000004
    },
    {
      "type": "select",
      "id": "navbar_links_font_weight",
      "label": "Links font weight",
      "options": [
        {
          "value": "300",
          "label": "Light"
        },
        {
          "value": "400",
          "label": "Normal"
        },
        {
          "value": "500",
          "label": "Bold"
        },
        {
          "value": "700",
          "label": "Heavy"
        }
      ],
      "default": "400"
    },
    {
      "type": "select",
      "id": "navbar_font_family",
      "label": "Font family",
      "options": [
        {
          "value": "",
          "label": "Default"
        },
        {
          "value": "Roboto",
          "label": "Roboto"
        },
        {
          "value": "Open Sans",
          "label": "Open Sans"
        },
        {
          "value": "Lato",
          "label": "Lato"
        },
        {
          "value": "Oswald",
          "label": "Oswald"
        },
        {
          "value": "Raleway",
          "label": "Raleway"
        },
        {
          "value": "Montserrat",
          "label": "Montserrat"
        }
      ],
      "default": ""
    },
    {
      "type": "checkbox",
      "id": "navbar_always_on_top",
      "label": "Navbar always on top",
      "default": false
    }
  ]
}
{%- endschema -%}