Package navsidebar

import "gitlab.com/zoralab/bissetii/pkg/components/internal/navsidebar"

const (
	CSSAMP = `@-webkit-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-moz-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-ms-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-o-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-webkit-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-moz-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-ms-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-o-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}.nav-sidebar ul,.nav-sidebar ol{--list-style-type:none;--list-style-type:none}.nav-sidebar .nav-sidebar-icon{background:var(--nav-sidebar-background);width:var(--nav-sidebar-trigger-dimension);height:var(--nav-sidebar-trigger-dimension);line-height:var(--nav-sidebar-trigger-dimension);margin:0;padding:0;text-align:center;margin:auto;color:var(--nav-sidebar-trigger-color);border:0;border-radius:var(--nav-sidebar-trigger-border-radius)}.nav-sidebar .nav-sidebar-icon *{font-size:var(--nav-sidebar-trigger-font-size);margin:0;padding:0}.nav-sidebar .nav-sidebar-menu{position:fixed;top:var(--nav-sidebar-trigger-position-top);left:0;z-index:var(--nav-sidebar-trigger-z-index)}.nav-sidebar .nav-sidebar-close{background:var(--nav-sidebar-trigger-color);color:var(--nav-sidebar-background);z-index:var(--nav-sidebar-trigger-z-index)}.nav-sidebar .nav-sidebar-list{padding:0;margin:0;display:flex;flex-flow:column nowrap;justify-content:var(--nav-sidebar-justify-content)}.nav-sidebar input.nav-sidebar-submenu{display:none}.nav-sidebar .nav-sidebar-link,.nav-sidebar .nav-sidebar-submenu{line-height:var(--nav-sidebar-link-line-height);padding:var(--nav-sidebar-link-padding);background:var(--nav-sidebar-link-background);text-transform:var(--nav-sidebar-link-text-transform);border-top:var(--nav-sidebar-link-separator-border);border-left:var(--nav-sidebar-link-border-left);border-right:var(--nav-sidebar-link-border-right)}.nav-sidebar .nav-sidebar-link:last-child,.nav-sidebar .nav-sidebar-submenu:last-child{border-bottom:var(--nav-sidebar-link-separator-border)}.nav-sidebar .nav-sidebar-link>label,.nav-sidebar .nav-sidebar-link a,.nav-sidebar .nav-sidebar-submenu>label,.nav-sidebar .nav-sidebar-submenu a{border:0;vertical-align:var(--nav-sidebar-link-vertical-align);display:flex;justify-content:var(--nav-sidebar-link-justify-content);align-items:var(--nav-sidebar-link-align-items);color:var(--nav-sidebar-link-color);-webkit-transition:var(--nav-sidebar-link-transition);-ms-transition:var(--nav-sidebar-link-transition);-moz-transition:var(--nav-sidebar-link-transition);-o-transition:var(--nav-sidebar-link-transition);transition:var(--nav-sidebar-link-transition)}.nav-sidebar .nav-sidebar-link>label span.pre,.nav-sidebar .nav-sidebar-link>label pre,.nav-sidebar .nav-sidebar-link a span.pre,.nav-sidebar .nav-sidebar-link a pre,.nav-sidebar .nav-sidebar-submenu>label span.pre,.nav-sidebar .nav-sidebar-submenu>label pre,.nav-sidebar .nav-sidebar-submenu a span.pre,.nav-sidebar .nav-sidebar-submenu a pre{width:fit-content;border:0;background:var(--nav-sidebar-link-pre-background);padding:var(--nav-sidebar-link-pre-padding);margin:var(--nav-sidebar-link-pre-margin)}.nav-sidebar .nav-sidebar-link.active a{color:var(--nav-sidebar-link-active-color)}.nav-sidebar .nav-sidebar-link:focus a{color:var(--nav-sidebar-link-focus-color)}.nav-sidebar .nav-sidebar-link:hover a{color:var(--nav-sidebar-link-hover-color)}.nav-sidebar .nav-sidebar-title{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center;line-height:var(--nav-sidebar-title-line-height);color:var(--nav-sidebar-title-color);font-size:var(--nav-sidebar-title-font-size);text-align:var(--nav-sidebar-title-text-align);text-transform:var(--nav-sidebar-title-text-transform);font-weight:var(--nav-sidebar-title-font-weight)}.nav-sidebar .nav-sidebar-title .nav-sidebar-logo{max-width:100%;margin:var(--nav-sidebar-logo-margin)}.nav-sidebar .nav-sidebar-submenu{padding:var(--nav-sidebar-submenu-padding)}.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]{display:none}.nav-sidebar .nav-sidebar-submenu .nav-sidebar-submenu-icon~*{padding-left:var(--nav-sidebar-link-pre-spacing)}.nav-sidebar .nav-sidebar-submenu>ul,.nav-sidebar .nav-sidebar-submenu>ol{margin:var(--nav-sidebar-submenu-margin);display:none;animation:var(--nav-sidebar-submenu-animation)}.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~label .nav-sidebar-submenu-icon{animation:var(--nav-sidebar-submenu-icon-animation)}.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~ul,.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~ol{display:block}.nav-sidebar.right-side .nav-sidebar-menu{right:0;left:initial}.nav-sidebar.right-side .nav-sidebar-menu,.nav-sidebar.right-side .nav-sidebar-close{--nav-sidebar-trigger-border-radius:0 0 0 50%}.nav-sidebar.right-side .nav-sidebar-close{position:fixed;right:0}.nav-sidebar.right-side .nav-sidebar-link,.nav-sidebar.right-side .nav-sidebar-submenu{border-left:var(--nav-sidebar-link-border-right);border-right:var(--nav-sidebar-link-border-left)}amp-sidebar{background:var(--nav-sidebar-background);width:var(--nav-sidebar-width);padding:var(--nav-sidebar-padding)}.amp-sidebar-mask{background:var(--nav-sidebar-shade-background)}`

	CSSCritical = `@-webkit-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-moz-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-ms-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-o-keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes nav-sidebar-submenu{0%{visibility:hidden;opacity:0;transform:translateY(-1rem)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@-webkit-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-moz-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-ms-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@-o-keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}@keyframes nav-sidebar-submenu-icon{0%{transform:rotate(0);transform-origin:center center}100%{transform:rotate(90deg);transform-origin:center center}}nav.nav-sidebar{grid-area:var(--nav-sidebar-grid-area);z-index:var(--nav-sidebar-z-index);width:100%;max-width:100%}nav.nav-sidebar ul,nav.nav-sidebar ol{--list-style-type:none;--list-style-type:none}nav.nav-sidebar .nav-sidebar-submenu>input[type=checkbox],nav.nav-sidebar input.nav-sidebar-trigger{display:none}nav.nav-sidebar label.nav-sidebar-shade,nav.nav-sidebar .nav-sidebar-list{position:fixed;top:0;left:0;width:0;height:var(--nav-sidebar-height);max-height:100vh;-webkit-transition:var(--nav-sidebar-transition);-ms-transition:var(--nav-sidebar-transition);-moz-transition:var(--nav-sidebar-transition);-o-transition:var(--nav-sidebar-transition);transition:var(--nav-sidebar-transition)}nav.nav-sidebar .nav-sidebar-trigger{position:fixed;top:var(--nav-sidebar-trigger-position-top);left:0;background:var(--nav-sidebar-background);width:var(--nav-sidebar-trigger-dimension);height:var(--nav-sidebar-trigger-dimension);line-height:var(--nav-sidebar-trigger-dimension);z-index:var(--nav-sidebar-trigger-z-index);border-radius:var(--nav-sidebar-trigger-border-radius);-webkit-transition:var(--nav-sidebar-transition);-ms-transition:var(--nav-sidebar-transition);-moz-transition:var(--nav-sidebar-transition);-o-transition:var(--nav-sidebar-transition);transition:var(--nav-sidebar-transition)}nav.nav-sidebar .nav-sidebar-icon{position:absolute;top:0;left:0;font-weight:var(--nav-sidebar-trigger-font-weight);text-align:center;margin:auto;width:100%;height:100%;color:var(--nav-sidebar-trigger-color);-webkit-transition:var(--nav-sidebar-transition);-ms-transition:var(--nav-sidebar-transition);-moz-transition:var(--nav-sidebar-transition);-o-transition:var(--nav-sidebar-transition);transition:var(--nav-sidebar-transition)}nav.nav-sidebar .nav-sidebar-icon *{font-size:var(--nav-sidebar-trigger-font-size);margin:0;padding:0}nav.nav-sidebar .nav-sidebar-menu{opacity:1}nav.nav-sidebar .nav-sidebar-close{opacity:0}nav.nav-sidebar label.nav-sidebar-shade{z-index:var(--nav-sidebar-shade-z-index);background:var(--nav-sidebar-shade-background)}nav.nav-sidebar .nav-sidebar-list{background:var(--nav-sidebar-background);padding:var(--nav-sidebar-trigger-dimension) 0 0;margin:0;overflow-y:auto;z-index:var(--nav-sidebar-z-index);display:flex;flex-flow:column nowrap;justify-content:var(--nav-sidebar-justify-content)}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger{top:0;border-radius:0 0 50% 0;background:var(--nav-sidebar-trigger-color)}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger .nav-sidebar-icon{-webkit-transform:var(--nav-sidebar-trigger-transform);-ms-transform:var(--nav-sidebar-trigger-transform);-moz-transform:var(--nav-sidebar-trigger-transform);-o-transform:var(--nav-sidebar-trigger-transform);transform:var(--nav-sidebar-trigger-transform);color:var(--nav-sidebar-background)}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger .nav-sidebar-menu{opacity:0}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger .nav-sidebar-close{opacity:1}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-list{padding:var(--nav-sidebar-padding);width:var(--nav-sidebar-width)}nav.nav-sidebar input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-shade{width:100%}nav.nav-sidebar .nav-sidebar-link,nav.nav-sidebar .nav-sidebar-submenu{line-height:var(--nav-sidebar-link-line-height);background:var(--nav-sidebar-link-background);text-transform:var(--nav-sidebar-link-text-transform);border-top:var(--nav-sidebar-link-separator-border);border-left:var(--nav-sidebar-link-border-left);border-right:var(--nav-sidebar-link-border-right)}nav.nav-sidebar .nav-sidebar-link:last-child,nav.nav-sidebar .nav-sidebar-submenu:last-child{border-bottom:var(--nav-sidebar-link-separator-border)}nav.nav-sidebar .nav-sidebar-link>label,nav.nav-sidebar .nav-sidebar-link a,nav.nav-sidebar .nav-sidebar-submenu>label,nav.nav-sidebar .nav-sidebar-submenu a{border:0;vertical-align:var(--nav-sidebar-link-vertical-align);display:flex;justify-content:var(--nav-sidebar-link-justify-content);align-items:var(--nav-sidebar-link-align-items);text-align:var(--nav-sidebar-link-text-align);color:var(--nav-sidebar-link-color);-webkit-transition:var(--nav-sidebar-link-transition);-ms-transition:var(--nav-sidebar-link-transition);-moz-transition:var(--nav-sidebar-link-transition);-o-transition:var(--nav-sidebar-link-transition);transition:var(--nav-sidebar-link-transition)}nav.nav-sidebar .nav-sidebar-link>label span.pre,nav.nav-sidebar .nav-sidebar-link>label pre,nav.nav-sidebar .nav-sidebar-link a span.pre,nav.nav-sidebar .nav-sidebar-link a pre,nav.nav-sidebar .nav-sidebar-submenu>label span.pre,nav.nav-sidebar .nav-sidebar-submenu>label pre,nav.nav-sidebar .nav-sidebar-submenu a span.pre,nav.nav-sidebar .nav-sidebar-submenu a pre{width:fit-content;min-width:var(--nav-sidebar-link-pre-min-width);border:0;background:var(--nav-sidebar-link-pre-background);padding:var(--nav-sidebar-link-pre-padding);margin:var(--nav-sidebar-link-pre-margin)}nav.nav-sidebar .nav-sidebar-link{padding:var(--nav-sidebar-link-padding)}nav.nav-sidebar .nav-sidebar-link.active{background:var(--nav-sidebar-link-active-background)}nav.nav-sidebar .nav-sidebar-link.active a{color:var(--nav-sidebar-link-active-color)}nav.nav-sidebar .nav-sidebar-link:focus{background:var(--nav-sidebar-link-focus-background)}nav.nav-sidebar .nav-sidebar-link:focus a{color:var(--nav-sidebar-link-focus-color)}nav.nav-sidebar .nav-sidebar-link:hover{background:var(--nav-sidebar-link-hover-background)}nav.nav-sidebar .nav-sidebar-link:hover a{color:var(--nav-sidebar-link-hover-color)}nav.nav-sidebar .nav-sidebar-submenu{padding:var(--nav-sidebar-submenu-padding)}nav.nav-sidebar .nav-sidebar-submenu .nav-sidebar-submenu-icon~*{padding-left:var(--nav-sidebar-link-pre-spacing)}nav.nav-sidebar .nav-sidebar-submenu>ul,nav.nav-sidebar .nav-sidebar-submenu>ol{margin:var(--nav-sidebar-submenu-margin);display:none;animation:var(--nav-sidebar-submenu-animation)}nav.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~label .nav-sidebar-submenu-icon{animation:var(--nav-sidebar-submenu-icon-animation)}nav.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~ul,nav.nav-sidebar .nav-sidebar-submenu>input[type=checkbox]:checked~ol{display:block}nav.nav-sidebar .nav-sidebar-title{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center;line-height:var(--nav-sidebar-title-line-height);color:var(--nav-sidebar-title-color);font-size:var(--nav-sidebar-title-font-size);text-align:var(--nav-sidebar-title-text-align);text-transform:var(--nav-sidebar-title-text-transform);font-weight:var(--nav-sidebar-title-font-weight)}nav.nav-sidebar .nav-sidebar-title .nav-sidebar-logo{max-width:100%;margin:var(--nav-sidebar-logo-margin)}nav.nav-sidebar.right-side{--nav-sidebar-grid-area:rsidebar}nav.nav-sidebar.right-side label.nav-sidebar-shade,nav.nav-sidebar.right-side label.nav-sidebar-trigger,nav.nav-sidebar.right-side .nav-sidebar-list{right:0;left:initial}nav.nav-sidebar.right-side .nav-sidebar-trigger{--nav-sidebar-trigger-border-radius:0 0 0 50%}nav.nav-sidebar.right-side input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger{top:0;border-radius:0 0 0 50%}nav.nav-sidebar.right-side .nav-sidebar-link,nav.nav-sidebar.right-side .nav-sidebar-submenu{border-left:var(--nav-sidebar-link-border-right);border-right:var(--nav-sidebar-link-border-left)}`

	CSSTablet = `.nav-sidebar{--nav-sidebar-width:var(--nav-sidebar-width-tablet)}.nav-sidebar:not(.drawer){background:var(--nav-sidebar-background)}.nav-sidebar:not(.drawer) input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-list,.nav-sidebar:not(.drawer) .nav-sidebar-list{background:transparent;padding:var(--nav-sidebar-padding);width:var(--nav-sidebar-width);height:fit-content;max-height:100%}.nav-sidebar:not(.drawer) input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-shade,.nav-sidebar:not(.drawer) input[type=checkbox].nav-sidebar-trigger:checked~.nav-sidebar-trigger,.nav-sidebar:not(.drawer) .nav-sidebar-shade,.nav-sidebar:not(.drawer) .nav-sidebar-trigger{display:none}`

	CSSDesktop = `.nav-sidebar{--nav-sidebar-width:var(--nav-sidebar-width-desktop)}`

	CSSWidescreen = `.nav-sidebar{--nav-sidebar-width:var(--nav-sidebar-width-widescreen)}`

	CSSPrint = `.nav-sidebar{display:var(--nav-sidebar-print-display)}`

	CSSVariables    = ``

	CSSVariablesAMP = ``
)

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "nav-sidebar"

	// AMPName is the AMP HTML block name.
	AMPName = internal.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .RightSide         = Set NavSidebar animation to push towards left */ -}}
{{- /* .Class             = NavSidebar class attribute                    */ -}}
{{- /* .ID                = NavSidebar id attribute                       */ -}}
{{- /* .Menu              = NavSidebar Menu icon HTML code                */ -}}
{{- /* .Close             = NavSidebar Close icon HTML code               */ -}}
{{- /* .List              = NavSidebar primary List                       */ -}}
{{- /*   .UID             = List UID for animation identification         */ -}}
{{- /*   .HTML            = HTML content for the item                     */ -}}
{{- /*   .Items           = Sub list. Repeat List structure. Optional.    */ -}}
`
)

const (
	// DepHTML is the vanilla HTML output type.
	DepHTML = `
{{- define "` + Name + "-item" + `" -}}
<li {{- if .ID }} id="{{- .ID -}}"{{- end -}}

	{{- if .Class }} class="{{- .Class -}}"{{- end -}}

	{{- if .Style }} style="{{- .Style -}}"{{- end -}}>

	{{- if ne (len .Items) 0 }}

		<input id="nav-sidebar-submenu-{{- .UID -}}"

			type="checkbox">

		<label for="nav-sidebar-submenu-{{- .UID -}}">

			{{- .HTML -}}

		</label>

		<ul id="nav-sidebar-submenu-list-{{- .UID -}}">

			{{- range .Items }}

				{{ template "` + Name + `-item" . -}}

			{{- end -}}

		</ul>

	{{- else }}

		{{ .HTML }}

	{{- end }}
