use icons instead of text; closes #6

assets/icons/blog.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" stroke="inherit" fill="inherit"><g transform="rotate(45, 180, 240)"><path d="M 250 375 C 194.772 375 150 319.036 150 250 L 150 100 C 150 44.772 194.772 0 250 0 C 305.228 0 350 44.772 350 100 L 350 250 C 350 319.036 305.228 375 250 375 Z"/><path style="stroke-linecap: round;" d="M 250.001 150 L 250 500.03" transform="matrix(1, -0.000003, 0.000003, 1, -0.000975, 0.00075)"/><path style="stroke-linecap: round;" d="M 249.992 180.713 L 249.991 320.712" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -153.556825, 270.705963)" bx:origin="0.286467 0.999998"/><path style="stroke-linecap: round;" d="M 249.99 110.004 L 249.989 250.003" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -103.558456, 249.994221)" bx:origin="0.286467 0.999998"/></g></svg>

assets/icons/home.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" stroke="inherit" fill="inherit">
+  <path d="M 150 250 C 150 149.988 250 99.999 250 100 C 250 100 350 150 350 250 C 350 300 282.5 450 400 450 L 100 450 C 212.5 450 150 300 150 250 Z" style="stroke-linejoin: round;"/>
+  <ellipse cx="250" cy="212.5" rx="27.663" ry="27.663"/>
+  <ellipse cx="250" cy="300" rx="27.663" ry="27.663"/>
+  <path d="M 241.825 470.695 C 241.875 470.695 241.912 423.473 241.912 408.195 C 241.912 392.917 254.297 380.532 269.575 380.532 C 284.853 380.532 297.238 392.917 297.238 408.195 C 297.238 423.473 297.275 470.695 297.275 470.695" transform="matrix(1, 0, 0, 1, -19.574531, -20.694907)"/>
+  <ellipse cx="425" cy="75" rx="45" ry="45"/>
+  <ellipse cx="75" cy="100" rx="25" ry="25"/>
+  <path d="M 345.061 226.897 C 363.01 226.897 377.561 243.686 377.561 264.397 C 377.561 285.107 363.01 301.897 345.061 301.897" transform="matrix(0.990268, 0.139173, -0.139173, 0.990268, 40.313177, -47.711651)"/>
+  <path style="stroke-linecap: round;" d="M 150 462.5 L 350 462.5"/>
+</svg>

assets/scss/partials/sidebar.scss

@@ -28,7 +28,8 @@
 		background-color: transparent;
 	}
 
-	a.hint-text {
+	a {
+		&.hint-text {
 			position: relative;
 
 			&::before {
@@ -65,6 +66,7 @@
 				}
 			}
 		}
+	}
 
 	header {
 		text-align: center;
@@ -172,6 +174,16 @@
 		}
 		a {
 			text-decoration: none;
+			display: flex;
+			place-content: center;
+
+			svg {
+				height: 3rem;
+				width: 3rem;
+				fill: transparent;
+				stroke: var(--text-accent-300);
+				stroke-width: 20px;
+			}
 		}
 	}
 	aside {

layouts/partials/sidebar.html

@@ -12,9 +12,9 @@
         <ul>
             {{- range .Site.Menus.main }}
                 {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
-            <li class="active"><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
+                    <li class="active"><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
                 {{ else }}
-            <li><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
+                    <li><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
                 {{ end }}
             {{- end }}
         </ul>