Add dropdown component. Add hamburger menu for nomenclature citations…

… panel

src/assets/css/vars.css

@@ -8,6 +8,8 @@
   --color-base-foreground: 255, 255, 255;
   --color-base-background: 245, 247, 251;
   --color-base-muted: 226, 232, 240;
+  --color-base-soft: 156,163,175;
+  --color-base-lighter: 55,65,81;
   --color-base-border: 203, 213, 225;
   --color-base-content: 0, 0, 0;
 
@@ -27,6 +29,8 @@
   --color-base-background: 23, 23, 23;
   --color-base-foreground: 38, 38, 38;
   --color-base-muted: 48, 48, 48;
+  --color-base-soft: 200,200,200;
+  --color-base-lighter: 220, 220, 220;
   --color-base-border: 38, 38, 38;
   --color-base-content: 255, 255, 255;
 }

src/components/Dropdown/Dropdown.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="relative inline">
+    <button @click="toggleMenu">
+      <slot name="button" />
+    </button>
+    <ul
+      v-if="isVisible"
+      class="
+        bg-base-foreground
+        absolute font-normal
+        text-sm
+        text-base-lighter
+        right-0
+        z-10
+        mt-2
+        w-56
+        origin-top-right
+        rounded-md
+        shadow-lg
+        ring-1
+        ring-black
+        ring-opacity-5
+        focus:outline-none"
+    >
+      <li
+        v-for="item in items"
+        :key="item.label"
+        class="block w-full px-4 py-2 text-left text-sm cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 box-border"
+        @click="itemClicked(item)"
+      >
+        {{ item.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const isVisible = ref(false)
+
+const toggleMenu = () => {
+  isVisible.value = !isVisible.value
+}
+
+const itemClicked = item => {
+  isVisible.value = false
+
+  item.action()
+}
+</script>

src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue

@@ -1,16 +1,24 @@
 <template>
   <VCard>
-    <VCardHeader>
+    <VCardHeader class="flex justify-between">
       <h1 class="text-md">
         Nomenclature citations
       </h1>
+      <Dropdown
+        :items="menuOptions"
+      >
+        <template #button>
+          <IconHamburger class="text-base-soft h-3" />
+        </template>
+      </Dropdown>
     </VCardHeader>
 
     <div class="text-sm">
       <CitationRow
         v-for="citation in citationList.first"
         :key="citation.id"
         :citation="citation"
+        ref="rowRefs"
       />
 
       <CitationRowShowMore
@@ -19,11 +27,12 @@
         @click="showAll = true"
       />
       <AnimationOpacity>
-        <div v-if="showAll">
+        <div v-show="showAll">
           <CitationRow
             v-for="citation in citationList.middle"
             :key="citation.id"
             :citation="citation"
+            ref="rowRefs"
           />
         </div>
       </AnimationOpacity>
@@ -32,6 +41,7 @@
         v-for="citation in citationList.last"
         :key="citation.id"
         :citation="citation"
+        ref="rowRefs"
         class="last:border-b-0"
       />
     </div>
@@ -53,6 +63,7 @@ const props = defineProps({
   }
 })
 
+const rowRefs = ref([])
 const showAll = ref(false)
 const citations = ref([])
 const citationList = computed(() => {
@@ -68,6 +79,23 @@ const citationList = computed(() => {
   }
 })
 
+const menuOptions = computed(() => [
+  {
+    label: showAll.value
+      ? 'Show less'
+      : 'Show all',
+    action: () => showAll.value = !showAll.value
+  },
+  {
+    label: 'Expand',
+    action: () => changeRowExpandedState(true)
+  },
+  {
+    label: 'Collapse',
+    action: () => changeRowExpandedState(false)
+  }
+])
+
 watch(
   () => props.otuId,
   async () => {
@@ -80,4 +108,9 @@ watch(
   }
 )
 
+const changeRowExpandedState = value => {
+  rowRefs.value.forEach(component => {
+    component.setExpanded(value)
+  })
+}
 </script>

src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue

@@ -54,4 +54,12 @@ const sourceLabel = computed(() =>
     props.citation.pages
   ].filter(Boolean).join(':'))
 
+const setExpanded = value => {
+  isExpanded.value = value
+}
+
+defineExpose({
+  setExpanded
+})
+
 </script>

src/modules/otus/views/Index.vue

@@ -63,7 +63,7 @@
         </TabMenu>
       </div>
     </div>
-    <div class="pt-4 pb-4">
+    <div class="pt-3 pb-4">
       <div class="container mx-auto box-border">
         <router-view
           v-if="taxon.id && otu.id"

tailwind.config.js

@@ -26,10 +26,12 @@ module.exports = {
       colors: {
         base: {
           background: withOpacity('--color-base-background'),
+          border: withOpacity('--color-base-border'),
+          content: withOpacity('--color-base-content'),
           foreground: withOpacity('--color-base-foreground'),
+          lighter: withOpacity('--color-base-lighter'),
           muted: withOpacity('--color-base-muted'),
-          border: withOpacity('--color-base-border'),
-          content: withOpacity('--color-base-content')
+          soft: withOpacity('--color-base-soft'),
         },
 
         map: {