seeds_ui-1.0.x-dev/templates/layout/page.html.twig
templates/layout/page.html.twig
{#
/**
* @file
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template normally located in the
* core/modules/system directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
* - logo: The url of the logo image, as defined in theme settings.
* - site_name: The name of the site. This is empty when displaying the site
* name has been disabled in the theme settings.
* - site_slogan: The slogan of the site. This is empty when displaying the site
* slogan has been disabled in theme settings.
* Page content (in order of occurrence in the default page.html.twig):
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header top region (always visible on desktop and mobile).
* - page.logo: Items for the logo region (always visible in main header on desktop and mobile).
* - page.navigation: Items for the main navigation region (main header on desktop + mobile collapse).
* - page.header_actions: Items for the header actions region (always visible in main header on desktop and mobile).
* - page.collapse_only: Items for the collapse only region (mobile collapse only).
* - page.highlighted: Items for the highlighted region.
* - page.featured_top: Items for the featured top region.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the primary sidebar.
* - page.featured_bottom: Items for the featured bottom region (website accessories, ratings, etc.).
* - page.footer_top: Items for the footer top region.
* - page.footer: Items for the main footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* Theme variables:
* - navbar_top_attributes: Items for the header region.
* - navbar_attributes: Items for the header region.
* - content_attributes: Items for the header region.
* - sidebar_first_attributes: Items for the sidebar region.
* - sidebar_collapse: If the sidebar_first will collapse.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
{% set main_container = is_full_width ? '' : 'container' %}
<div id="page-wrapper">
<div id="page">
<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t }}" x-data="{ isOpen: false }" @keydown.escape="isOpen = false">
{% block head %}
{# Header top region - always visible on desktop and mobile #}
{% if page.header %}
<div class="header-top">
{% if container_navbar %}
<div class="container">
<div class="row">
<div class="col-12">
{% endif %}
<div class="header-top-content">
{{ page.header }}
</div>
{% if container_navbar %}
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
{# Main header / Navigation bar - always visible on desktop and mobile #}
{% if page.logo or page.navigation or page.header_actions or page.collapse_only %}
<div class="header-main">
{% if container_navbar %}
<div class="container">
<div class="row">
<div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
{% endif %}
<div class="header-left d-flex align-items-center">
{# Logo region - always visible on desktop and mobile #}
{% if page.logo %}
<div class="header-logo">
{{ page.logo }}
</div>
{% endif %}
{# Navigation region - main header content on desktop #}
{% if page.navigation %}
<div class="navigation-bar d-none d-lg-flex">
{{ page.navigation }}
</div>
{% endif %}
</div>
<div class="header-right d-flex align-items-center">
{# Header actions - always visible on desktop and mobile #}
{% if page.header_actions %}
<div class="header-actions">
{{ page.header_actions }}
</div>
{% endif %}
{# Mobile toggle button #}
{% if page.navigation or page.collapse_only %}
<button @click="isOpen = !isOpen" type="button" class="navbar-toggler d-block d-lg-none">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
<path x-show="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
</button>
{% endif %}
</div>
{% if container_navbar %}
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
{# Mobile collapse menu #}
{% if page.navigation or page.collapse_only %}
<div class="mobile-collapse d-lg-none">
<div class="collapse-content" :class="{ 'd-flex': isOpen, 'd-none': !isOpen }" x-show="isOpen" x-transition>
{# Navigation - shown in mobile collapse #}
{% if page.navigation %}
<div class="mobile-navigation">
{{ page.navigation }}
</div>
{% endif %}
{# Collapse only - mobile collapse content #}
{% if page.collapse_only %}
<div class="mobile-collapse-only">
{{ page.collapse_only }}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endblock %}
</header>
{% if page.highlighted %}
<div class="highlighted">
<aside class="{{ container }} section clearfix" role="complementary">
{{ page.highlighted }}
</aside>
</div>
{% endif %}
{% if page.featured_top %}
{% block featured %}
<div class="featured-top">
<aside class="featured-top__inner section {{ container }} clearfix" role="complementary">
{{ page.featured_top }}
</aside>
</div>
{% endblock %}
{% endif %}
<div id="main-wrapper" class="layout-main-wrapper clearfix">
{% block content %}
<div id="main" class="{{ main_container }}">
{{ page.breadcrumb }}
<div class="row-offcanvas row-offcanvas-left clearfix">
<main {{ content_attributes }}>
<section class="section">
<a id="main-content" tabindex="-1"></a>
{{ page.content }}
</section>
</main>
{% if page.sidebar_first %}
<div{{ sidebar_first_attributes }}>
<aside class="section" role="complementary">
{{ page.sidebar_first }}
</aside>
</div>
{% endif %}
</div>
</div>
{% endblock %}
</div>
{% if page.featured_bottom %}
<div class="featured-bottom">
<aside class="{{ container }} clearfix" role="complementary">
{{ page.featured_bottom }}
</aside>
</div>
{% endif %}
<footer class="site-footer">
{% block footer %}
<div class="{{ container }}">
{% if page.footer_top %}
<div class="site-footer__top clearfix">
{{ page.footer_top }}
</div>
{% endif %}
{% if page.footer %}
<div class="site-footer clearfix">
{{ page.footer }}
</div>
{% endif %}
{% if page.footer_bottom %}
<div class="site-footer__bottom">
{{ page.footer_bottom }}
<div class="copyright">
<p>{{ current_year }}
{{ 'Central Trade & Auto Co. All rights reserved.'|t }}</p>
</div>
</div>
{% endif %}
</div>
{% endblock %}
</footer>
</div>
</div>
