DEV: Port sidebar mobile view acceptance tests to system tests (#20421)

The acceptance tests are flaky so I've decided to port them to system
test which makes them easier to work with and reason about.

spec/system/page_objects/components/composer.rb

@@ -3,13 +3,19 @@
 module PageObjects
   module Components
     class Composer < PageObjects::Components::Base
+      COMPOSER_ID = "#reply-control"
+
+      def opened?
+        page.has_css?("#{COMPOSER_ID}.open")
+      end
+
       def open_composer_actions
         find(".composer-action-title .btn").click
         self
       end
 
       def fill_title(title)
-        find("#reply-control #reply-title").fill_in(with: title)
+        find("#{COMPOSER_ID} #reply-title").fill_in(with: title)
         self
       end
 
@@ -37,7 +43,7 @@ module PageObjects
       end
 
       def create
-        find("#reply-control .btn-primary").click
+        find("#{COMPOSER_ID} .btn-primary").click
       end
 
       def action(action_title)
@@ -45,11 +51,11 @@ module PageObjects
       end
 
       def button_label
-        find("#reply-control .btn-primary .d-button-label")
+        find("#{COMPOSER_ID} .btn-primary .d-button-label")
       end
 
       def composer_input
-        find("#reply-control .d-editor .d-editor-input")
+        find("#{COMPOSER_ID} .d-editor .d-editor-input")
       end
     end
   end

spec/system/page_objects/components/sidebar_header_dropdown.rb

@@ -5,10 +5,50 @@ module PageObjects
     class SidebarHeaderDropdown < PageObjects::Components::Base
       def click
         page.find(".hamburger-dropdown").click
+
+        # `.animated` is important here because we want to wait until dropdown has finished its animation completely
+        page.has_css?(".menu-panel.animated")
+        self
       end
 
+      SIDEBAR_HAMBURGER_DROPDOWN = ".sidebar-hamburger-dropdown"
+
       def visible?
-        page.has_css?(".sidebar-hamburger-dropdown")
+        page.has_css?(SIDEBAR_HAMBURGER_DROPDOWN)
+      end
+
+      def hidden?
+        page.has_no_css?(SIDEBAR_HAMBURGER_DROPDOWN)
+      end
+
+      def has_no_keyboard_shortcuts_button?
+        page.has_no_css?(".sidebar-footer-actions-keyboard-shortcuts")
+      end
+
+      def click_community_header_button
+        page.click_button(
+          I18n.t("js.sidebar.sections.community.header_action_title"),
+          class: "sidebar-section-header-button",
+        )
+      end
+
+      def click_everything_link
+        page.click_link(
+          I18n.t("js.sidebar.sections.community.links.everything.content"),
+          class: "sidebar-section-link-everything",
+        )
+      end
+
+      def click_toggle_to_desktop_view_button
+        page.click_button(
+          I18n.t("js.desktop_view"),
+          class: "sidebar-footer-actions-toggle-mobile-view",
+        )
+      end
+
+      def click_outside
+        dropdown = page.find(SIDEBAR_HAMBURGER_DROPDOWN)
+        dropdown.click(x: dropdown.rect.width + 1, y: 1)
       end
     end
   end