From 732cca823d744acad0b7633111cd62330dce8e26 Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Thu, 12 Dec 2024 12:26:06 +0900
Subject: [PATCH] scroll to the proposal menu when it is triggered

---
 frontend/views/components/menu/MenuParent.vue |  2 ++
 .../containers/proposals/ProposalsWidget.vue  | 36 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/views/components/menu/MenuParent.vue b/frontend/views/components/menu/MenuParent.vue
index 424e6fdd3a..91cd76f917 100644
--- a/frontend/views/components/menu/MenuParent.vue
+++ b/frontend/views/components/menu/MenuParent.vue
@@ -26,6 +26,7 @@ export default ({
   methods: {
     handleTrigger () {
       this.config.Menu.isActive = true
+      this.$emit(this.config.Menu.isActive ? 'menu-open' : 'menu-close')
     },
     handleSelect (itemId) {
       this.closeMenu()
@@ -33,6 +34,7 @@ export default ({
     },
     closeMenu () {
       this.config.Menu.isActive = false
+      this.$emit('menu-close')
     }
   }
 }: Object)
diff --git a/frontend/views/containers/proposals/ProposalsWidget.vue b/frontend/views/containers/proposals/ProposalsWidget.vue
index e863d95fa5..fb260de1ef 100644
--- a/frontend/views/containers/proposals/ProposalsWidget.vue
+++ b/frontend/views/containers/proposals/ProposalsWidget.vue
@@ -2,6 +2,7 @@
 component(
   :is='componentData.type'
   v-bind='componentData.props'
+  :class='{ "c-has-extra-bottom-margin": ephemeral.isMenuOpen }'
   data-test='proposalsSection'
 )
   template(#cta='')
@@ -12,11 +13,13 @@ component(
         @click='openModal("PropositionsAllModal")'
       ) Archived proposals
 
-      button-dropdown-menu(
+      button-dropdown-menu.c-proposals-menu(
         :buttonText='L("Create proposal")'
         :options='proposalOptions'
         @select='onDropdownItemSelect'
-        boundEdge='left'
+        @menu-open='onMenuOpen'
+        @menu-close='onMenuClose'
+        :boundEdge='ephemeral.isPhone ? "left" : "right"'
       )
 
   ul.c-proposals(v-if='hasProposals' data-test='proposalsWidget')
@@ -59,16 +62,26 @@ export default ({
   mounted () {
     this.refreshArchivedProposals()
     sbp('okTurtles.events/on', PROPOSAL_ARCHIVED, this.onProposalArchived)
+
+    this.matchMediaPhone = window.matchMedia('screen and (max-width: 768px)')
+    this.ephemeral.isPhone = this.matchMediaPhone.matches
+    this.matchMediaPhone.onchange = (e) => {
+      this.ephemeral.isPhone = e.matches
+    }
   },
   beforeDestroy () {
     sbp('okTurtles.events/off', PROPOSAL_ARCHIVED, this.onProposalArchived)
+    this.matchMediaPhone.onchange = null
     this.clearTimeouts()
   },
   data () {
     return {
+      matchMediaPhone: null,
       ephemeral: {
         archivedProposals: [],
-        timeouts: []
+        timeouts: [],
+        isPhone: false,
+        isMenuOpen: false
       }
     }
   },
@@ -217,6 +230,19 @@ export default ({
       }
 
       this.openModal(modalNameMap[itemId], queries[itemId] || undefined)
+    },
+    onMenuOpen () {
+      this.ephemeral.isMenuOpen = true
+
+      this.$nextTick(() => {
+        const proposalsMenu = document.querySelector('.c-proposals-menu')
+        if (proposalsMenu) {
+          proposalsMenu.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        }
+      })
+    },
+    onMenuClose () {
+      this.ephemeral.isMenuOpen = false
     }
   },
   watch: {
@@ -256,4 +282,8 @@ export default ({
 .c-description p {
   margin-top: 1rem;
 }
+
+.c-has-extra-bottom-margin {
+  margin-bottom: 12rem;
+}
 </style>