Package navsidebar

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

Package navsidebar is for rendering the page navigation sidebar.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

All Bissetii Compressed Compiled CSS

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);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;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)}`
)

Constants for managing the package as a whole.

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

	// AMPName is the AMP HTML block name.
	AMPName = root.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.    */ -}}
`
)

Dependencies are the dependent codes for building independent template.

This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.

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 -}}
`
)

Full HTML codes for rendering templates without needing to parse file.

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>
`
)

Data

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
}

Data is the data structure for rendering the component.