refactor(MobileMenu & TheNavbar): convert to UnoCSS, reduce boilerplate

package.json

@@ -12,6 +12,7 @@
     "dev": "vite --host",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "lint:scss": "stylelint \"./**/*.{css,scss,sass,vue}\"",
     "serve": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage",

src/App.vue

@@ -5,10 +5,12 @@ import TheNavbar from '@/components/layout/TheNavbar.vue'
 </script>
 
 <template>
-  <TheNavbar />
-  <router-view />
-  <TheContributing />
-  <TheFooter />
+  <div class="relative">
+    <TheNavbar />
+    <RouterView />
+    <TheContributing />
+    <TheFooter />
+  </div>
 </template>
 
 <style lang="scss">
@@ -67,7 +69,7 @@ body {
   vertical-align: super;
 }
 
-//Animations
+// Animations
 
 @keyframes scale {
   0% {

src/components/buttons/CtaIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { useCtaComponent } from '@/functions/useCtaComponent'
+
+defineProps<{
+  icon: string
+  small?: boolean
+}>()
+
+const { component, bindings } = useCtaComponent(useAttrs())
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="bindings"
+    class="button mx-1 px-1 py-0.5 rounded-1"
+    :class="{ small }"
+  >
+    <i :class="icon" />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  font-size: rem(20px);
+
+  &.small {
+    font-size: rem(16px);
+  }
+}
+</style>

src/components/layout/MobileMenu.vue

@@ -1,138 +1,75 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { watch } from 'vue'
+import CtaComponent from '@/components/buttons/CtaComponent.vue'
+
+interface Link {
+  id: string
+  to?: string
+  test?: string
+  text?: string
+  href?: string
+  target?: string
+  icon?: string
+}
+
 const props = defineProps<{
-  showMobileMenu: Boolean
-  smallerThanLg: Boolean
+  links: Link[]
+  show: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'onCloseMenu'): void
+  (e: 'close'): void
 }>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const smallerThanMd = breakpoints.smaller('md')
+
+watch(smallerThanMd, (value) => {
+  if (props.show && !value)
+    emit('close')
+})
 </script>
 
 <template>
   <transition name="slide">
-    <div v-if="props.showMobileMenu && props.smallerThanLg" class="mobile-menu-container">
-      <div class="mobile-menu-header">
-        <div class="logo">
-          <router-link
-            data-test="mobile-homepage-link"
-            :to="{ name: 'Home' }"
-            @click="emit('onCloseMenu')"
-          >
-            <img alt="SH logo" width="36" src="@/assets/sh-logo-small.png">
-          </router-link>
-        </div>
-        <button class="close-header" data-test="mobile-burger-menu-cta" @click="emit('onCloseMenu')">
-          <i class="fas fa-hamburger" />
-        </button>
-      </div>
-      <nav>
-        <div class="navbar" data-test="mobile-nav-link-wrapper">
-          <a
-            data-test="mobile-github-page-link"
-            href="https://github.com/Schrodinger-Hat"
-            target="_blank"
-            @click="emit('onCloseMenu')"
-          >GitHub
-          </a>
-          <router-link
-            data-test="mobile-team-page-link"
-            :to="{ name: 'Team' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.team') }}
-          </router-link>
-          <router-link
-            data-test="mobile-event-page-link"
-            :to="{ name: 'EventList' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.events') }}
-          </router-link>
-          <router-link
-            data-test="mobile-conduct-page-link"
-            :to="{ name: 'CodeOfConduct' }"
-            @click="emit('onCloseMenu')"
-          >
-            {{ $t('navbar.codeOfConduct') }}
-          </router-link>
-          <a
-            data-test="mobile-go-nord-page-link"
-            href="https://ign.schrodinger-hat.it"
-            target="_blank"
-            @click="emit('onCloseMenu')"
-          > ImageGoNord </a>
-        </div>
-      </nav>
-    </div>
+    <nav v-if="show && smallerThanMd" class="menu">
+      <CtaComponent
+        v-for="{ id, href, to, text, test, target } in links"
+        :key="id"
+        :data-test="`data-${test}`"
+        :href="href"
+        :target="target ? target : null"
+        :to="to ? { name: to } : null"
+        class="head-6 link block py-4 cursor-pointer border-b border-b-slate-300 dark:border-b-slate-50/[0.06] "
+        @click="$emit('close')"
+      >
+        <span>{{ $t(text as string) }}</span>
+      </CtaComponent>
+    </nav>
   </transition>
 </template>
 
 <style scoped lang="scss">
-.mobile-menu-container {
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  width: 100%;
-  height: calc(100vh);
+.menu {
   background: $bg-primary;
   transition: all 0.4s ease-in 0s;
-
-  nav {
-    .navbar {
-      text-align: center;
-
-      a {
-        display: block;
-        padding: 0.8em 0;
-        border-bottom: 1px solid $bg-secondary;
-        font-size: 1.3em;
-
-        &:last-child {
-          border-bottom: none;
-        }
-      }
-    }
-  }
 }
 
 .#{$dark-mode-class} {
-  .mobile-menu-container {
+  .menu{
     background: $dark-bg-primary;
   }
 }
 
 .slide-enter-active,
 .slide-leave-active {
-  bottom: 0;
-  opacity: 1;
-  transition: bottom 0.25s ease-out 0s, opacity 0.3s ease-in-out 0s;
+  transition: 0.25s ease-out 0s;
 }
 
 .slide-enter-from,
 .slide-leave-to {
-  bottom: 100vh;
   opacity: 0;
-}
-
-.mobile-menu-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-}
-
-button {
-  border: none;
-  border-radius: 0.25em;
-  margin: 0 0.4em;
-  background-color: transparent;
-  cursor: pointer;
-  font-size: 1.2em;
-  transition: background-color 100ms ease-in-out 0s;
-
-  &:hover {
-    background-color: $bg-secondary;
-  }
+  transform: translateY(-100%);
 }
 </style>