Dropdown User Menu: Default

No notes defined.

<div class="dropdown-menu dropdown-menu-right sds-fullScreenMinusTopNav dropdown-menu-inset-md">

    <div class="sds-staticStackLg">

        <div class="sds-listItem" data-scope-wrapper="box" data-scope="sunken">
            <div class="sds-listItem__leading">

                <div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">

                    <div class="sds-avatar__text">JS</div>

                </div>
            </div>

            <div class="sds-listItem__center">
                <div class="sds-staticStackXxs">
                    <p class="sds-textSemiBold sds-headingColor">Jil Schmidt</p>
                    <p class="sds-textHelper sds-metaColor">Mes données personnelles</p>
                </div>
            </div>

            <div class="sds-listItem__trailing">
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

                    <span aria-hidden="true" class="sds-icon sds-icon-edit"></span>

                    <div class="sr-only">Editer mes données personnelles</div>

                </button>
            </div>

        </div>

        <div>
            <ul class="list-unstyled sds-staticStackSm">

                <li>
                    <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
                        <div class="sds-listItem__leading">
                            <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

                                <span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>

                            </span>
                        </div>

                        <div class="sds-listItem__center">
                            <p class="sds-textSemiBold sds-headingColor">Mes communications</p>
                        </div>

                        <div class="sds-listItem__trailing">
                            <span class="sds-badge badge -badgeHighlight -badgeSm">

                                99+

                                <span class="sr-only">notifications</span>

                            </span>
                        </div>

                    </a>
                </li>

                <li>
                    <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
                        <div class="sds-listItem__leading">
                            <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

                                <span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>

                            </span>
                        </div>

                        <div class="sds-listItem__center">
                            <p class="sds-textSemiBold sds-headingColor">Mes documents</p>
                        </div>

                    </a>
                </li>

                <li>
                    <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
                        <div class="sds-listItem__leading">
                            <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

                                <span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>

                            </span>
                        </div>

                        <div class="sds-listItem__center">
                            <p class="sds-textSemiBold sds-headingColor">Mes commandes</p>
                        </div>

                    </a>
                </li>

                <li>
                    <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
                        <div class="sds-listItem__leading">
                            <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

                                <span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>

                            </span>
                        </div>

                        <div class="sds-listItem__center">
                            <p class="sds-textSemiBold sds-headingColor">Mes rendez-vous</p>
                        </div>

                    </a>
                </li>

                <li>
                    <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
                        <div class="sds-listItem__leading">
                            <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

                                <span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>

                            </span>
                        </div>

                        <div class="sds-listItem__center">
                            <p class="sds-textSemiBold sds-headingColor">Paramètres</p>
                        </div>

                    </a>
                </li>

            </ul>
            <div class="dropdown-divider" aria-hidden="true"></div>
            <a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">

                <div class="sds-listItem__leading">
                    <span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">

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

                    </span>
                </div>

                <div class="sds-listItem__center">
                    <p class="sds-textSemiBold sds-headingColor">Changer de compte</p>
                </div>

            </a>
        </div>
        <section class="sds-staticStackSm">

            <div class="sds-listItem -listItemNoInsetBlock -listItemStatic">
                <p class="h4">Besoin d'aide?</p>
            </div>

            <button type="button" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">

                <span class="sds-listItem__leading">

                    <div class="sds-avatar centeredBgi">

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

                    </div>
                </span>

                <span class="sds-listItem__center">
                    <span class="sds-textSemiBold sds-headingColor">Contacter votre conseiller</span>
                </span>

            </button>
        </section>

    </div>

</div>
 
{% extends "@dropdown-frame" %}
{% block content %}

	<div class="{{ namespace }}staticStackLg">
		{% if bfm %}
			<a href class="{{ namespace }}listItem" data-scope-wrapper="box" data-scope="sunken">
				<div class="{{ namespace }}listItem__leading">
					{% render "@avatar--bfm-pro-badge",{
						text: "JS",
						attrs: {
							"aria-hidden": "true"
						}
					},true %}
				</div>

				<div class="{{ namespace }}listItem__center">
					<div class="{{ namespace }}staticStackXxs">
						<p class="{{ namespace }}textSemiBold {{ namespace }}headingColor">Jil Schmit Longname</p>
					</div>
				</div>

			</a>
		{% else %}
			<div class="{{ namespace }}listItem" data-scope-wrapper="box" data-scope="sunken">
				<div class="{{ namespace }}listItem__leading">
					{% render "@avatar",{
						text: "JS",
						attrs: {
							"aria-hidden": "true"
						}
					},true %}
				</div>

				<div class="{{ namespace }}listItem__center">
					<div class="{{ namespace }}staticStackXxs">
						<p class="{{ namespace }}textSemiBold {{ namespace }}headingColor">Jil Schmidt</p>
						<p class="{{ namespace }}textHelper {{ namespace }}metaColor">Mes données personnelles</p>
					</div>
				</div>

				<div class="{{ namespace }}listItem__trailing">
					{% render "@icon-btn-secondary", {
						icon: "icon-edit",
						action: "Editer mes données personnelles"
					}, true %}
				</div>

			</div>
		{% endif %}
		<div>
			<ul class="list-unstyled {{ namespace }}staticStackSm">
				{% for item in userMenuItems %}
					{% if item %}
						<li>
							<a href="" class="{{ namespace }}listItem" data-scope-wrapper="box" data-scope="flat">
								<div class="{{ namespace }}listItem__leading">
									{% render "@icon-block--highlight",{
										icon: "icon-chat" or key.icon
									},true %}
								</div>

								<div class="{{ namespace }}listItem__center">
									<p class="{{ namespace }}textSemiBold {{ namespace }}headingColor">{{ item.text }}</p>
								</div>

								{% if item.notif %}

									<div class="{{ namespace }}listItem__trailing">
										{% render "@badge--highlight",{
											classes: ["-badgeSm"],
											text: "99+",
											additionalHiddenText: "notifications"
										},true %}
									</div>

								{% endif %}

							</a>
						</li>
					{% endif %}
				{% endfor %}
			</ul>
			<div class="dropdown-divider" aria-hidden="true"></div>
			<a href="" class="{{ namespace }}listItem" data-scope-wrapper="box" data-scope="flat">

				<div class="{{ namespace }}listItem__leading">
					{% render "@icon-block--highlight",{
						icon: "icon-switch"
					},true %}
				</div>

				<div class="{{ namespace }}listItem__center">
					<p class="{{ namespace }}textSemiBold {{ namespace }}headingColor">Changer de compte</p>
				</div>

			</a>
		</div>
		<section class="{{ namespace }}staticStackSm">

			<div class="{{ namespace }}listItem -listItemNoInsetBlock -listItemStatic">
				<p class="h4">Besoin d'aide?</p>
			</div>

			<button type="button" class="{{ namespace }}listItem" data-scope-wrapper="box" data-scope="flat">

				<span class="{{ namespace }}listItem__leading">
					{% render "@avatar--image" %}
				</span>

				<span class="{{ namespace }}listItem__center">
					<span class="{{ namespace }}textSemiBold {{ namespace }}headingColor">Contacter votre conseiller</span>
				</span>

			</button>
		</section>

	</div>

{% endblock %}