From f44a9f3723b4c06bcfb776dee9d531aa49027494 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 27 Sep 2022 09:30:34 -0300
Subject: [PATCH 1/2] Break citations

---
 .../otus/components/Panel/PanelCitation/PanelCitationRow.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
index 3586589..4910e02 100644
--- a/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
+++ b/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
@@ -23,7 +23,7 @@
       />
     </div>
  
-    <div>
+    <div class="break-all">
       <span 
         v-if="isExpanded"
         v-html="sourceLabel" 

From c3248ee5622a488285a0e56c78e53ff7838ec502 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 27 Sep 2022 18:26:47 -0300
Subject: [PATCH 2/2] Add dropdown component. Add hamburger menu for
 nomenclature citations panel

---
 src/assets/css/vars.css                       |  4 ++
 src/components/Dropdown/Dropdown.global.vue   | 58 +++++++++++++++++++
 .../Panel/PanelCitation/PanelCitation.vue     | 37 +++++++++++-
 .../Panel/PanelCitation/PanelCitationRow.vue  |  8 +++
 src/modules/otus/views/Index.vue              |  2 +-
 tailwind.config.js                            |  6 +-
 6 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Dropdown/Dropdown.global.vue

diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
index bc03c7e..1724b07 100644
--- a/src/assets/css/vars.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.global.vue b/src/components/Dropdown/Dropdown.global.vue
new file mode 100644
index 0000000..7d57235
--- /dev/null
+++ b/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>
diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
index 9d55c97..268d5f8 100644
--- a/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
+++ b/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
@@ -1,9 +1,16 @@
 <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">
@@ -11,6 +18,7 @@
         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>
diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
index 4910e02..606982f 100644
--- a/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index c332511..898752d 100644
--- a/src/modules/otus/views/Index.vue
+++ b/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"
diff --git a/tailwind.config.js b/tailwind.config.js
index f5d5426..6a422ae 100644
--- a/tailwind.config.js
+++ b/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: {