</li>
{{ end -}}
`

	// DepAMPHTML is the Accelerated Mobile Pages HTML output
	// type.
	DepAMPHTML = `
{{- define "` + AMPName + "-item" + `" -}}
<li {{- if .ID }} id="{{- .ID -}}"{{- end -}}

	{{- if .Class }} class="{{- .Class -}}"{{- end -}}

	{{- if .Style }} style="{{- .Style -}}"{{- end -}}>

	{{- if ne (len .Items) 0 }}

		<input id="nav-sidebar-submenu-{{- .UID -}}"

			type="checkbox">

		<label for="nav-sidebar-submenu-{{- .UID -}}">

			{{- .HTML -}}

		</label>

		<ul id="nav-sidebar-submenu-list-{{- .UID -}}">

			{{- range .Items }}

				{{ template "` + AMPName + `-item" . -}}

			{{- end -}}

		</ul>

	{{- else }}

		{{ .HTML }}

	{{- end }}
</li>
{{ end -}}
`
)

const (
	// HTML is the vanilla HTML output type.
	HTML = `
<nav class="nav-sidebar{{- if .RightSide }} right-side{{- end }}

	{{- if .DrawerMode }} drawer{{- end }}

	{{- if .Class }} {{ .Class -}}{{- end }}"

	{{- if .ID }}id="{{- .ID -}}"{{- end -}}>

	<input id="nav-sidebar-{{- .List.UID -}}"

		class="nav-sidebar-trigger"

		type="checkbox">

	<label class="nav-sidebar-trigger" for="nav-sidebar-{{- .List.UID -}}">

		{{- .Menu -}}

		{{- .Close -}}

	</label>

	<label class="nav-sidebar-shade" for="nav-sidebar-{{- .List.UID -}}">

	</label>

	<ul class="nav-sidebar-list">

		{{- if .List.HTML }}

			<li class="nav-sidebar-title">{{ .List.HTML }}</li>

		{{- end -}}

		{{- range .List.Items }}

			{{ template "` + Name + `-item" . -}}

		{{- end -}}

	</ul>
