Nav: Default

Notification behaviour

For zero notifications the class "-hasNotifEmpty" gets added to the "sds-navTopbar__item" element

For one or more notifications the class "-hasNotif" gets added to the "sds-navTopbar__item" element

The class "-hasLabelShown" can be added with a slight delay to show the transition

<header class="sds-navTopbar">
    <div class="sds-navTopbar__container">
        <nav class="sds-navTopbar__inner navbar navbar-expand">
            <div class="sds-navTopbar__alignToMainContent">
                <a class="sds-navTopbar__logo navbar-brand" href="#">
                    <img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
                </a>
            </div>
            <div class="sds-navTopbar__meta sds-textHelper">
                <span>S-Net Privé</span>
                <span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
            </div>
            <div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
                <ul class="sds-navTopbar__content navbar-nav">

                    <li class="sds-navTopbar__item dropdown">
                        <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                            <span class="sds-icon sds-icon-bell"></span>

                        </button>

                    </li>

                    <li class="sds-navTopbar__item">
                        <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

                            <span class="sds-icon sds-icon-speechbubble"></span>

                        </button>
                        <span class="sds-navTopbar__itemLabel sds-textHelper">Aide</span>
                    </li>

                    <li class="sds-navTopbar__item dropdown">

                        <button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                            <div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">

                                <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                            </div>

                            <span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label With Name</span>
                            <span class="sds-iconCircle" aria-hidden="true">

                                <span class="sds-icon sds-icon-chevrondown"></span>

                            </span>

                        </button>

                        <div class="sds-userMenu sds-navTopbar__userMenu dropdown-menu dropdown-menu-right">

                            <div class="sds-userMenu__header d-flex align-items-center">

                                <div class="sds-avatar centeredBgi -avatarXl sds-userMenu__avatar">

                                    <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                </div>

                                <div class="sds-userMenu__headerText">
                                    <div class="h3">Jil Schmit Longname</div>
                                    <div class="sds-userMenu__headerMeta sds-textHelper">Espace privé</div>
                                </div>
                            </div>

                            <ul class="sds-userMenu__content list-unstyled">

                                <li class="sds-userMenu__item">

                                    <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                        <span class="font-weight-semibold">Mes données personnelles</span>
                                        <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                            <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                <span class="sds-icon sds-icon-client"></span>

                                            </span>

                                        </div>
                                    </a>
                                </li>

                                <li class="sds-userMenu__item">

                                    <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                        <span class="font-weight-semibold">Mes commandes</span>
                                        <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                            <span class="sds-countBadge -primary">
                                                01
                                                <span class="sr-only">Notifications non lues</span>
                                            </span>

                                            <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                <span class="sds-icon sds-icon-shoppingbag"></span>

                                            </span>

                                        </div>
                                    </a>
                                </li>

                                <li class="sds-userMenu__item">

                                    <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                        <span class="font-weight-semibold">Mes documents</span>
                                        <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                            <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                <span class="sds-icon sds-icon-document"></span>

                                            </span>

                                        </div>
                                    </a>
                                </li>

                                <li class="sds-userMenu__item">

                                    <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                        <span class="font-weight-semibold">Paramètres</span>
                                        <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                            <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                <span class="sds-icon sds-icon-gear"></span>

                                            </span>

                                        </div>
                                    </a>
                                </li>

                                <li class="sds-userMenu__item -borderTop">

                                    <button type="button" class="sds-userMenu__link d-flex align-items-center justify-content-between" data-toggle="modal" data-target="#modalConventions">
                                        <span class="font-weight-semibold">Changer compte</span>
                                        <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                            <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                <span class="sds-icon sds-icon-switch"></span>

                                            </span>

                                        </div>
                                    </button>
                                </li>

                            </ul>

                            <div class="sds-userMenu__footer">
                                <div class="h4">Votre conseiller</div>
                                <div class="sds-userMenu__footerRow">

                                    <div class="sds-avatar centeredBgi -avatarXl">

                                        <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                                    </div>
                                    <div class="sds-userMenu__footerContent">
                                        <div class="font-weight-semibold">Admir SKRIJELJ</div>
                                        <div class="sds-userMenu__footerHelperText sds-textHelperSmall">
                                            Personal Banker • Centre Financier Place de Metz
                                        </div>
                                        <div class="sds-userMenu__footerContactInfo">
                                            <a class="d-block" href="tel:+35240158302">+352 4015-8302</a>
                                            <a class="d-block" href="mailto:a.skrijelj@spuerkeess.lu">adresse.longue.skrijelj@spuerkeess.lu</a>
                                        </div>
                                    </div>
                                    <div class="sds-userMenu__footerRowButtons">
                                        <a href="tel:+35240158302" class="sds-btn -iconBtn -secondary10">

                                            <span class="sds-icon sds-icon-phone"></span>

                                        </a>
                                        <a href="mailto:a.skrijelj@spuerkeess.lu" class="sds-btn -iconBtn -secondary10">

                                            <span class="sds-icon sds-icon-paperplane"></span>

                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </li>

                    <li class="sds-navTopbar__item">
                        <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

                            <span class="sds-icon sds-icon-logout"></span>

                        </button>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>
