project modules: subscription-dropdown-menu

Available Variants

prototype
Subscribe
subscription-dropdown-menu README

Subscription Dropdown menu

  • It adds subscription dropdown menu to existing Sportico header sticky.

Parent components

  • header
  • header sticky (header-sticky)

Structure Tree

 header
    ├── subscription-dropdown-menu
    └── header-sticky
            └── subscription-dropdown-menu

Variable used for subscription header elements

  • subs_account_section_class
    • Used by subscription js to show/hide use account section ( username , manage account, logout link )
  • subscriber_uname_class
    • Used by subscription js to display subscriber user name/email.
subscription-dropdown-menu Twig The markup file. 

<div class="lrv-u-flex lrv-u-margin-l-auto u-hidden@print u-hidden@desktop-max lrv-a-hidden {{ subs_account_section_class }}">
	{% include "@larva/components/c-link/c-link.twig" with c_link_subscribe %}
	<span class="a-font-primary-medium-s lrv-u-padding-tb-050 lrv-u-padding-l-2 lrv-u-font-size-16 a-subscription-account-menu">
		Account
		<svg class="c-icon lrv-u-width-16 lrv-u-height-16 lrv-u-padding-tb-025 lrv-u-margin-l-050">
			<use xlink:href="#arrow"></use>
		</svg>

		<ul class="lrv-u-padding-a-025">
			<li class="lrv-u-display-block lrv-u-color-brand-primary lrv-u-text-align-left lrv-u-margin-a-1 lrv-u-overflow-hidden lrv-u-whitespace-nowrap subscrpition-username-section-text {{ subscriber_uname_class }}">
			</li>
			<li class="lrv-u-display-block lrv-u-text-align-left lrv-u-height-16 lrv-u-margin-tb-1 lrv-u-padding-lr-1 {{ subscriber_manage_account_class }}">
				{% include "@larva/components/c-link/c-link.twig" with c_link_manage_account %}
			</li>
			<li class="lrv-u-display-block lrv-u-text-align-left lrv-u-height-16 lrv-u-margin-tb-1 lrv-u-padding-lr-1 {{ subscriber_logout_element_class }}">
				{% include "@larva/components/c-link/c-link.twig" with c_link_logout %}
			</li>
		</ul>
	</span>
</div>
subscription-dropdown-menu JSON The data object for this pattern. 
{
	"c_link_user_name": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-font-size-16 lrv-u-font-weight-bold lrv-u-overflow-hidden lrv-u-display-block",
		"c_link_text": "",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"c_link_manage_account": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-black lrv-u-color-black:hover lrv-u-font-weight-bold lrv-u-font-size-14 lrv-u-color-brand-primary:hover lrv-u-display-block",
		"c_link_text": "Manage Account",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"c_link_logout": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-black lrv-u-color-black:hover lrv-u-font-weight-bold lrv-u-font-size-14 lrv-u-color-brand-primary:hover lrv-u-display-block",
		"c_link_text": "Log Out",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"c_link_subscribe": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-white lrv-u-color-white:hover lrv-u-background-color-brand-primary u-background-color-brand-primary-dark:hover a-font-primary-medium-s lrv-u-padding-tb-050 lrv-u-padding-lr-2 lrv-u-margin-r-025 pmc-sportico-loggedin-subscribe-button lrv-a-hidden",
		"c_link_text": "Subscribe",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"subscriber_uname_class": "js-subscription-username-section"
}