</nav>
`

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = `
<nav class="nav-sidebar{{- if .RightSide }} right-side{{- end }}

	{{- if .DrawerMode }} drawer{{- end }}

	{{- if .Class }} {{ .Class -}}{{- end }}"

	{{- if .ID }}id="{{- .ID -}}"{{- end -}}>

	<button class="nav-sidebar-icon nav-sidebar-menu"

		on="tap:nav-sidebar-{{- .List.UID -}}.open">

		{{- .Menu -}}

	</button>
</nav>
<amp-sidebar id="nav-sidebar-{{- .List.UID -}}"

	class="nav-sidebar{{- if .RightSide }} right-side{{- end }}

	{{- if .Class }} {{ .Class -}}{{- end }}"

	layout="nodisplay"

	side="{{- if .RightSide -}} right {{- else -}} left {{- end -}}">

	<button id="nav-sidebar-{{- .List.UID -}}"

		class="nav-sidebar-icon nav-sidebar-close"

		on="tap:nav-sidebar-{{- .List.UID -}}.close">

		{{- .Close -}}

	</button>

	<ul class="nav-sidebar-list">

		{{- if .List.HTML }}

			<li class="nav-sidebar-title">{{ .List.HTML }}</li>

		{{- end -}}

		{{- range .List.Items }}

			{{ template "` + AMPName + `-item" . -}}

		{{- end -}}

	</ul>
</amp-sidebar>
`
)

type Data struct {
	// Class is the additiona CSS class tag for NavSidebar.
	Class string

	// Close is the HTML codes for illustrating the close trigger button.
	Close string

	// ID is the ID tag for NavSidebar.
	ID string

	// List is the main list of items.
	List *nav.Item

	// Menu is the HTML codes for illustrating the menu trigger button.
	Menu string

	// RightSide flag is to set NavSidebar appears from the right-side.
	//
	// When set to true, the Sidebar will animate as push to left direction
	// instead of conventional push to right direction.
	//
	// Default is false, which is left-side.
	RightSide bool

	// DrawerMode flag is to set NavSidebar always appear in drawer mode.
	//
	// When set to true, on bigger screen, the sidebar is to retain the
	// drawer open/close effect similar to mobile version. Otherwise,
	// it will be expanded automatically and have the drawer effect removed.
	DrawerMode bool
}