Convert the social menu to a config driven version

layouts/partials/header.html

@@ -1,29 +1,27 @@
+{{- $url := .RelPermalink -}}
 <header class="site">
   <div class="platter grid">
-      <h1 class="site">
-        <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
-      </h1>
+    <h1 class="site">
+      <a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
+    </h1>
 
-      {{ $url := .RelPermalink }}
-      {{ with site.Menus.main }}
-      <nav class="site bulleted">
-        {{- range . -}}
-          {{- if eq .URL $url -}}
-          <li class="active"><span>{{ .Name }}</span></li>
-          {{- else -}}
-          <li><a href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
-          {{- end -}}
+    {{- $currentPage := . -}}
+
+    {{ with site.Menus.main }}
+    <nav class="site bulleted">
+    {{- range . -}}
+      <li{{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }}><span>{{ .Name }}</span></li>
+    {{- end -}}
+    </nav>
+    {{ end }}
+
+    <nav class="social">
+      {{ with site.Menus.social }}
+        {{- range . -}} 
+        {{- $targetBlank := .Params.targetBlank | default true -}}
+        <li><a style="--url: var(--{{ .Identifier }}-icon)" href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}"><span>{{ .Params.shortName | default .Name }}</span></a></li>
         {{- end -}}
-      </nav>
       {{ end }}
-
-      <nav class="social">
-        <li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
-        <li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
-        <li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
-        {{ with .OutputFormats.Get "rss" }}
-        <li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
-        {{ end }}
-      </nav>
+    </nav>
   </div>
 </header>