Header.html 4.89 KB
Newer Older
Benni Mack's avatar
Benni Mack committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html
	xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
	xmlns:ac="http://typo3.org/ns/B13/Assetcollector/ViewHelpers"
	data-namespace-typo3-fluid="true"
>

<div class="b_typo3universe">
	<div class="b_typo3universe__contentcontainer">
		<typo3-universe active="demo">
			<div style="display: block; height: 44px; background-color: #fff;"></div>
		</typo3-universe>
	</div>
</div>

<header class="b_header">
	<div class="b_header__contentcontainer">

		<input type="checkbox" class="b_pseudo" id="navtrigger" />

		<label for="navtrigger" class="b_navtrigger">
			<span></span>
			<span></span>
			<span></span>
		</label>
		<span class="b_header__logolinkwrapper">
			<a href="{startpage.0.link}" class="b_header__logolink" aria-label="{startpage.0.title}">
				<ac:svg name="logo" class="b_header__logo" additionalAttributes="{aria-hidden: 'true'}"/>
			</a>
		</span>

		<input type="radio" name="mainnavi" checked class="b_pseudo" id="submenu-0"/>
		<ul class="b_navi">
			<f:for each="{mainMenu}" as="item">
				<li class="b_navi__item {f:if(condition: item.subpages, then: 'b_navi__item--hassub')}">
					<f:if condition="{item.subpages}">
						<input type="radio" name="mainnavi" class="b_pseudo" id="submenu-{item.uid}" />
						<label for="submenu-{item.uid}" class="b_navi__link b_navi__link--label {f:if(condition: item.isInRootLine, then: 'b_navi__link--active')}">
							<span>{item.nav_title}</span>
							<ac:svg name="arrow-right" class="b_navi__icon b_navi__icon--after" />
						</label>
					</f:if>
42
					<f:link.typolink parameter="{item.uid}" class="b_navi__link {f:if(condition: item.isInRootLine, then: 'b_navi__link--active')}">
Benni Mack's avatar
Benni Mack committed
43
44
45
46
47
						<span>{item.nav_title}</span>
						<f:if condition="{item.subpages}">
							<ac:svg name="arrow-down" class="b_navi__icon b_navi__icon--after b_navi__icon--closed" />
							<ac:svg name="arrow-up" class="b_navi__icon b_navi__icon--after b_navi__icon--opened" />
						</f:if>
48
					</f:link.typolink>
Benni Mack's avatar
Benni Mack committed
49
50
51
52
53
54
55
56
57
58
					<f:if condition="{item.subpages}">
						<div class="b_navi__submenu">
							<ul class="b_navi__sublist b_navi__sublist--contentcontainer">
								<li class="b_navi__subitem b_navi__subitem--back">
									<label for="submenu-0" class="b_navi__link b_navi__link--level-2">
										<ac:svg name="arrow-left" class="b_navi__icon b_navi__icon--before" />
										{f:translate(key: 'mobile-menu-back', extensionName: 'site_t3demo')}
									</label>
								</li>
								<li class="b_navi__subitem b_navi__subitem--parentpage">
59
									<f:link.typolink parameter="{item.uid}" class="b_navi__link b_navi__link--level-2 {f:if(condition: item.isCurrentPage, then: 'b_navi__link--active')}">
Benni Mack's avatar
Benni Mack committed
60
										<span>{item.nav_title}</span>
61
									</f:link.typolink>
Benni Mack's avatar
Benni Mack committed
62
63
64
								</li>
								<f:for each="{item.subpages}" as="item">
									<li class="b_navi__subitem">
65
										<f:link.typolink parameter="{item.uid}" class="b_navi__link b_navi__link--level-2 {f:if(condition: item.isInRootLine, then: 'b_navi__link--active')}">
Benni Mack's avatar
Benni Mack committed
66
											<span>{item.nav_title}</span>
67
										</f:link.typolink>
Benni Mack's avatar
Benni Mack committed
68
69
70
71
72
73
74
75
76
77
78
79
80
81
									</li>
								</f:for>
							</ul>
						</div>
					</f:if>
				</li>
			</f:for>
		</ul>

		<div class="b_header__meta b_header__meta--contentcontainer">
			<f:if condition="{languageMenu}">
				<ul class="b_langswitch">
					<f:for each="{languageMenu}" as="item">
						<li class="b_langswitch__item">
82
83
84
85
86
87
88
89
90
91
92
93
							<f:if condition="{item.available}">
								<f:then>
									<a href="{item.link}" class="b_langswitch__link {f:if(condition: item.active, then: 'b_langswitch__link--active')}">{item.navigationTitle}</a>
								</f:then>
								<f:else>
									<f:link.typolink
										parameter="{startpage.0.data.uid}"
										class="b_langswitch__link {f:if(condition: item.active, then: 'b_langswitch__link--active')}"
										language="{item.languageId}"
									>{item.navigationTitle}</f:link.typolink>
								</f:else>
							</f:if>
Benni Mack's avatar
Benni Mack committed
94
95
96
97
98
99
100
101
						</li>
					</f:for>
				</ul>
			</f:if>

			<div class="b_header__login">
				<f:if condition="{settings.userIsLoggedIn}">
					<f:then>
102
103
104
105
106
107
108
						<f:if condition="!{currentpage.0.data.fe_group}">
							<f:then>
								<f:link.page additionalParams="{logintype: 'logout'}" class="b_button b_button--secondary umami--click--button-frontend-logout">
									<f:translate key="login.logout" extensionName="site_t3demo" />
								</f:link.page>
							</f:then>
							<f:else>
109
								<f:link.page pageUid="{settings.login}" additionalParams="{logintype: 'logout'}" class="b_button b_button--secondary umami--click--button-frontend-logout">
110
111
112
113
									<f:translate key="login.logout" extensionName="site_t3demo" />
								</f:link.page>
							</f:else>
						</f:if>
Benni Mack's avatar
Benni Mack committed
114
115
					</f:then>
					<f:else>
116
						<f:link.typolink parameter="{settings.login}" class="b_button umami--click--button-frontend-login">
Benni Mack's avatar
Benni Mack committed
117
118
119
120
121
122
123
124
125
126
127
128
							<f:translate key="login.login" extensionName="site_t3demo" />
						</f:link.typolink>
					</f:else>
				</f:if>
			</div>
		</div>

	</div>

</header>

</html>