{% stories Navbar with {
  "title": "Organisms/Navbar",
  "description": "Navbar component.",
  "argTypes": {
    "container": {
      "name": "Container",
      "description": "container type",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'No container'": "no-container",
        "Container": "container",
        "'Container medium'": "container-md",
        "'Container large'": "container-lg",
        "'Container extra large'": "container-xl",
        "'Container extra extra large'": "container-xxl",
        "'Fluid Container'": "container-fluid"
      }
    },
    "color_mode": {
      "name": "Color",
      "description": "The default color mode for the navigation bar.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Light": "light",
        "Dark": "dark"
      }
    },
    "color": {
      "name": "Color",
      "description": "The default color mode for the navigation bar.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "transparent": "transparent",
        "light": "light",
        "dark": "dark",
        "black": "black",
        "white": "white",
        "primary": "primary",
        "secondary": "secondary",
        "success": "success",
        "danger": "danger",
        "warning": "warning",
        "info": "info"
      }
    },
    "placement": {
      "name": "Placement",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'Fixed Top'": "fixed-top",
        "'Fixed Bottom'": "fixed-bottom",
        "'Sticky Top'": "sticky-top"
      }
    },
    "navbar_expand": {
      "name": "Expanded navbar",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Small": "sm",
        "Medium": "md",
        "Large": "lg",
        "'Extra large'": "xl"
      }
    }
  }
} %}


{% story Light with {
  "name": "Light",
  "args": {
    "container": "container-md",
    "color_mode": "light",
    "color": "white",
    "placement": "fixed-top",
    "navbar_expand": "md",
    "branding": "<div class=\"block block-system block-system-branding-block\"><a href=\"#\" class=\"navbar-brand d-flex align-items-center \" aria-label=\"\"><img src=\"https://git.drupalcode.org/project/vartheme_bs5/-/raw/3.0.x/logo.svg\" alt=\"Varbase Brand logo\" class=\"brand-logo-image\"></a></div>",
    "navigation": "<div class=\"ms-auto\"><div id=\"block-vartheme-bs5-main-menu\" class=\"settings-tray-editable block block-system block-system-menu-blockmain\" data-drupal-settingstray=\"editable\" data-component-id=\"vartheme_bs5:block\"><div class=\"block__content\"><ul data-component-id=\"vartheme_bs5:nav\" class=\"nav navbar-nav\"><li class=\"nav-item\"><a href=\"#\" class=\"nav-link is-active\" data-drupal-link-system-path=\"<front>\">Home</a></li><li class=\"nav-item\"><a href=\"https://www.vardot.com/products-services/product-info/varbase-enterprise-website-platform?%3Futm_source=varbase&amp;utm_campaign=varbase%20default%20links\" class=\"nav-link\" target=\"_blank\" rel=\"noopener\">About Varbase</a></li><li class=\"nav-item\"><a href=\"#\" class=\"nav-link\" data-drupal-link-system-path=\"#\">Blog</a></li><li class=\"nav-item\"><a href=\"#\" class=\"nav-link\" data-drupal-link-system-path=\"webform/contact\">Contact Us</a></li></ul></div></div></div>"
  }
} %}
{{ include('vartheme_bs5:navbar') }}
{% endstory %}


{% story Dark with {
  "name": "Dark",
  "args": {
    "container": "container-md",
    "color_mode": "dark",
    "color": "primary",
    "placement": "fixed-top",
    "navbar_expand": "md",
    "branding": "<div class=\"block block-system block-system-branding-block\"><a href=\"#\" class=\"navbar-brand d-flex align-items-center \" aria-label=\"\"><img src=\"https://git.drupalcode.org/project/vartheme_bs5/-/raw/3.0.x/logo-white.svg\" alt=\"Varbase Brand logo\" class=\"brand-logo-image\"></a></div>",
    "navigation": "<div class=\"ms-auto\"><div id=\"block-vartheme-bs5-main-menu\" class=\"settings-tray-editable block block-system block-system-menu-blockmain\" data-drupal-settingstray=\"editable\" data-component-id=\"vartheme_bs5:block\"><div class=\"block__content\"><ul data-component-id=\"vartheme_bs5:nav\" class=\"nav navbar-nav\"><li class=\"nav-item\"><a href=\"#\" class=\"nav-link is-active\" data-drupal-link-system-path=\"<front>\">Home</a></li><li class=\"nav-item\"><a href=\"https://www.vardot.com/products-services/product-info/varbase-enterprise-website-platform?%3Futm_source=varbase&amp;utm_campaign=varbase%20default%20links\" class=\"nav-link\" target=\"_blank\" rel=\"noopener\">About Varbase</a></li><li class=\"nav-item\"><a href=\"#\" class=\"nav-link\" data-drupal-link-system-path=\"#\">Blog</a></li><li class=\"nav-item\"><a href=\"#\" class=\"nav-link\" data-drupal-link-system-path=\"webform/contact\">Contact Us</a></li></ul></div></div></div>"
  }
} %}
{{ include('vartheme_bs5:navbar') }}
{% endstory %}

{% endstories %}
