Merge pull request #402 from chec/feature/nav-ping

chec · Jan 13, 2021 · 970727c · 970727c
2 parents 7913e02 + eeb1bd6
commit 970727c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/src/components/ChecNavigation.vue b/src/components/ChecNavigation.vue
@@ -75,6 +75,7 @@
           >
             <ChecNavIcon :icon="section.icon" />
           </ChecButton>
+          <Ping v-if="section.ping" />
         </li>
       </ul>
       <div @mouseover="() => handleOpenSection(user)">
@@ -101,6 +102,7 @@ import ChecLogo from '@/assets/svgs/chec-logo.svg';
 import ChecNavIcon from '@/components/ChecNavIcon';
 import ChecButton from '@/components/ChecButton';
 import ChecIcon from '@/components/ChecIcon';
+import Ping from './ChecNavigation/Ping.vue';
 
 export default {
   name: 'ChecNavigation',
@@ -110,6 +112,7 @@ export default {
     ChecAvatar,
     ChecLogo,
     ChecNavIcon,
+    Ping,
   },
   props: {
     /**

diff --git a/src/components/ChecNavigation/Ping.vue b/src/components/ChecNavigation/Ping.vue
@@ -0,0 +1,27 @@
+<template>
+  <span class="chec-navigation__ping">
+    <span class="chec-navigation__ping-outer" />
+    <span class="chec-navigation__ping-inner" />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Ping',
+};
+</script>
+
+<style lang="scss">
+.chec-navigation__ping {
+  @apply flex h-3 w-3 relative -ml-5 -mt-5 pointer-events-none;
+
+  &-inner {
+    @apply relative inline-flex rounded-full h-3 w-3 bg-green-400;
+  }
+
+  &-outer {
+    @apply animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75;
+    animation-duration: 3s;
+  }
+}
+</style>
diff --git a/src/stories/components/ChecNavigation.stories.mdx b/src/stories/components/ChecNavigation.stories.mdx
@@ -66,6 +66,7 @@ the order of the "tree" that it is given
             {
               label: 'Products',
               icon: 'products',
+              ping: true,
               links: [
                 {
                   label: 'Products',