Fix bug with regex matching active navi link for mobile and style mobile active navi link

components/navi.js

@@ -9,10 +9,12 @@ import { Button, Icon, useMobileMedia } from './jambonz-ui';
 
 function NaviItem({obj}) {
   const router = useRouter();
-  const regex = new RegExp(`^${obj.link}`);
+  const rSlash = /^\/|\/$/g;
+  const cleanLink = obj.link.replace(rSlash, '');
+  const cleanPath = router.asPath.replace(rSlash, '');
   const classes = {
     navi__link: true,
-    active: regex.test(router.asPath),
+    active: cleanLink === cleanPath,
   };
 
   return (

styles/_navi.scss

@@ -98,10 +98,6 @@
       text-align: center;
       padding-top: 32px;
 
-      li {
-        margin-top: 16px;
-      }
-
       .navi__link {
         color: $white;
         font-size: $h6-size;
@@ -110,9 +106,25 @@
       }
     }
 
+    &__links {
+      .navi__link {
+        padding: 4px 0;
+        margin: 12px 0;
+        display: inline-block;
+
+        &.active {
+          border-bottom: 2px solid $white;
+        }
+      }
+    }
+
     &__footer {
       padding-top: 48px;
 
+      li {
+        margin-top: 16px;
+      }
+
       .navi__link {
         font-size: $m-size;
         font-family: 'objectivityregular';