Toolbar

<div class="c-toolbar u-none u-block@md o-bg-base" data-toolbar>
    <div class="o-container u-flex">
        <div class="u-mr-auto u-flex u-items-center u-justify-center u-py-xsmall ">
            <span class="u-label-06 ">
                Lunedì, 11 maggio 2020
            </span>

        </div>
        <div class="c-toolbar__item u-flex u-column u-justify-center u-pl-xsmall u-pr-medium u-size-100 u-py-xsmall">
            <a href="#" target="_blank" rel="noopener noreferrer">
                <svg class="c-brand-cn" width="91" height="24">
                    <use xlink:href="#brand-citynews"></use>
                </svg>
            </a>
        </div>
        <div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
            <div class="c-modetoggle u-inline-flex">

                <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità light">
                    <input type="radio" value="-1" class="u-none" data-color-scheme="-1">
                    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sun"></use>
                    </svg>
                </label>

                <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità di sistema">
                    <input type="radio" value="0" class="u-none" data-color-scheme="0">
                    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-monitor"></use>
                    </svg>
                </label>

                <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità dark">
                    <input type="radio" value="1" class="u-none" data-color-scheme="1">
                    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-moon"></use>
                    </svg>
                </label>

            </div>
        </div>
        <!-- <div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
		
<button class="c-btn c-btn--primary 
  
    c-btn--rounded
   
  
    u-flex
  
   
    c-btn--small 
    u-label-05
   
   
  u-cursor-pointer  u-items-center" 
  
>
  Abbonati 
  
</button>
		</div> -->
        <div class="c-toolbar__item u-flex u-items-center u-justify-center u-label-05 u-pl-medium u-cursor-pointer u-py-xsmall">

            <div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--user u-cursor-pointer u-relative u-flex u-items-center u-justify-center u-label-05">
                <img style=" width:2rem; height:2rem;" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="avatar avatar-md u-radius-circle" src="//citynews.stgy.ovh/~shared/avatars/49015311842645/avatar_1.img" alt="Foto Profilo Utente" title="remat">

                <div class="c-dropdown__panel u-absolute u-right u-overflow-hidden u-p-medium o-bg-light u-shadow u-z-upside">
                    <ul class="u-list-none u-m-none u-p-none">
                        <li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="user--view2021">Il mio profilo</a></li>
                        <li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/contents/">I miei contenuti</a></li>
                        <li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/basic/">Modifica profilo</a></li>
                        <li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/privacy/">Privacy</a></li>
                        <li class="u-mb-small">
                            <form onsubmit="window.ga && ga( 'send', 'event', 'Community', 'Logout' ); return confirm( 'Sei sicuro di voler uscire dal sito?' );" action="/user/logout/" method="post">
                                <!--<?php echo input_hidden_tag( 'nonce', securityUtils::encodeVariable($sf_user->getNonce(), array('~sso', 'nonce', SF_GROUP, SF_DOMAIN, SF_APP, SF_TYPE, SF_DEBUG)) ); ?>-->
                                <button type="submit" class="c-btn c-btn--primary  u-label-04  u-cursor-pointer u-flex u-items-center u-label-04" value="Esci">
                                    Esci
                                </button>
                            </form>

                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="c-toolbar u-none u-block@md o-bg-base" data-toolbar>
	<div class="o-container u-flex">
		<div class="u-mr-auto u-flex u-items-center u-justify-center u-py-xsmall "> 
			<span class="u-label-06 ">
				{{ datetime }} 
			</span>
			{% if weather %}
			<div class="u-ml-base">
				<div class="module-weather__details">
					<a href="/meteo/" class="o-link-text" title="Il meteo a Roma: Nubi Sparse">
						<img class="icon large" src="//citynews.stgy.ovh/~shared/images/meteo/3bmeteo/1.png">
						<span class="u-label-08">Nubi Sparse</span>
					</a>
				</div>
			</div>
			{% endif %}	
		</div>		
		<div class="c-toolbar__item u-flex u-column u-justify-center u-pl-xsmall u-pr-medium u-size-100 u-py-xsmall">			
			<a href="#" target="_blank" rel="noopener noreferrer">
				<svg class="c-brand-cn" width="91" height="24">
					<use xlink:href="#brand-citynews"></use>
				</svg>
			</a>
		</div>	
		<div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
		{% render "@modetoggle" %}
		</div>
		<!-- <div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
		{% render "@button--primary",{label:'Abbonati', size: 'small', rounded:'true'},true %}
		</div> -->
		<div class="c-toolbar__item u-flex u-items-center u-justify-center u-label-05 u-pl-medium u-cursor-pointer u-py-xsmall">
			{% if logged %}
				<div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--user u-cursor-pointer u-relative u-flex u-items-center u-justify-center u-label-05">
					<img style=" width:2rem; height:2rem;" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="avatar avatar-md u-radius-circle" src="//citynews.stgy.ovh/~shared/avatars/49015311842645/avatar_1.img" alt="Foto Profilo Utente" title="remat">
					
					<div class="c-dropdown__panel u-absolute u-right u-overflow-hidden u-p-medium o-bg-light u-shadow u-z-upside">
						<ul class="u-list-none u-m-none u-p-none">
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="user--view2021">Il mio profilo</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/contents/">I miei contenuti</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/basic/">Modifica profilo</a></li>
							<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/privacy/">Privacy</a></li>
							<li class="u-mb-small">
								<form onsubmit="window.ga && ga( 'send', 'event', 'Community', 'Logout' ); return confirm( 'Sei sicuro di voler uscire dal sito?' );" action="/user/logout/" method="post">
									<!--<?php echo input_hidden_tag( 'nonce', securityUtils::encodeVariable($sf_user->getNonce(), array('~sso', 'nonce', SF_GROUP, SF_DOMAIN, SF_APP, SF_TYPE, SF_DEBUG)) ); ?>-->
									<button type="submit" class="c-btn c-btn--primary  u-label-04  u-cursor-pointer u-flex u-items-center u-label-04" value="Esci">
									Esci
									</button> 
								</form>
								
							</li>
						</ul>
					</div>
				</div>
			{% else %}
				<svg class="o-icon o-icon--md">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-user"></use>
				</svg>
				Accedi 
			{% endif %}
		</div>
	</div>
