Add alternate tag types

resources/assets/js/app.js

@@ -52,7 +52,7 @@ $.when($.ready).then(() => {
         }
       }); */
 
-  const sortableEl = document.getElementById("sortable");
+  let sortableEl = document.getElementById("sortable");
   let sortable;
   if (sortableEl !== null) {
     // eslint-disable-next-line no-undef
@@ -171,6 +171,16 @@ $.when($.ready).then(() => {
         }, 350);
       }
     })
+    .on("click", ".tag", (e) => {
+      e.preventDefault();
+      const tag =  $(e.target).data('tag')
+      $('#taglist .tag').removeClass('current')
+      $(e.target).addClass('current')
+      $('#sortable .item-container').show()
+      if (tag !== 'all') {
+        $('#sortable .item-container:not(.'+tag+')').hide()
+      }
+    })
     .on("click", "#add-item, #pin-item", (e) => {
       e.preventDefault();
       const app = $("#app");

resources/assets/sass/_app.scss

@@ -188,7 +188,11 @@ body {
 			border-radius: 10px;
 			> .title {
 				padding: 20px 20px 0;
-				color: white;
+				
+				a {
+					color: white;
+					text-decoration: none;
+				}
 			}
 		}
 	}
@@ -291,6 +295,9 @@ body {
 		z-index: 1;
 	}
 }
+.categorytitle {
+	color: #fff!important;
+}
 .tooltip {
 	padding: 25px;
 	border-radius: 5px;
@@ -306,13 +313,32 @@ body {
 	opacity: 0;
 	transform: translateY(-20px);
 	transition: all 0.3s;
+	pointer-events: none;
 	&.active {
 		transform: translateY(0);
 		opacity: 1;
 		z-index: 4;
 	}
 }
-
+.taglist {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	.tag {
+		padding: 10px 20px;
+		background: rgba(0, 0, 0, 0.608);
+		border-radius: 6px;
+		font-size: 12px;
+		cursor: pointer;
+		opacity: 0.6;
+		&.current {
+			opacity: 1;
+		}
+		&:hover:not(.current) {
+			opacity: 0.8;
+		}
+	}
+}
 .tile-actions {
     position: absolute;
     top: 0px;