<div class="sds-userMenu">
<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>
<div class="{{ namespace }}userMenu{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if header %}
<div class="{{ namespace }}userMenu__header d-flex align-items-center">
{% if bfm %}
{% render "@avatar--bfm-pro-badge-large",{
classes: [namespace + "userMenu__avatar"],
img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
},true %}
{% else %}
{% render "@avatar--image-extra-large",{
classes: [namespace + "userMenu__avatar"],
img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
},true %}
{% endif %}
<div class="{{ namespace }}userMenu__headerText">
<div class="h3">Jil Schmit Longname</div>
<div class="{{ namespace }}userMenu__headerMeta {{ namespace }}textHelper">{{ userMenuClientMeta }}</div>
</div>
</div>
{% endif %}
<ul class="{{ namespace }}userMenu__content list-unstyled">
{% for userMenuKey, userMenuItem in userMenuItems %}
{% if userMenuItem %}
<li class="{{ namespace }}userMenu__item{% if userMenuItem.hasBorder %} -borderTop{% endif %}">
{% if userMenuItem.modalToggle %}
{% set type = "button" %}
{% else %}
{% set type = "a" %}
{% endif %}
<{{ type }}{% if type === "button" %} type="button"{% else %} href=""{% endif%} class="{{ namespace }}userMenu__link d-flex align-items-center justify-content-between"{% if userMenuItem.modalToggle %} data-toggle="modal" data-target="#modalConventions"{% endif %}>
<span class="font-weight-semibold">{{ userMenuItem.text }}</span>
<div class="{{ namespace }}userMenu__itemMeta d-flex align-items-center">
{% if userMenuItem.count %}
{% render "@count-badge--primary",{text: "01"},true %}
{% endif %}
{% render "@icon-circle-regular--secondary-10",{icon: userMenuItem.icon},true %}
</div>
</{{ type }}>
</li>
{% endif %}
{% endfor %}
{% if langSwitcherInUserMenu %}
<li class="{{ namespace }}userMenu__item -borderTop">
<div class="{{ namespace }}userMenu__link d-flex align-items-center justify-content-between -isStatic">
<span class="font-weight-semibold">Langue</span>
<div class="{{ namespace }}btnGroup">
{% for key, item in langSwitcherInUserMenu %}
{% if item.active %}
{% set activeClass = "-isActive" %}
{% else %}
{% set activeClass = "" %}
{% endif %}
{% render "@snet-number-circle--link-light-large",{
text: item.lang,
classes: [namespace + "userMenu__langItem", activeClass]
},true %}
{% endfor %}
</div>
</div>
</li>
{% endif %}
</ul>
{% if footer %}
<div class="{{ namespace }}userMenu__footer">
<div class="h4">Votre conseiller</div>
<div class="{{ namespace }}userMenu__footerRow">
{% render "@avatar--image-extra-large",{img: "/snet/avatars/avatarBankerMain.png"},true %}
<div class="{{ namespace }}userMenu__footerContent">
<div class="font-weight-semibold">Admir SKRIJELJ</div>
<div class="{{ namespace }}userMenu__footerHelperText {{ namespace }}textHelperSmall">
Personal Banker • Centre Financier Place de Metz
</div>
<div class="{{ namespace }}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="{{ namespace }}userMenu__footerRowButtons">
{% render "@icon-btn-regular--secondary-10",{
eltType: "a",
icon: "icon-phone",
href: "tel:+35240158302"
}, true %}
{% render "@icon-btn-regular--secondary-10",{
eltType: "a",
icon: "icon-paperplane",
href: "mailto:a.skrijelj@spuerkeess.lu"
}, true %}
</div>
</div>
</div>
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}userMenu {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include spacer-component-inset-horiz-greater("sm","lg");
border-radius: map-deep-get($token-radius-map, "16");
box-shadow: map-deep-get($token-shadow-map, "detail") !important;
@include custom-prop-fallback("background-color", "comp-dropdown-background-color");
max-height: calc(100vh - (#{$nav-topbar-height} + #{map-deep-get($token-spacer-unit-map, "16")}));
overflow-y: auto;
max-width: calc(100vw - #{$snet-frame-main-horiz-padding-mobile-global*2});
@include media-breakpoint-up(md){
@include spacer-component-inset-horiz-greater("md","xl");
}
/* 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 */
&__header {
padding-top: map-deep-get($token-spacer-unit-map, "8");
padding-bottom: map-deep-get($token-spacer-unit-map, "16");
border-bottom: $border-width solid;
@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
}
&__headerMeta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
margin-top: map-deep-get($token-spacer-stack-max-map, "xxs");
}
&__header + &__content {
padding-top: map-deep-get($token-spacer-unit-map, "8");
}
// userMenu__item
&__item {
margin-right: -(map-deep-get($token-spacer-unit-map, "8"));
margin-left: -(map-deep-get($token-spacer-unit-map, "8"));
&.-borderTop {
position: relative;
margin-top: map-deep-get($token-spacer-unit-map, "8");
padding-top: map-deep-get($token-spacer-unit-map, "8");
&::before {
content: "";
border-top: $border-width solid;
@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
position: absolute;
top: 0;
left: map-deep-get($token-spacer-unit-map, "8");
right: map-deep-get($token-spacer-unit-map, "8");
}
}
}
// userMenu__link
&__link {
// follows same logic as parent
@include spacer-component-inset("sm");
@include spacer-component-inline("md");
border-radius: map-deep-get($token-radius-map, "16");
width: 100%; // Needed if item is button
&:hover {
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
}
&.-isStatic {
@include custom-prop-fallback("background-color", "comp-dropdown-background-color");
}
}
&__avatar {
margin-right: map-deep-get($token-spacer-unit-map, "16");
}
&__itemMeta {
@include spacer-component-inline("md");
}
&__footer {
@include spacer-component-stack("md");
margin-top: map-deep-get($token-spacer-unit-map, "8");
padding-top: map-deep-get($token-spacer-unit-map, "24");
padding-bottom: map-deep-get($token-spacer-unit-map, "8");
border-top: $border-width solid;
@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
}
&__footerRow {
display: flex;
@include spacer-component-inline("md");
}
&__footerContent {
flex-grow: 1;
min-width: 0;
@include spacer-component-stack("xxs");
}
&__footerHelperText {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
&__footerRowButtons {
@include spacer-component-stack("md");
display: flex;
flex-direction: column;
}
&__footerContactInfo {
@include spacer-component-stack("xs");
margin-top: map-deep-get($token-spacer-stack-max-map, "xs");
> * {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
&__langItem {
&:hover {
@include custom-prop-fallback("background-color", "sys-color-background-primary-20");
}
&.-isActive {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
/* modifiers */
// userMenu -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}