mobile link

Author: Saamiyah

packages/frontendmu-nuxt/components/icon/calendar.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg
+    version="1.0" xmlns="http://www.w3.org/2000/svg"
+    class:list="{[props.class]}"
+    viewBox="0 0 989.000000 1024.000000"
+    preserveAspectRatio="xMidYMid meet"
+    fill="currentColor"
+  >
+
+    <g
+      transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+      fill="currentColor"
+    >
+      <path
+        d="M2826 9489 c-300 -41 -562 -284 -636 -589 -18 -75 -20 -118 -20 -372
+l0 -288 -347 0 c-394 0 -439 -6 -556 -67 -126 -66 -249 -210 -298 -349 -11
+-30 -24 -90 -30 -132 -6 -51 -9 -1158 -7 -3252 l3 -3175 22 -65 c65 -188 213
+-342 400 -413 l58 -22 3503 -3 c3863 -2 3563 -7 3698 59 132 65 258 216 311
+372 l28 82 3 3185 c2 3485 6 3282 -56 3413 -62 132 -167 239 -299 306 -112 56
+-152 61 -535 61 l-348 0 0 288 c0 308 -7 367 -53 482 -81 198 -256 367 -458
+441 -112 41 -233 53 -483 46 -242 -6 -284 -14 -423 -82 -151 -74 -292 -221
+-363 -379 -59 -129 -63 -156 -67 -488 l-5 -308 -924 0 -924 0 0 273 c-1 362
+-20 463 -120 620 -60 96 -199 224 -298 275 -139 73 -201 84 -472 88 -129 1
+-266 -2 -304 -7z m511 -655 c15 -11 36 -36 45 -55 17 -31 18 -89 18 -779 0
+-703 -1 -747 -18 -779 -35 -65 -61 -71 -292 -71 -186 0 -208 2 -237 20 -71 43
+-68 5 -71 799 -2 483 1 731 8 766 11 55 43 95 90 114 15 6 107 9 227 8 186 -2
+204 -4 230 -23z m3670 15 c49 -18 81 -58 93 -114 7 -35 10 -283 8 -766 -3
+-697 -3 -715 -23 -749 -38 -65 -63 -71 -300 -68 -192 3 -212 5 -237 23 -60 45
+-58 16 -58 826 0 787 0 779 48 822 11 10 33 22 48 27 42 12 387 12 421 -1z
+m1333 -4979 l0 -2500 -3395 0 -3395 0 0 2500 0 2500 3395 0 3395 0 0 -2500z"
+      />
+    </g>
+  </svg>
+</template>

packages/frontendmu-nuxt/components/site/Menu.vue

@@ -99,7 +99,7 @@ const links: TMenu = {
   advent: {
     title: 'Advent Calendar',
     href: 'https://advent.frontend.mu',
-    class: 'hidden md:block',
+
   },
 }
 
@@ -195,7 +195,7 @@ onMounted(toggleHeader)
         </div>
         <nav>
           <ul
-            class="nav-links text-sm md:text-sm lg:text-base flex md:gap-4 font-medium font-heading"
+            class="nav-links text-sm md:text-sm lg:text-base flex md:gap-4 gap-2 font-medium font-heading"
           >
             <template v-for="item of Object.keys(links)" :key="item">
               <SiteMenuItem :links="links" :item="item" />

packages/frontendmu-nuxt/components/site/MenuItem.vue

@@ -3,6 +3,8 @@ const { links, item } = defineProps<Props>()
 
 const currentPath = computed(() => useRoute().path)
 
+const today = new Date().getDate()
+
 interface TMenuItem {
   title: string
   href: string
@@ -30,7 +32,7 @@ interface Props {
     :aria-haspopup="links[item].title === 'About' ? 'true' : undefined"
   >
     <NuxtLink
-      :class="[links[item].title === 'Advent Calendar' && 'text-red-600 dark:text-green-500']"
+      :class="[links[item].title === 'Advent Calendar' && 'hidden md:flex text-red-600 dark:text-green-500']"
       class="flex items-center" :href="links[item].href"
       :target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
     >
@@ -40,8 +42,21 @@ interface Props {
       />
 
       <span class="relative z-20  p-2">{{ links[item].title }}</span>
+
       <Icon v-if="!!links[item].href.includes(&quot;https&quot;)" name="carbon:launch" height="1em" />
     </NuxtLink>
+
+    <NuxtLink
+      v-if="links[item].title === 'Advent Calendar'" class="md:hidden text-green-600 relative flex justify-center items-center animate-bounce"
+      :href="links[item].href"
+
+      :target="!!links[item].href.includes(&quot;https&quot;) ? &quot;_blank&quot; : &quot;_self&quot;"
+    >
+      <IconCalendar class="w-8 h-8" />
+      <div class="text-xs text-red-600 dark:text-red-100 absolute top-1/3 ">
+        {{ today }}
+      </div>
+    </NuxtLink>
     <div v-if="links[item].children" class="menu-dropdown px-2 pb-2 bg-white rounded-md text-black">
       <div class="menu-dropdown-item  theme-dark">
         <ul class="flex flex-col gap-2">