fix: menu styles

src/assets/styles/base/index.css

@@ -113,12 +113,12 @@ blockquote {
 
 /* links */
 a {
-  text-decoration: none;
-}
-
-a,
-.active {
   color: var(--accent-color);
+  text-decoration: none;
+
+  & svg {
+    stroke: var(--accent-color);
+  }
 }
 
 a:hover,
@@ -303,10 +303,12 @@ a.view-all:focus svg {
   cursor: not-allowed;
 }
 
-a svg,
-nav .active svg,
-nav ul li .active svg {
-  stroke: var(--accent-color);
+.active {
+  color: var(--accent-color) !important;
+}
+
+.active svg {
+  stroke: var(--accent-color) !important;
 }
 
 /* social icons */

src/assets/styles/components/menu.css

@@ -10,11 +10,13 @@
     overflow: hidden;
     margin: 0;
 
-    & .icon > svg {
+    & .icon > svg,
+    & .active > svg {
       display: block;
     }
 
-    & .icon > span {
+    & .icon > span,
+    & .active > span {
       display: none;
     }
   }
@@ -78,6 +80,7 @@ theme-toggle {
     justify-content: center;
     align-items: center;
     gap: 0;
+    z-index: 1;
 
     & > li {
       display: flex;
@@ -89,11 +92,13 @@ theme-toggle {
       color: var(--text-color);
       background: var(--background-color);
 
-      & .icon > svg {
+      & .icon > svg,
+      & .active > svg {
         display: none;
       }
 
-      & .icon > span {
+      & .icon > span,
+      & .active > span {
         display: inline;
       }
     }