diff --git a/styles/atat.scss b/styles/atat.scss
index 0134dd89..72c7af40 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -39,6 +39,7 @@
@import "components/sticky_cta.scss";
@import "components/error_page.scss";
@import "components/member_form.scss";
+@import "components/toggle_menu.scss";
@import "sections/login";
@import "sections/home";
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index fffc468f..beb2f576 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -154,55 +154,6 @@
margin-right: $gap * 6;
}
}
-
- .app-member-menu {
- position: absolute;
- top: $gap;
- right: $gap * 2;
-
- .accordion-table__item__toggler {
- padding: $gap / 3;
- border: 1px solid $color-gray-lighter;
- border-radius: 3px;
- cursor: pointer;
-
- &:hover,
- &--active {
- background-color: $color-aqua-lightest;
- }
-
- .icon {
- margin: $gap / 2;
- }
- }
-
- &__toggle {
- position: absolute;
- right: 0;
- top: 30px;
- background-color: $color-white;
- border: 1px solid $color-gray-light;
- z-index: 1;
- margin-top: 0;
-
- a {
- display: block;
- padding: $gap;
- border-bottom: 1px solid $color-gray-lighter;
- text-decoration: none;
- color: $color-black;
- cursor: pointer;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &:hover {
- background-color: $color-aqua-lightest;
- }
- }
- }
- }
}
#add-new-env {
diff --git a/styles/components/_toggle_menu.scss b/styles/components/_toggle_menu.scss
new file mode 100644
index 00000000..a8ef0cbd
--- /dev/null
+++ b/styles/components/_toggle_menu.scss
@@ -0,0 +1,49 @@
+.toggle-menu {
+ position: absolute;
+ top: $gap;
+ right: $gap * 2;
+
+ .accordion-table__item__toggler {
+ padding: $gap / 3;
+ border: 1px solid $color-gray-lighter;
+ border-radius: 3px;
+ cursor: pointer;
+
+ &:hover,
+ &--active {
+ background-color: $color-aqua-lightest;
+ }
+
+ .icon {
+ margin: $gap / 2;
+ }
+ }
+
+ &__toggle {
+ position: absolute;
+ right: 0;
+ top: 30px;
+ background-color: $color-white;
+ border: 1px solid $color-gray-light;
+ z-index: 1;
+ margin-top: 0;
+
+ a {
+ display: block;
+ padding: $gap;
+ border-bottom: 1px solid $color-gray-lighter;
+ text-decoration: none;
+ color: $color-black;
+ cursor: pointer;
+ white-space: nowrap;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ &:hover {
+ background-color: $color-aqua-lightest;
+ }
+ }
+ }
+}
diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html
index d6fb7290..662d1145 100644
--- a/templates/applications/fragments/members.html
+++ b/templates/applications/fragments/members.html
@@ -5,6 +5,7 @@
{% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/save_button.html" import SaveButton %}
+{% from "components/toggle_menu.html" import ToggleMenu %}
{% macro MemberManagementTemplate(
application,
@@ -131,32 +132,21 @@
{% endfor %}
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%}
-
-
-
+ {% call ToggleMenu() %}
+
+ {{ "portfolios.applications.members.menu.edit" | translate }}
+
+ {% if invite_pending or invite_expired -%}
+ {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %}
+ {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
+
+ {{ "portfolios.applications.members.menu.resend" | translate }}
+
+ {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%}
+ {{ 'invites.revoke' | translate }}
+ {%- endif %}
+ {%- endif %}
+ {% endcall %}
{%- endif %}
diff --git a/templates/components/toggle_menu.html b/templates/components/toggle_menu.html
new file mode 100644
index 00000000..b9cd0cfa
--- /dev/null
+++ b/templates/components/toggle_menu.html
@@ -0,0 +1,17 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro ToggleMenu() %}
+
+
+
+{% endmacro %}