rework sidemenu + fix no categories / links

styles/globals.scss

@@ -34,6 +34,7 @@ body {
 	padding: 10px;
 	display: flex;
 	justify-content: center;
+	animation: fadein 250ms both;
 }
 
 a {
@@ -142,3 +143,13 @@ select:not(.nostyle) {
 		width: 100%;
 	}
 }
+
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

styles/home/categories.module.scss

@@ -59,9 +59,26 @@
     & .block-wrapper.favorites {
         margin-bottom: 15px;
 
+        & .items .item {
+            padding: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        & .items .no-fav-link {
+            user-select: none;
+            text-align: center;
+            font-style: italic;
+            font-size: 0.9em;
+            color: #bbb;
+        }
+
         & .items .item a {
+            width: 100%;
             text-decoration: none;
             color: inherit;
+            padding: 7px 12px;
+            border: 0 !important;
         }
 
         & .items .item .category {
@@ -98,13 +115,14 @@
     // User Card
     & .user-card-wrapper {
         position: relative;
+        user-select: none;
         height: fit-content;
         width: 100%;
         color: #333;
         background-color: #fff;
 
         & .user-card {
-            border-right: 1px solid #dadce0;
+            border: 1px solid #dadce0;
             padding: 7px 12px;
             display: flex;
             gap: 10px;
@@ -122,15 +140,11 @@
             height: 100%;
             width: 100%;
             color: #fff;
-            background-color: red;
-            border: 1px solid red;
             display: none;
         }
 
         &:hover .disconnect-btn {
             display: block;
-            border: 1px solid darkred;
-            box-shadow: red 0 0 3px 1px;
         }
     }
 }

styles/home/links.module.scss

@@ -1,3 +1,12 @@
+.no-link,
+.no-category {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
 .links-wrapper {
     height: 100%;
     padding: 10px;
@@ -24,6 +33,7 @@
     & .links .link {
         user-select: none;
         cursor: pointer;
+        animation: fadein 0.3s both;
 
         & > a {
             height: fit-content;
@@ -70,3 +80,15 @@
         }
     }
 }
+
+@keyframes fadein {
+    0% {
+        transform: translateX(-15px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}