feat: social menu (#401)

CaiJimmy · web-flow · commit 661e59b85d67 · 2021-10-23T11:58:55.000+02:00
diff --git a/assets/icons/brand-github.svg b/assets/icons/brand-github.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+</svg>
+
+
diff --git a/assets/icons/brand-twitter.svg b/assets/icons/brand-twitter.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+</svg>
+
+
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
@@ -201,3 +201,18 @@
         }
     }
 }
+
+.social-menu {
+    list-style: none;
+    padding: 0%;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        stroke: var(--body-text-color);
+        stroke-width: 1.33;
+    }
+}
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
@@ -178,6 +178,19 @@ menu:
               ### For demonstration purpose, the home link will be open in a new tab
               newTab: true
               icon: home
+    
+    social:
+        - identifier: github
+          name: GitHub
+          url: https://github.com/CaiJimmy/hugo-theme-stack
+          params:
+            icon: brand-github
+            
+        - identifier: twitter
+          name: Twitter
+          url: https://twitter.com
+          params:
+            icon: brand-twitter
 
 related:
     includeNewer: true
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
@@ -29,8 +29,28 @@
             </figure>
             {{ end }}
         {{ end }}
+        
         <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
         <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
+
+        {{- with .Site.Menus.social -}}
+            <ol class="social-menu">
+                {{ range . }}
+                    <li>
+                        <a 
+                            href='{{ .URL | relLangURL }}'
+                            {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
+                            {{ with .Name }}title="{{ . }}"{{ end }}
+                        >
+                            {{ $icon := default "link" .Params.Icon }}
+                            {{ with $icon }}
+                                {{ partial "helper/icon" . }}
+                            {{ end }}
+                        </a>
+                    </li>
+                {{ end }}
+            </ol>
+        {{- end -}}
     </header>
 
     <ol class="menu" id="main-menu">

Original file line number	Diff line number	Diff line change
`@@ -201,3 +201,18 @@`
`201`	`201`	`}`
`202`	`202`	`}`
`203`	`203`	`}`
	`204`	`+`
	`205`	`+.social-menu {`
	`206`	`+ list-style: none;`
	`207`	`+ padding: 0%;`
	`208`	`+ display: flex;`
	`209`	`+ flex-direction: row;`
	`210`	`+ gap: 10px;`
	`211`	`+`
	`212`	`+ svg {`
	`213`	`+ width: 24px;`
	`214`	`+ height: 24px;`
	`215`	`+ stroke: var(--body-text-color);`
	`216`	`+ stroke-width: 1.33;`
	`217`	`+ }`
	`218`	`+}`