From 08aad9bf13e968e3770a0636f4c647c4c269365a Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Tue, 24 Oct 2023 23:26:22 +0200
Subject: [PATCH] IMPR: Form submission render && Move page basics templates

---
 _config/base-extensions.yml                   |   1 -
 _config/graphql.yml                           |   5 +
 .../ObjectGraphQlEx.php                       |  10 +-
 templates/Includes/Alerts.ss                  |  53 +++++
 templates/Includes/Content.ss                 |  49 ++++
 templates/Includes/First.ss                   |  22 ++
 templates/Includes/Footer.ss                  |  53 +++++
 templates/Includes/Header.ss                  |  22 ++
 templates/Includes/Last.ss                    |  15 ++
 templates/Includes/LoadingSpinner.ss          | 221 ++++++++++++++++++
 templates/Includes/LocaleMenu.ss              |  16 ++
 templates/Includes/MainContent.ss             |  45 ++++
 templates/Includes/MetaHead.ss                |  90 +++++++
 templates/Includes/NavItem.ss                 |  35 +++
 templates/Includes/NavItem_link.ss            |  26 +++
 templates/Includes/Navigation.ss              |  21 ++
 templates/Includes/PageHeader.ss              |  15 ++
 templates/Includes/SideBar.ss                 |   1 +
 18 files changed, 698 insertions(+), 2 deletions(-)
 rename src/{Extensions => GraphQL}/ObjectGraphQlEx.php (80%)
 create mode 100755 templates/Includes/Alerts.ss
 create mode 100755 templates/Includes/Content.ss
 create mode 100755 templates/Includes/First.ss
 create mode 100755 templates/Includes/Footer.ss
 create mode 100755 templates/Includes/Header.ss
 create mode 100755 templates/Includes/Last.ss
 create mode 100755 templates/Includes/LoadingSpinner.ss
 create mode 100755 templates/Includes/LocaleMenu.ss
 create mode 100755 templates/Includes/MainContent.ss
 create mode 100755 templates/Includes/MetaHead.ss
 create mode 100755 templates/Includes/NavItem.ss
 create mode 100755 templates/Includes/NavItem_link.ss
 create mode 100755 templates/Includes/Navigation.ss
 create mode 100644 templates/Includes/PageHeader.ss
 create mode 100755 templates/Includes/SideBar.ss

diff --git a/_config/base-extensions.yml b/_config/base-extensions.yml
index 309299d..995e760 100755
--- a/_config/base-extensions.yml
+++ b/_config/base-extensions.yml
@@ -53,4 +53,3 @@ Page:
     - A2nt\CMSNiceties\Models\TeamMember
   extensions:
     - DNADesign\Elemental\Extensions\ElementalPageExtension
-    -  A2nt\CMSNiceties\Extensions\ObjectGraphQlEx
diff --git a/_config/graphql.yml b/_config/graphql.yml
index 5bd9164..358c360 100644
--- a/_config/graphql.yml
+++ b/_config/graphql.yml
@@ -35,3 +35,8 @@ SilverStripe\GraphQLDevTools\Controller:
     - admin
   # default schema that is selected
   default_schema: default
+
+
+Page:
+  extensions:
+    - A2nt\CMSNiceties\GraphQL\ObjectGraphQlEx
diff --git a/src/Extensions/ObjectGraphQlEx.php b/src/GraphQL/ObjectGraphQlEx.php
similarity index 80%
rename from src/Extensions/ObjectGraphQlEx.php
rename to src/GraphQL/ObjectGraphQlEx.php
index f75aa4d..438adbe 100644
--- a/src/Extensions/ObjectGraphQlEx.php
+++ b/src/GraphQL/ObjectGraphQlEx.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace A2nt\CMSNiceties\Extensions;
+namespace A2nt\CMSNiceties\GraphQL;
 
 use SilverStripe\Control\Controller;
 use SilverStripe\GraphQL\Controller as GraphQLController;
@@ -35,4 +35,12 @@ class ObjectGraphQlEx extends DataExtension
 
         return null;
     }
+
+    public function isFormResponse()
+    {
+        $curr = Controller::curr();
+        $req = $this->getRequest();
+
+        return $req->requestVar('SecurityID') || $req->httpMethod() === 'POST';
+    }
 }