</div>
{
  "datetime": "Lunedì, 11 maggio 2020",
  "logged": true
}
  • Content:
    // Name:            Toolbar
    // Description:     Toolbar of website
    //
    // Component:       `c-toolbar`
    //
    // Dependencies:    `settings/v7/colors.tokens`
    //                  `settings/v7/spacing.tokens`
    //
    // ========================================================================
    
    // Variables
    // ========================================================================
    
    $toolbar-border-size: 2px;
    
    // ========================================================================
    
    .c-toolbar {
    
      // Custom properties
      // ========================================================================
      
      --toolbar-border-color: #{$ui-04};
      
      // ========================================================================
      
      // margin-bottom: $margin-xxsmall;
      border-bottom: $toolbar-border-size solid var(--toolbar-border-color);
    
      &__item {
        border-right: 1px solid var(--divider-color);
    
        &:first-child,
        &:last-child {
          border-right: 0;
        }
      }
    
      body[data-model*="video"]:not([data-theme="today"]) &,
      body[data-channel*="foto"]:not([data-theme="today"]) &,
      body[data-channel*="video"]:not([data-theme="today"]) &,
      body[data-color-scheme*="dark"]:not([data-theme="today"]) & {
        --toolbar-border-color: #{rgba($ui-01, .3)};
      }
    
      body[data-model*="sponsor"] & {
        display: none;
      }
    }
    
  • URL: /components/raw/toolbar/toolbar.scss
  • Filesystem Path: src/lib/components/toolbar/toolbar.scss
  • Size: 1.3 KB

Toolbar Infos

The toolbar component coexists together with the main header. The information in it is:

  • the current date
  • the link to the Citynews editorial group
  • the dropdown - network component
  • a login button for registered users

The component is visible only in desktop mode

Usage

Render toolbar

In order to display a default story template use following syntax:

      {% render "@toolbar" %}