<header
	class="{{ namespace }}navTopbar{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}navTopbar__container">
		<nav class="{{ namespace }}navTopbar__inner navbar navbar-expand">
			<div class="{{ namespace }}navTopbar__alignToMainContent">
				<a class="{{ namespace }}navTopbar__logo navbar-brand" href="#">
					<img src="{{ (mediaPath + '/logos/logo-bcee.svg') | path }}" class="img-fluid" alt="">
				</a>
			</div>
			<div class="{{ namespace }}navTopbar__meta {{ namespace }}textHelper">
				<span>{% if bfm %}S-Net Professionnel{% elseif msp %}My Spuerkeess{% elseif cpb %}Corporate's Bridge{% else %}{% if onboarding %}Bienvenue sur S-Net{% else %}S-Net Privé{% endif %}{% endif %}</span>
				<span class="{{ namespace }}navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
			</div>
			<div class="{{ namespace }}navTopbar__collapse navbar-collapse" id="{{ namespace }}navTopbar__collapse">
				<ul class="{{ namespace }}navTopbar__content navbar-nav">
					{% if noActions %}
					{% else %}
						{% if msp %}
						{% else %}
							<li class="{{ namespace }}navTopbar__item dropdown{% if hasNotif %} -hasNotif -hasLabelShown{% elseif hasNotifEmpty %} -hasNotifEmpty -hasLabelShown{% endif %}">
								{% render "@icon-btn-regular--secondary-100", {
									icon: "icon-bell",
									classes: [namespace + "navTopbar__icon", "dropdown-toggle"],
									attrs: {
										"data-toggle": "dropdown",
										"aria-expanded": "false"
									}
								}, true %}
								{% if hasNotif or hasNotifEmpty %}
									<span class="{{ namespace }}navTopbar__notificationLabel">
								<span class="{{ namespace }}navTopbar__notificationLabelText">
									{% if hasNotifCount %}10{% endif %}
									{% if hasNotifEmpty %}0{% endif %}
									{% if hasWarningIcon %} <span
										class="{{ namespace }}navTopbar__notificationLabelIcon {{ namespace }}icon {{ namespace }}icon-alert">
											<span class="sr-only">You have stuff to check</span></span>{% endif %}
								</span>
							</span>
								{% endif %}
								{% if hasNotif %}
									<div class="{{ namespace }}navTopbar__itemNotifAnim">
										<span class="lottieBellAnim"></span>
									</div>
								{% endif %}
							</li>
						{% endif %}
						{% if not bfm and not cpb %}
							<li class="{{ namespace }}navTopbar__item">
								{% render "@icon-btn-regular--secondary-100",{icon: "icon-speechbubble", classes: [namespace + "navTopbar__icon"]}, true %}
								<span class="{{ namespace }}navTopbar__itemLabel {{ namespace }}textHelper">Aide</span>
							</li>
						{% endif %}
						<li class="{{ namespace }}navTopbar__item dropdown{% if menuShown %} show{% endif %}">
							{% if msp %}
								<span
									class="{{ namespace }}navTopbar__dropdownToggle -avatar -transparent -noInteraction">
									{% render "@avatar--image",{
										classes: [namespace + "navTopbar__userDropdownAvatar"],
										img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
									},true %}
								<span class="{{ namespace }}navTopbar__userDropdownLabel {{ namespace }}textHelper">Label With Name</span>
							</span>
							{% else %}
								<button type="button"
										class="{{ namespace }}navTopbar__dropdownToggle -avatar dropdown-toggle"
										data-toggle="dropdown" aria-expanded="false">
									{% if bfm %}
										{% render "@avatar--bfm-pro-badge",{
											classes: ["-badgeVisible",namespace + "navTopbar__userDropdownAvatar"],
											img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
										}, true %}
									{% else %}
										{% render "@avatar--image",{
											classes: [namespace + "navTopbar__userDropdownAvatar"],
											img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
										},true %}
									{% endif %}
									<span class="{{ namespace }}navTopbar__userDropdownLabel {{ namespace }}textHelper">Label With Name</span>
									{% render "@icon-circle-regular",{icon: "icon-chevrondown"}, true %}
								</button>
							{% endif %}
							{% if bfm %}
								{% render "@snet-user-menu--bfm",userMenuNavOptions,true %}
							{% elseif cpb %}
								{% render "@cpb-user-menu",userMenuOptions,true %}
							{% elseif msp %}
							{% else %}
								{% render "@snet-user-menu",userMenuNavOptions,true %}
							{% endif %}
						</li>
					{% endif %}
					<li class="{{ namespace }}navTopbar__item">
						{% render "@icon-btn-regular--secondary-100",{icon: "icon-logout", classes: [namespace + "navTopbar__icon"]},true %}
					</li>
				</ul>
			</div>
		</nav>
	</div>