diff --git a/templates/Includes/Alerts.ss b/templates/Includes/Alerts.ss
new file mode 100755
index 0000000..e554845
--- /dev/null
+++ b/templates/Includes/Alerts.ss
@@ -0,0 +1,53 @@
+<div id="SiteWideAlerts" class="offline-message">
+	<div
+		class="alert alert-danger alert-offline alert-dismissible fade show"
+		role="alert"
+	>
+		<div class="typography">
+			The Internet connection is missing right now, but you're able to
+			browse previously opened pages offline.
+		</div>
+		<button
+			type="button"
+			class="btn btn-danger btn-close"
+			data-bs-dismiss="alert"
+			aria-label="Close"
+		>
+			<i class="fas fa-times"></i>
+		</button>
+	</div>
+	<noscript>
+		<div class="main-bn alert alert-fixed-top alert-danger" role="alert">
+			Please, enable javascript.
+		</div>
+	</noscript>
+
+	<!--[if lt IE 11
+		]><div class="main-bn alert alert-danger" role="alert">
+			<a
+				href="https://www.google.com/chrome/browser/desktop/"
+				classs="alert-link"
+			>
+				You are using an outdated browser. For a faster, safer browsing
+				experience, upgrade for free today.
+			</a>
+		</div><!
+	[endif]-->
+
+	<% if $SiteWideMessage %>
+		<div class="single-message">
+		    <div class="alert alert-fixed-top alert-{$Type}">
+		    	<div class="$DefaultContainer">
+			    	<b class="btn btn-danger btn-close" data-dismiss="alert" aria-label="Close">
+		                <i class="fas fa-times"></i>
+		            </b>
+			    	{$Message}
+		    	</div>
+		    </div>
+	    </div>
+	<% end_if %>
+
+	<% with $SiteConfig %>
+	    <% include App\Objects\NotificationsList NotificationsToday=$NotificationsToday.filter('Area', 'Site') %>
+	<% end_with %>
+</div>
diff --git a/templates/Includes/Content.ss b/templates/Includes/Content.ss
new file mode 100755
index 0000000..ff366ba
--- /dev/null
+++ b/templates/Includes/Content.ss
@@ -0,0 +1,49 @@
+<% if not $ExcludeHeader %>
+    <% include PageHeader %>
+<% end_if %>
+
+<% if $CurrentElement %>
+    <%-- div class="element page-content-element">
+      <div class="element_container">
+        <div class="$DefaultContainer">
+            <div class="typography">$Content</div>
+        </div>
+      </div>
+    </div --%>
+
+    <div class="current-element">
+        $CurrentElement
+    </div>
+<% else %>
+    <% if $ElementalArea.Elements.Count %>
+        $ElementalArea
+    <% else_if $Content %>
+        <div class="element element_content_field dnadesign__elemental__models__elementcontent">
+            <div class="element-container {$DefaultContainer}">
+                <% include DNADesign\Elemental\Models\ElementContent HTML=$Content %>
+            </div>
+        </div>
+    <% end_if %>
+<% end_if %>
+
+<% if $Form %>
+<div class="page-form-element element">
+    <div class="element_container">
+        <div class="$DefaultContainer">
+            $Form
+        </div>
+    </div>
+</div>
+<% end_if %>
+
+<% if $ExtraCode %>
+<div class="page-extra-code">
+    <div class="element">
+        <div class="element_container">
+            <div class="$DefaultContainer">
+                $ExtraCode
+            </div>
+        </div>
+    </div>
+</div>
+<% end_if %>
diff --git a/templates/Includes/First.ss b/templates/Includes/First.ss
new file mode 100755
index 0000000..3090496
--- /dev/null
+++ b/templates/Includes/First.ss
@@ -0,0 +1,22 @@
+<%-- Upgrade your Browser notice --%>
+<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
+
+<%-- No JS enabled notice --%>
+<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
+
+<% include LoadingSpinner %>
+
+
+<%-- if $isDev || $WebpackActive %>
+	<div id="DevUtilities">
+		$DeferedCSS('app_dev.css')
+		$DeferedJS('app_dev.js')
+		<div class="navs">
+			<button class="toggle-original">Toggle Original</button>
+		</div>
+		<div class="original d-none"></div>
+	</div>
+<% end_if --%>
+
+<%-- Site Wide Alert Message --%>
+<% include Alerts %>
diff --git a/templates/Includes/Footer.ss b/templates/Includes/Footer.ss
new file mode 100755
index 0000000..1bb4edc
--- /dev/null
+++ b/templates/Includes/Footer.ss
@@ -0,0 +1,53 @@
+<div class="wrapper">
+    <div class="element">
+        <div class="footer__container $DefaultContainer">
+            <% with $SiteConfig %>
+                <div class="field">
+                    <div class="fn">$Title</div>
+                    <% if $Address %>
+                        <address>
+                            $Address<br/>
+                            $Suburb, $State $ZipCode
+                        </address>
+                    <% end_if %>
+                </div>
+
+                <% if $PhoneNumber %>
+                    <div class="field">
+                        $PhoneNumber
+                    </div>
+                <% end_if %>
+
+                <% if $PublicEmail %>
+                    <div class="field">
+                        $PublicEmail
+                    </div>
+                <% end_if %>
+
+                <% include Objects\SocialLinks %>
+            <% end_with %>
+
+            <% include LocaleMenu %>
+        </div>
+    </div>
+</div>
+
+<% with $SiteConfig %>
+<div class="copyright footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6">
+                Copyright &copy; {$Top.CurrentTime.Format("Y")} {$Title} All rights reserved.
+            </div>
+            <div class="col-sm-6">
+                <% if $PrivacyPolicy %>
+                    <a href="$PrivacyPolicy.Link">$PrivacyPolicy.Title</a>
+                <% end_if %>
+                <% if $Sitemap %>
+                    <a href="$Sitemap.Link">$Sitemap.Title</a>
+                <% end_if %>
+            </div>
+        </div>
+    </div>
+</div>
+<% end_with %>
diff --git a/templates/Includes/Header.ss b/templates/Includes/Header.ss
new file mode 100755
index 0000000..07a98d4
--- /dev/null
+++ b/templates/Includes/Header.ss
@@ -0,0 +1,22 @@
+<div class="element">
+    <div class="element__container $DefaultContainer">
+        <div class="row">
+            <div class="col col-xl-3">
+                <a id="Logo" class="logo" href="/">
+                    <img src="{$ResourcesURL('logo.png')}" width="100" alt="{$SiteConfig.Title}" />
+                </a>
+            </div>
+            <div class="col col-xl-9 nav-container">
+                <% if $Menu(1) %>
+                    <% include Navigation Navigation=$Menu(1), NavID="Navigation" %>
+                <% end_if %>
+                <%-- if $SearchForm %>
+                    <div id="SearchFormContainer">$SearchForm</div>
+                <% end_if --%>
+                <%-- if $SiteConfig.Navigation %>
+                    <% include Navigation Navigation=$SiteConfig.Navigation, NavID="Navigation" %>
+                <% end_if --%>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/templates/Includes/Last.ss b/templates/Includes/Last.ss
new file mode 100755
index 0000000..590b3b5
--- /dev/null
+++ b/templates/Includes/Last.ss
@@ -0,0 +1,15 @@
+<div class="hidden-print hidden-md">
+    $BetterNavigator
+</div>
+
+<%-- Require CSS+JS from /public/resourses/[js,css]/[ClassName].[js,css] --%>
+$AutoRequirements($ClassName).RAW
+
+<%-- Mapbox
+<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js"></script>
+<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css" rel="stylesheet" />--%>
+
+<%-- place extra requirements after this line --%>
+<div class="extra-code extra-code-site">
+    $SiteConfig.ExtraCode
+</div>
diff --git a/templates/Includes/LoadingSpinner.ss b/templates/Includes/LoadingSpinner.ss
new file mode 100755
index 0000000..5eefa57
--- /dev/null
+++ b/templates/Includes/LoadingSpinner.ss
@@ -0,0 +1,221 @@
+<style>
+	@keyframes lds-ellipsis1 {
+		0% {
+			transform: scale(0);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+	@keyframes lds-ellipsis3 {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}
+	@keyframes lds-ellipsis2 {
+		0% {
+			transform: translate(0, 0);
+		}
+		100% {
+			transform: translate(1.35rem, 0);
+		}
+	}
+	body,
+	html {
+		font-size: 14px;
+		margin: 0;
+		padding: 0;
+		background: #fff;
+		color: #212529;
+		overflow-x: hidden;
+	}
+	@media (min-width: 2000px) {
+		html, body {
+			font-size: .9vw;
+		}
+	}
+	#PageLoading {
+		position: fixed;
+		left: 0;
+		top: 0;
+		margin: 0;
+		width: 100% !important;
+		height: 100% !important;
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-align: center;
+		align-items: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+		z-index: 2000;
+		will-change: opacity;
+		background: #fff;
+		color: #212529;
+	}
+	#PageLoading .logo {
+		width:100px;
+		width: 12.5vw;
+	}
+	#PageLoading .tagline {
+		margin-top:1rem;
+		margin-bottom:1rem;
+		color: #fff;
+		font-size:1.8rem;
+		font-size: 4vh;
+		letter-spacing: .25em;
+	}
+	.main-bn {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 99999999;
+		padding: 0.5rem 1rem;
+		text-align: center;
+		color: #fff;
+		background: #ff0000;
+	}
+	img,
+	iframe {
+		max-width: 100%;
+	}
+	.loading-spinner {
+		text-align: center;
+	}
+	.lds-ellipsis {
+		margin-top:1.5rem;
+		display: inline-block;
+		position: relative;
+		width: 4.57rem;
+		height: 1rem;
+		color: #fff;
+	}
+	.lds-ellipsis div {
+		position: absolute;
+		top:0.15rem;
+		width: 0.78rem;
+		height: 0.78rem;
+		border-radius: 50%;
+		background: #888;
+		animation-timing-function: cubic-bezier(0, 1, 1, 0);
+	}
+	.lds-ellipsis div:nth-child(1) {
+		left: 0.42rem;
+		animation: lds-ellipsis1 0.6s infinite;
+	}
+	.lds-ellipsis div:nth-child(2) {
+		left: 0.9rem;
+		animation: lds-ellipsis2 0.6s infinite;
+	}
+	.lds-ellipsis div:nth-child(3) {
+		left: 1.85rem;
+		animation: lds-ellipsis2 0.6s infinite;
+	}
+	.lds-ellipsis div:nth-child(4) {
+		left: 3.21rem;
+		animation: lds-ellipsis3 0.6s infinite;
+	}
+	@keyframes lds-text {
+		from {
+			font-size: 1em;
+		}
+		to {
+			font-size: 1.5em;
+		}
+	}
+	.lds-text {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-left: -5rem;
+		margin-top: 8rem;
+		font-size: 0.8rem;
+		letter-spacing: 0.25em;
+		color: #fff;
+	}
+	.lds-text b {
+		font-weight: 300;
+		animation: lds-text 5s ease infinite alternate;
+	}
+	.lds-text b:nth-child(1) {
+		animation-delay: 0.5s;
+	}
+	.lds-text b:nth-child(2) {
+		animation-delay: 1s;
+	}
+	.lds-text b:nth-child(3) {
+		animation-delay: 1.5s;
+	}
+	.lds-text b:nth-child(4) {
+		animation-delay: 2s;
+	}
+	.lds-text b:nth-child(5) {
+		animation-delay: 2.5s;
+	}
+	.lds-text b:nth-child(6) {
+		animation-delay: 3s;
+	}
+	.lds-text b:nth-child(7) {
+		animation-delay: 3.5s;
+	}
+	.lds-text b:nth-child(8) {
+		animation-delay: 4s;
+	}
+	.lds-text b:nth-child(9) {
+		animation-delay: 4.5s;
+	}
+	.lds-text b:nth-child(10) {
+		animation-delay: 5s;
+	}
+	@media (orientation: portrait) {
+		#PageLoading .logo {
+			width:50vw;
+		}
+		#PageLoading .tagline {
+			font-size: 4vw;
+		}
+	}
+</style>
+
+<% with $SiteConfig %>
+<div id="PageLoading">
+	<div class="loading-spinner">
+		<img
+			class="logo"
+			src="{$ResourcesURL('logo.png')}"
+			width="200"
+			alt="{$Title}"
+		/><br />
+		<div class="lds-ellipsis">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<br />
+
+        <% if $Tagline %>
+        <div class="tagline">
+            $Tagline
+        </div>
+        <% else %>
+        	<div class="lds-placeholder">LOADING...</div>
+        	<div class="lds-text">
+	        	<b>L</b>
+				<b>O</b>
+				<b>A</b>
+				<b>D</b>
+				<b>I</b>
+				<b>N</b>
+				<b>G</b>
+				<b>.</b>
+				<b>.</b>
+				<b>.</b>
+			</div>
+        <% end_if %>
+	</div>
+</div>
+<% end_with %>
diff --git a/templates/Includes/LocaleMenu.ss b/templates/Includes/LocaleMenu.ss
new file mode 100755
index 0000000..3de8c57
--- /dev/null
+++ b/templates/Includes/LocaleMenu.ss
@@ -0,0 +1,16 @@
+<% cached 'LocalesNavigationFooter', List(Page).max(LastEdited), $CurrentLocale, $ID %>
+<% if $Locales %>
+<div id="LocaleMenu">
+    <nav class="primary">
+        <ul class="list-inline">
+            <% loop $Locales %>
+                <li class="list-inline-item $LinkingMode<% if $LinkingMode = 'current' %> active<% end_if %>">
+                    <a href="$Link.ATT" <% if $LinkingMode != 'invalid' %>rel="alternate"
+                       hreflang="$HrefLang"<% end_if %>>$Title.XML</a>
+                </li>
+            <% end_loop %>
+        </ul>
+    </nav>
+</div>
+<% end_if %>
+<% end_cached %>
diff --git a/templates/Includes/MainContent.ss b/templates/Includes/MainContent.ss
new file mode 100755
index 0000000..0795264
--- /dev/null
+++ b/templates/Includes/MainContent.ss
@@ -0,0 +1,45 @@
+<div class="main-content main-content--{$CSSClass}">
+	<% if $HeroImageRecursive %>
+	    <div class="element element__hero-image">
+	        <div class="element-container">
+	            <% include SlideItem Image=$HeroImageRecursive, SlideWidth='2140', SlideHeight='450' %>
+	        </div>
+	    </div>
+	<% end_if %>
+
+	<% if $ShowSidebar %>
+	    <div class="content-holder content-holder__sidebar">
+	        <div class="{$DefaultContainer}">
+	            <div class="row">
+	                <div class="col-md-9 layout__col">
+	                	<% if $URLSegment != 'home' %>
+						    <div id="PageBreadcumbs" class="element element__breadcrumbs">
+						        $Breadcrumbs
+						    </div>
+						<% end_if %>
+	                    $Layout
+	                </div>
+	                <div class="col-md-3 sidebar__col">
+	                	<div class="{$DefaultContainer}">
+		                    <div class="page-content-sidebar page-content jsSidebarUI">
+		                        <div class="jsSidebarUI__inner">
+		                            $SideBarContent
+		                            $SideBarView
+		                        </div>
+		                    </div>
+		                </div>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	<% else %>
+	    <div class="content-holder">
+	    	<% if $URLSegment != 'home' %>
+			    <div id="PageBreadcumbs" class="element element__breadcrumbs">
+			        $Breadcrumbs
+			    </div>
+			<% end_if %>
+	        $Layout
+	    </div>
+	<% end_if %>
+</div>
diff --git a/templates/Includes/MetaHead.ss b/templates/Includes/MetaHead.ss
new file mode 100755
index 0000000..7a21bd0
--- /dev/null
+++ b/templates/Includes/MetaHead.ss
@@ -0,0 +1,90 @@
+<% base_tag %>
+$MetaTags
+
+<meta name="msapplication-navbutton-color" content="#000000" />
+<meta name="apple-mobile-web-app-status-bar-style" content="#000000" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="mobile-web-app-capable" content="yes" />
+
+<%-- OpenGraph --%>
+<meta property="og:url" content="{$AbsoluteBaseURL}" />
+<meta property="og:site_name" content="{$SiteConfig.Title}" />
+<meta property="og:locale" content="$ContentLocale.ATT" />
+
+<meta name="theme-color" content="#ffffff">
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
+
+<% if $MetaTitle %>
+	<meta property="og:title" content="{$MetaTitle} - {$SiteConfig.Title}" />
+	<meta property="og:image:alt" content="{$MetaTitle}" />
+<% else %>
+	<meta property="og:title" content="{$Title} - {$SiteConfig.Title}" />
+	<meta property="og:image:alt" content="{$Title}" />
+<% end_if %>
+
+<% if $MetaDescription %>
+    <meta property="og:description" content="{$MetaDescription}" />
+<% end_if %>
+
+<% if $FeaturedImage %>
+  <meta property="og:image" content="{$FeaturedImage.Link}" />
+  <meta property="twitter:image" content="{$FeaturedImage.Link}" />
+<% else_if $MetaImage %>
+    <meta property="og:image" content="{$MetaImage.Link}" />
+    <meta property="twitter:image" content="{$MetaImage.Link}" />
+<% else %>
+  <meta name="og:image" content="{$AbsoluteBaseURL}resources/app/client/dist/img/logo.png" />
+  <meta name="twitter:image" content="{$AbsoluteBaseURL}resources/app/client/dist/img/logo.png" />
+<% end_if %>
+
+<% if $FacebookAppID %>
+    <meta property="fb:app_id" content="{$FacebookAppID}" />
+<% end_if %>
+<meta property="og:type" content="<% if $OgType %>$OgType<% else %>article<% end_if %>" />
+<%-- /OpenGraph --%>
+
+<%-- Twitter --%>
+<meta name="twitter:card" content="summary">
+<%-- meta name="twitter:creator" content="" --%>
+<meta name="twitter:title" content="<% if $MetaTitle %>{$MetaTitle}<% else %>$Title<% end_if %> - {$SiteConfig.Title}">
+<meta name="twitter:description" content="{$Summary}">
+<meta name="twitter:image" content="{$AbsoluteBaseURL}resources/app/client/dist/img/logo.png">
+<%-- /Twitter --%>
+
+<link rel="canonical" href="{$AbsoluteLink}" />
+
+<link rel="author" type="text/plain" href="{$AbsoluteBaseURL}humans.txt" />
+<link rel="sitemap" type="application/xml" title="Sitemap" href="{$AbsoluteBaseURL}sitemap.xml" />
+
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="preconnect" href="https://maps.google.com" />
+<link rel="preconnect" href="https://ajax.googleapis.com" />
+<link rel="preconnect" href="https://csi.gstatic.com" />
+<link rel="preconnect" href="https://maps.googleapis.com" />
+
+<link rel="preconnect" href="https://www.youtube.com" />
+<link rel="preconnect" href="https://i.ytimg.com" />
+<link rel="preconnect" href="https://i9.ytimg.com" />
+<link rel="preconnect" href="https://s.ytimg.com" />
+
+<link rel="shortcut icon" type="image/x-icon" href="{$AbsoluteBaseURL}resources/app/client/dist/icons/favicon.ico" />
+<link rel="apple-touch-icon" href="{$AbsoluteBaseURL}resources/app/client/dist/icons/apple-touch-icon.png" />
+<link rel="apple-touch-icon-precomposed" href="{$AbsoluteBaseURL}resources/app/client/dist/icons/apple-touch-icon-precomposed.png" />
+
+<meta name="application-name" content="{$SiteConfig.Title}" />
+<meta name="msapplication-TileImage" content="{$AbsoluteBaseURL}resources/app/client/dist/icons/mstile-144x144.png" />
+<meta name="msapplication-TileColor" content="#2F98F1" />
+
+<meta content="yes" name="apple-mobile-web-app-capable" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5" />
+
+<link rel="manifest" href="/manifest.json" />
+
+<meta name="swversion" content="{$SWVersion}" />
+<meta name="ping" content="/Security/ping" />
+<meta name="api_url" content="{$AbsoluteBaseURL}graphql" />
+<meta name="api_static_domain" content="{$AbsoluteBaseURL}" />
+<meta name="http_method" content="{$HttpMethod}" />
diff --git a/templates/Includes/NavItem.ss b/templates/Includes/NavItem.ss
new file mode 100755
index 0000000..049b8d0
--- /dev/null
+++ b/templates/Includes/NavItem.ss
@@ -0,0 +1,35 @@
+<% if $Children %>
+    <div
+        class="
+            nav-item dropdown dropdown-hover
+            <% if $SubmenuColumns %>submenu-cols-dropdown<% end_if %>
+            {$CSSClass} {$ExtraClass}
+        "
+        <% if $Children %>data-bs-toggle="hover"<% end_if %>
+    >
+        <% include NavItem_link ExtraClass="dropdown-toggle dropdown-toggle-fl dropdown-toggle-notouch" %>
+
+        <button
+            id="NavItemButton{$ID}"
+            class="nav-link dropdown-toggle dropdown-toggle-sm dropdown-toggle-touch<% if $RedirectionType = 'External' || $ExternalURL || $OpenInNewWindow %> external<% end_if %><% if $DropdownNoLink %> d-block<% end_if %>"
+            role="button"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            type="button"
+        >
+            $MenuTitle.XML
+        </button>
+
+        <div class="dropdown-menu<% if $SubmenuColumns %> submenu-cols<% end_if %>" aria-labelledby="NavItemButton{$ID}">
+            <ul class="dropdown-list">
+                <% loop $Children %>
+                    <% include NavItem ExtraClass="dropdown-item" %>
+                <% end_loop %>
+            </ul>
+        </div>
+    </div>
+<% else %>
+    <div class="nav-item {$CSSClass} $ExtraClass">
+        <% include NavItem_link ExtraClass='' %>
+    </div>
+<% end_if %>
diff --git a/templates/Includes/NavItem_link.ss b/templates/Includes/NavItem_link.ss
new file mode 100755
index 0000000..c3e1900
--- /dev/null
+++ b/templates/Includes/NavItem_link.ss
@@ -0,0 +1,26 @@
+<a
+    href="{$Link}"
+    class="
+        nav-link
+        graphql-page
+        $ExtraClass
+        {$LinkClass}
+        <% if $RedirectionType = 'External' || $ExternalURL || $OpenInNewWindow %>
+            external
+        <% end_if %>
+        <% if $isCurrent || $isSection %>active <% end_if %>
+        <% if $isSection %>section<% end_if %>
+    "
+    <% if $RedirectionType = 'External' || $OpenInNewWindow %>
+        rel="noreferrer"
+        target="_blank"
+    <% end_if %>
+
+    data-text="{$MenuTitle.XML}"
+>
+	<% if $BlockIcon %>
+	    <i class="fa-icon $BlockIcon"></i>
+	<% end_if %>
+    $MenuTitle.XML
+    <% if $isCurrent || $isSection %><i class="visually-hidden">(current)</i><% end_if %>
+</a>
diff --git a/templates/Includes/Navigation.ss b/templates/Includes/Navigation.ss
new file mode 100755
index 0000000..1f1e892
--- /dev/null
+++ b/templates/Includes/Navigation.ss
@@ -0,0 +1,21 @@
+<nav id="{$NavID}" class="navbar navbar-expand-lg">
+    <button
+		class="navbar-toggler"
+		type="button"
+		data-bs-toggle="collapse"
+		data-bs-target="#{$NavID}Content"
+		aria-controls="{$NavID}Content"
+		aria-expanded="false"
+		aria-label="Toggle navigation"
+	>
+		<i class="navbar-toggler-icon fa fas fa-bars"></i>
+	</button>
+
+    <div id="{$NavID}Content" class="collapse navbar-collapse">
+        <div class="navbar-nav">
+            <% loop $Navigation %>
+                <% include NavItem %>
+            <% end_loop %>
+        </div>
+    </div>
+</nav>
diff --git a/templates/Includes/PageHeader.ss b/templates/Includes/PageHeader.ss
new file mode 100644
index 0000000..a238af0
--- /dev/null
+++ b/templates/Includes/PageHeader.ss
@@ -0,0 +1,15 @@
+<div class="
+            element
+            page-header-element
+            <% if $ElementalArea.Elements.Count < 1 %>
+                d-block no-elements
+            <% else_if not $ElementalArea.Elements.First.ShowTitle && $ElementalArea.Elements.First.ClassName != A2nt\ElementalBasics\Elements\SliderElement && $ElementalArea.Elements.First.ClassName != DNADesign\ElementalList\Model\ElementList %>
+                d-block
+            <% end_if %>
+        ">
+    <div class="element-container $DefaultContainer">
+        <h1 class="page-header">
+            $Title
+        </h1>
+    </div>
+</div>
diff --git a/templates/Includes/SideBar.ss b/templates/Includes/SideBar.ss
new file mode 100755
index 0000000..281c686
--- /dev/null
+++ b/templates/Includes/SideBar.ss
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file