Create submenu component that can be used to render submenus in the left-handed sidebar

app/components/open_project/common/submenu_component.html.erb

@@ -0,0 +1,50 @@
+<div class="op-sidebar">
+  <div class="op-sidebar--body">
+    <% top_level_sidebar_menu_items = @sidebar_menu_items.filter { |menu_item| menu_item[:header].nil? } %>
+    <% if top_level_sidebar_menu_items.any? %>
+      <div class="op-sidemenu">
+        <ul class="op-sidemenu--items">
+          <% top_level_sidebar_menu_items.first[:children].each do |menu_item| %>
+            <li class="op-sidemenu--item">
+              <a class="op-sidemenu--item-action" href="<%= menu_item[:href] %>">
+                <%= menu_item[:title] %>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
+
+    <% nested_sidebar_menu_items = @sidebar_menu_items.filter { |menu_item| menu_item[:header].present? } %>
+    <% if nested_sidebar_menu_items.any? %>
+      <% nested_sidebar_menu_items.each do |menu_item| %>
+        <div class="op-sidemenu"
+             data-controller="menus--expandable-sidemenu"
+             data-application-target="dynamic">
+
+          <button class="op-sidemenu--title"
+                  type="button"
+                  data-action="click->menus--expandable-sidemenu#toggleContainer">
+            <%= menu_item[:header] %>
+            <span class="icon-small icon-arrow-up1"
+                  aria-hidden="true"
+                  data-menus--expandable-sidemenu-target="indicator">
+            </span>
+          </button>
+
+          <ul class="op-sidemenu--items"
+              data-menus--expandable-sidemenu-target="container">
+            <% menu_item[:children].each do |child_item| %>
+              <li class="op-sidemenu--item">
+                <a class="op-sidemenu--item-action" href="<%= child_item[:href] %>">
+                  <%= child_item[:title] %>
+                </a>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/components/open_project/common/submenu_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2023 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+#
+module OpenProject
+  module Common
+    class SubmenuComponent < ApplicationComponent
+      def initialize(sidebar_menu_items: nil)
+        super()
+        @sidebar_menu_items = sidebar_menu_items
+      end
+
+      def render?
+        @sidebar_menu_items.present?
+      end
+    end
+  end
+end

lookbook/previews/open_project/common/submenu_component_preview.rb

@@ -0,0 +1,30 @@
+module OpenProject
+  module Common
+    # @logical_path OpenProject/Common
+    class SubmenuComponentPreview < Lookbook::Preview
+      def default
+        # Meant to be rendered inside the left-handed sidebar
+        render OpenProject::Common::SubmenuComponent.new(
+          sidebar_menu_items: [
+            {
+              header: nil,
+              children: [
+                { title: I18n.t('members.menu.all'), href: '' },
+                { title: I18n.t('members.menu.locked'), href: '' },
+                { title: I18n.t('members.menu.invited'), href: '' }
+              ]
+            },
+            {
+              header: I18n.t('members.menu.project_roles'),
+              children: [{ title: 'ROLE X', href: '' }]
+            },
+            {
+              header: I18n.t('members.menu.groups'),
+              children: [{ title: 'GROUP X', href: '' }]
+            }
+          ]
+        )
+      end
+    end
+  end
+end