From b601113ed2ab0cc0d8bfc4bded7c2a5b90cc2394 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 16 Mar 2023 18:59:31 +0100
Subject: [PATCH] use icons instead of text; closes #6

---
 assets/icons/blog.svg             |  1 +
 assets/icons/home.svg             | 10 ++++
 assets/scss/partials/sidebar.scss | 78 ++++++++++++++++++-------------
 layouts/partials/sidebar.html     | 10 ++--
 4 files changed, 61 insertions(+), 38 deletions(-)
 create mode 100644 assets/icons/blog.svg
 create mode 100644 assets/icons/home.svg

diff --git a/assets/icons/blog.svg b/assets/icons/blog.svg
new file mode 100644
index 0000000..c966f12
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/assets/icons/home.svg b/assets/icons/home.svg
new file mode 100644
index 0000000..5449cb4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index ca53cff..e046183 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -28,40 +28,42 @@
 		background-color: transparent;
 	}
 
-	a.hint-text {
-		position: relative;
+	a {
+		&.hint-text {
+			position: relative;
 
-		&::before {
-			content: attr(data-title);
-			left: 100%;
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			background-color: var(--sidebar-accent-2);
-			color: var(--text-accent-900);
-			padding: 0.2rem 0.5rem;
-			border-radius: 0.5rem;
-			pointer-events: none;
-			opacity: 0%;
-			transition: opacity 0.3s ease-in-out;
-		}
-		&::after {
-			content: "";
-			transform: translate(-100%, -50%);
-			border-left: 0.5rem solid transparent;
-			border-top: 0.5rem solid transparent;
-			border-bottom: 0.5rem solid transparent;
-			border-right: 0.7rem solid var(--sidebar-accent-2);
-			top: 50%;
-			position: absolute;
-			left: 100%;
-			pointer-events: none;
-			opacity: 0%;
-			transition: opacity 0.3s ease-in-out;
-		}
-		&:hover {
-			&::before, &::after {
-				opacity: 100%;
+			&::before {
+				content: attr(data-title);
+				left: 100%;
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				background-color: var(--sidebar-accent-2);
+				color: var(--text-accent-900);
+				padding: 0.2rem 0.5rem;
+				border-radius: 0.5rem;
+				pointer-events: none;
+				opacity: 0%;
+				transition: opacity 0.3s ease-in-out;
+			}
+			&::after {
+				content: "";
+				transform: translate(-100%, -50%);
+				border-left: 0.5rem solid transparent;
+				border-top: 0.5rem solid transparent;
+				border-bottom: 0.5rem solid transparent;
+				border-right: 0.7rem solid var(--sidebar-accent-2);
+				top: 50%;
+				position: absolute;
+				left: 100%;
+				pointer-events: none;
+				opacity: 0%;
+				transition: opacity 0.3s ease-in-out;
+			}
+			&:hover {
+				&::before, &::after {
+					opacity: 100%;
+				}
 			}
 		}
 	}
@@ -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 {
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 7a47ef5..77512df 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -11,11 +11,11 @@
     <section id="sidebar-menu">
         <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>
-            {{ else }}
-            <li><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
-            {{ end }}
+                {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
+                    <li class="active"><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
+                {{ else }}
+                    <li><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
+                {{ end }}
             {{- end }}
         </ul>
     </section>