</header>
  • Content:
    /* variables specific to current element */
    
    $nav-topbar-height: $nav-topbar-height-global;
    $nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","100");
    $nav-topbar-icon-background-hover: map-deep-get($token-color-brand-map,"secondary","120");
    $nav-topbar-logo-mobile-width: $nav-topbar-logo-mobile-width-global;
    $nav-topbar-logo-desktop-width: 220px;
    $snet-frame-menu-open-width: $snet-frame-menu-open-width-global;
    
    $bfm-nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","160");
    $bfm-nav-topbar-icon-background-hover: map-deep-get($token-color-grayscale-map,"1000");
    
    .#{$namespace}navTopbar {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    
    	@include gradient-directional(map-deep-get($token-color-brand-map, "secondary", "100"), map-deep-get($token-color-brand-map, "gradient", "secondary"), 0, 100%, 45deg, true);
    	color: map-deep-get($token-color-grayscale-map, "0");
    	height: $nav-topbar-height;
    	display: flex;
    	align-items: center;
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	&__container {
    
    		padding: 0;
    		@include make-container();
    		max-width: none;
    
    		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
    			max-width: map-deep-get($container-max-widths, "xl");
    		}
    
    	}
    
    	// navTopbar__inner
    	&__inner {
    
    		padding: 0;
    
    		> {
    
    			H1,.h1,
    			H2,.h2,
    			H3,.h3,
    			H4,.h4,
    			H5,.h5,
    			H6,.h6 {
    				color: inherit;
    				font-size: map-deep-get($token-font-size-map, "body", "s") !important;
    				font-family: inherit !important;
    				font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
    			}
    
    		}
    
    	}
    
    	&__alignToMainContent {
    
    		display: flex;
    		align-items: center;
    
    		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
    			width: $snet-frame-menu-open-width;
    			margin-right: map-deep-get($token-spacer-unit-map, "16");
    		}
    
    	}
    
    	// navTopbar__back
    	&__back {
    
    		display: flex;
    		align-items: center;
    		margin-right: map-deep-get($token-spacer-unit-map, "8");
    		border-radius: map-deep-get($token-radius-map, "32");
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    		background-color: $nav-topbar-icon-background-hover;
    		height: $language-switcher-height-global;
    
    		@include media-breakpoint-up(lg) {
    			height: auto;
    			background-color: transparent;
    			padding-right: map-deep-get($token-spacer-unit-map, "16");
    			margin-right: map-deep-get($token-spacer-unit-map, "24");
    		}
    
    		&:hover,
    		&:focus {
    
    			@media (hover: hover) {
    				background-color: $nav-topbar-icon-background-hover;
    			}
    
    		}
    
    	}
    
    	&__centeredContent,
    	&__backText {
    
    		display: none;
    
    		@include media-breakpoint-up(lg) {
    
    			display: block;
    
    		}
    
    
    	}
    
    	// navTopbar__logo
    	&__logo {
    
    		width: $nav-topbar-logo-mobile-width-global;
    		height: $nav-topbar-logo-mobile-width-global;
    		overflow: hidden;
    		padding: 0;
    		margin-right: map-deep-get($token-spacer-unit-map, '16');
    
    		@include media-breakpoint-up(md){
    			width: $nav-topbar-logo-desktop-width;
    			height: auto;
    		}
    
    		IMG {
    
    			height: $nav-topbar-logo-mobile-width-global;
    			max-width: none;
    			
    			@include media-breakpoint-up(md){
    				width: 100%;
    				height: auto;
    				max-width: 100%;
    			}
    
    		}
    
    	}
    
    	// navTopbar__collapse
    	&__collapse {
    
    		flex-grow: 0;
    		margin-left: auto;
    
    	}
    
    	// navTopbar__meta
    	&__meta {
    
    		// follows same logic as parent
    
    		display: none;
    
    		@include media-breakpoint-up(md){
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    			display: flex;
    			align-items: center;
    		}
    
    
    	}
    	
    	&__centeredContent {
    
    		margin: auto;
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    	}
    
    	
    	&__dropdownWrapper {
    		
    		.dropdown-menu {
    
    			top: $nav-topbar-height;
    
    		}
    		
    	}
    
    	// navTopbar__metaTime
    	&__metaTime {
    
    		color: map-deep-get($token-color-brand-map, 'secondary', '30');
    		display: none;
    
    		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
    			display: block;
    		}
    
    	}
    
    	// navTopbar__content
    	&__content {
    
    		// follows same logic as parent
    
    		margin-left: auto;
    		@include spacer-component-inline("md");
    
    	}
    
    	&__item {
    
    		display: flex;
    		align-items: center;
    		position: relative;
    		z-index: z("low");
    
    		&.dropdown.show {
    
    			// follows same logic as base element
    
    			position: relative;
    
    			#{$self}__userMenu {
    
    				display: block;
    
    			}
    
    		}
    
    		&.-hasNotifEmpty {
    
    			#{$self}__icon {
    
    				@include gradient-directional(map-deep-get($token-color-brand-map, "primary", "100"), map-deep-get($token-color-brand-map, "gradient", "primary"), 0, 100%, 45deg, true);
    
    			}
    
    		}
    
    		&.-hasNotif {
    
    			position: relative;
    
    			#{$self}__icon {
    
    				position: relative;
    				z-index: z("low");
    
    			}
    
    		}
    
    		&.-hasLabelShown {
    
    			#{$self}__notificationLabel {
    
    				transform: scaleX(1) translateY(-50%);
    
    			}
    
    			#{$self}__notificationLabelText {
    				transition: opacity 0.1s linear;
    				transition-delay: 0.2s;
    				opacity: 1;
    			}
    
    		}
    
    		&:hover {
    
    			@media (hover: hover) {
    
    				#{$self}__itemIcon {
    					background-color: map-deep-get($token-color-brand-map,"secondary","120");
    				}
    
    			}
    
    		}
    
    	}
    
    	&__notificationLabel {
    
    		background-color: map-deep-get($token-color-grayscale-map, "0");
    		color: map-deep-get($token-color-grayscale-map, "1000");
    		position: absolute;
    		z-index: z("negative");
    		top: 50%;
    		transform: scaleX(0) translateY(-50%);
    		right: map-deep-get($token-spacer-unit-map, "16");
    		@include spacer-component-inset-horiz-greater("xs","sm");
    		padding-right: map-deep-get($token-spacer-unit-map, "32");
    		border-radius: map-deep-get($token-radius-map, "16");
    		transition: transform 0.15s ease-out;
    		transform-origin: right;
    		font-weight: map-deep-get($token-font-weight-map, "bold");
    		font-size: map-deep-get($token-font-size-map, "body", "xs");
    
    	}
    
    	&__notificationLabelText {
    		opacity: 0;
    	}
    
    	&__notificationLabelIcon {
    		display: inline-block;
    		transform: translateX(2px);
    	}
    
    	&__itemNotifAnim {
    
    		position: absolute;
    		z-index: z("low");
    		top: 50%;
    		left: 50%;
    		width: 100%;
    		height: 100%;
    		transform: translate(-50%, -50%);
    		pointer-events: none;
    
    	}
    
    	&__itemLabel {
    
    		font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};
    		margin-left: map-deep-get($token-spacer-unit-map,"8");
    		display: none;
    
    		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
    
    			display: block;
    
    		}
    
    	}
    
    	// navTopbar__meta
    	// navTopbar__content
    	&__meta,
    	&__content {
    		@include spacer-component-inline('md');
    	}
    
    
    	&__dropdownToggle {
    
    		position: relative;
    		background-color: $nav-topbar-icon-background;
    		border-radius: map-deep-get($token-radius-map, "32");
    		display: flex;
    		align-items: center;
    		padding-left: map-deep-get($token-spacer-unit-map, "16");
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		.#{$namespace}iconCircle {
    			display: none;
    			transition: transform 0.15s linear;
    			@include media-breakpoint-up(md){
    				display: inline-flex;
    			}
    		}
    
    		* {
    			color: map-deep-get($token-color-grayscale-map, "0");
    		}
    
    		&[aria-expanded="true"] {
    
    			> [class*="icon"] {
    
    				transform: rotate(180deg);
    
    			}
    
    		}
    
    		&.-avatar {
    
    			padding-left: 0;
    
    		}
    
    		&.-transparent {
    
    			background-color: transparent;
    
    		}
    
    		&.-noInteraction {
    			&:hover {
    
    				background-color: transparent;
    
    			}
    		}
    
    		&:hover {
    
    			background-color: $nav-topbar-icon-background-hover;
    
    		}
    
    	}
    
    	&__userDropdownAvatar {
    
    	}
    
    	&__userDropdownLabel {
    
    		padding-left: map-deep-get($token-spacer-unit-map, "8");
    		@include truncate-text(160px);
    
    		@include media-breakpoint-between(xs,sm){
    			@include sr-only;
    		}
    
    		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
    
    			font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};
    
    		}
    
    	}
    
    	&__userMenu {
    
    		display: none;
    		position: absolute;
    		top: #{$nav-topbar-height};
    		width: 430px;
    
    		right: -(map-deep-get($token-sizes-unit-map, "72"));
    		margin-right: $snet-frame-main-horiz-padding-mobile-global;
    
    		@include media-breakpoint-up(sm){
    			right: 0;
    			margin-right: 0;
    		}
    
    	}
    
    	/* modifiers */
    
    	// navTopbar -altStyle
    
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	.cpb-theme &,
    	.bfm-theme & {
    
    		// follows same logic as base element
    
    		@include gradient-directional(map-deep-get($token-color-brand-map, "secondary", "160"), map-deep-get($token-color-brand-map, "secondary", "140"), 0, 100%, 45deg, true);
    
    		&__back {
    
    			background-color: $bfm-nav-topbar-icon-background;
    
    			&:hover,
    			&:focus {
    
    				@media (hover: hover) {
    					background-color: $bfm-nav-topbar-icon-background;
    				}
    
    			}
    
    		}
    
    		&__icon,
    		&__dropdownToggle {
    
    			background-color: $bfm-nav-topbar-icon-background;
    
    			&:hover {
    
    				background-color: $bfm-nav-topbar-icon-background-hover;
    
    			}
    
    		}
    
    		&__hoverBackground {
    
    			&:hover {
    
    				background-color: $bfm-nav-topbar-icon-background-hover;
    
    			}
    
    		}
    
    
    	}
    
    	.-fullWidth & {
    
    		#{$self}__container {
    
    			max-width: none;
    
    		}
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-nav/_nav.scss
  • Filesystem Path: components/snet/organisms/nav/_nav.scss
  • Size: 9.4 KB