From 7a4a4d4eb5626670b1c30ebed065110b0b82e682 Mon Sep 17 00:00:00 2001
From: Merci Jacob <68013195+jacob-js@users.noreply.github.com>
Date: Tue, 5 Nov 2024 15:06:06 +0200
Subject: [PATCH] Tweak the sidebar for a modern look and feel (#1313)

* Tweak the sidebar for a modern look and feel

* Many adjustments, including: using the bootstrap collapse components for collapsible items in the navbar, the sizing, and a bit on the look

* Adjust unit tests

* Adjust selenium tests

* Fix selenium tests

* Fix folder_list tests

* Fix profiles tests

* Fix settings tests

* Fix servers tests
---
 modules/account/modules.php                   |  2 +-
 modules/calendar/modules.php                  |  2 +-
 modules/contacts/modules.php                  |  2 +-
 modules/core/output_modules.php               | 61 +++++++++----------
 modules/core/site.css                         | 56 +++++++++--------
 modules/core/site.js                          | 26 ++++----
 modules/developer/modules.php                 |  4 +-
 modules/feeds/modules.php                     |  8 +--
 modules/history/modules.php                   |  2 +-
 modules/imap_folders/modules.php              |  2 +-
 modules/keyboard_shortcuts/modules.php        |  2 +-
 modules/pgp/modules.php                       |  2 +-
 modules/profiles/modules.php                  |  2 +-
 modules/smtp/modules.php                      |  4 +-
 modules/tags/modules.php                      |  2 +-
 tests/phpunit/modules/core/output_modules.php | 24 ++++----
 .../modules/core/output_modules_debug.php     |  4 +-
 tests/selenium/base.py                        | 12 +++-
 tests/selenium/folder_list.py                 | 26 ++++----
 tests/selenium/login.py                       |  1 +
 tests/selenium/pages.py                       |  2 +-
 tests/selenium/profiles.py                    |  4 +-
 tests/selenium/send.py                        |  1 +
 tests/selenium/servers.py                     |  5 +-
 tests/selenium/settings.py                    | 12 ++--
 tests/selenium/tags.py                        |  2 +-
 26 files changed, 147 insertions(+), 123 deletions(-)

diff --git a/modules/account/modules.php b/modules/account/modules.php
index 122af5ad3c..8cd391907c 100644
--- a/modules/account/modules.php
+++ b/modules/account/modules.php
@@ -208,7 +208,7 @@ protected function output() {
         if ($this->get('internal_users')) {
             $res = '<li class="menu_change_password"><a class="unread_link" href="?page=change_password">';
             if (!$this->get('hide_folder_icons')) {
-                $res .= '<i class="bi bi-key-fill fs-5 me-2"></i>';
+                $res .= '<i class="bi bi-key-fill menu-icon"></i>';
             }
             $res .= $this->trans('Password').'</a></li>';
             $this->concat('formatted_folder_list', $res);
diff --git a/modules/calendar/modules.php b/modules/calendar/modules.php
index f4a0db3a8a..4a34bc9bfd 100644
--- a/modules/calendar/modules.php
+++ b/modules/calendar/modules.php
@@ -132,7 +132,7 @@ class Hm_Output_calendar_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_calendar"><a class="unread_link" href="?page=calendar">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-calendar-week-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-calendar-week-fill menu-icon"></i>';
         }
         $res .= $this->trans('Calendar').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/contacts/modules.php b/modules/contacts/modules.php
index 1c559e7d97..3805b9ef43 100644
--- a/modules/contacts/modules.php
+++ b/modules/contacts/modules.php
@@ -203,7 +203,7 @@ class Hm_Output_contacts_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_contacts"><a class="unread_link" href="?page=contacts">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-people-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-people-fill menu-icon"></i>';
         }
         $res .= $this->trans('Contacts').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/core/output_modules.php b/modules/core/output_modules.php
index 1b4be14944..fc5ef0059e 100644
--- a/modules/core/output_modules.php
+++ b/modules/core/output_modules.php
@@ -15,15 +15,16 @@ class Hm_Output_search_from_folder_list extends Hm_Output_Module {
      * Add a search form to the top of the folder list
      */
     protected function output() {
-        $res = '<li class="menu_search"><form method="get">';
-        $res .= '<div class="d-flex bd-highlight">';
+        $res = '<li class="menu_search mb-4"><form method="get">';
+        $res .= '<div class="input-group">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<div class="ps-1 pe-2"><a class="unread_link" href="?page=search">';
-            $res .= '<i class="bi bi-search"></i></a></div>';
+            $res .= '<a href="?page=search" class="input-group-text" id="basic-addon1">' . 
+            '<i class="bi bi-search"></i>' .
+            '</a>';
         }
-        $res .= '<div class="flex-fill bd-highlight"><input type="hidden" name="page" value="search" />'.
-            '<input type="search" class="search_terms form-control form-control-sm" '.
-            'name="search_terms" placeholder="'.$this->trans('Search').'" /></div></div></form></li>';
+        $res .= '<input type="hidden" name="page" value="search" />'.
+            '<input type="search" class="search_terms form-control form-control-sm" aria-describedby="basic-addon1" '.
+            'name="search_terms" placeholder="'.$this->trans('Search').'" /></div></form></li>';
         if ($this->format == 'HTML5') {
             return $res;
         }
@@ -1320,14 +1321,14 @@ class Hm_Output_main_menu_start extends Hm_Output_Module {
      * Opens a div and unordered list tag
      */
     protected function output() {
-        $res = '<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">'.$this->trans('Main');
+        $res = '';
         if (DEBUG_MODE) {
-            $res .= ' <span title="'.
+            $res .= '<span title="'.
                 $this->trans('Running in debug mode. See https://cypht.org/install.html Section 6 for more detail.').
                 '" class="debug_title">'.$this->trans('Debug').'</span>';
         }
-        $res .= '<i class="bi bi-chevron-down"></i>'.
-        '</div><div class="main"><ul class="folders">';
+        $res .= '<img class="app-logo" src="'.WEB_ROOT. 'modules/core/assets/images/logo_dark.svg">';
+        $res .= '<div class="main"><ul class="folders">';
         if ($this->format == 'HTML5') {
             return $res;
         }
@@ -1354,33 +1355,33 @@ protected function output() {
         if ($total_accounts > 1) {
             $res .= '<li class="menu_combined_inbox"><a class="unread_link" href="?page=message_list&amp;list_path=combined_inbox">';
             if (!$this->get('hide_folder_icons')) {
-                $res .= '<i class="bi bi-box2-fill fs-5 me-2"></i>';
+                $res .= '<i class="bi bi-box2-fill menu-icon"></i>';
             }
             $res .= $this->trans('Everything').'</a><span class="combined_inbox_count"></span></li>';
         }
         $res .= '<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-envelope-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-envelope-fill menu-icon"></i>';
         }
         $res .= $this->trans('Unread').'</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li>';
         $res .= '<li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-flag-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-flag-fill menu-icon"></i>';
         }
         $res .= $this->trans('Flagged').'</a> <span class="flagged_count"></span></li>';
         $res .= '<li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-envelope-x-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-envelope-x-fill menu-icon"></i>';
         }
         $res .= $this->trans('Junk').'</a></li>';
         $res .= '<li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-trash3-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-trash3-fill menu-icon"></i>';
         }
         $res .= $this->trans('Trash').'</a></li>';
         $res .= '<li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-pencil-square fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-pencil-square menu-icon"></i>';
         }
         $res .= $this->trans('Drafts').'</a></li>';
 
@@ -1440,22 +1441,18 @@ protected function output() {
             $parts = explode('_', $src);
             array_pop($parts);
             $name = ucwords(implode(' ', $parts));
+            $class = $this->html_safe($src);
             if (!$single) {
-                $res .= '<div class="src_name d-flex justify-content-between pe-2" data-source=".'.$this->html_safe($src).'">'.$this->trans($name).
+                $res .= '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".'.$this->html_safe($src).'">'.$this->trans($name).
                     '<i class="bi bi-chevron-down"></i></div>';
+                $class .= ' collapse';
             }
 
-            if ($single) {
-                $res .= '<div ';
-            }
-            else {
-                $res .= '<div style="display: none;" ';
-            }
-            $res .= 'class="'.$this->html_safe($src).'"><ul class="folders">';
+            $res .= '<div class="'.$class.'"><ul class="folders">';
             if ($name == 'Email' && count($this->get('imap_servers', array()))  > 1) {
                 $res .= '<li class="menu_email"><a class="unread_link" href="?page=message_list&amp;list_path=email">';
                 if (!$this->get('hide_folder_icons')) {
-                    $res .= '<i class="bi bi-globe-americas fs-5 me-2"></i>';
+                    $res .= '<i class="bi bi-globe-americas menu-icon"></i>';
                 }
                 $res .= $this->trans('All').'</a> <span class="unread_mail_count"></span></li>';
             }
@@ -1477,12 +1474,12 @@ class Hm_Output_settings_menu_start extends Hm_Output_Module {
      * Opens an unordered list
      */
     protected function output() {
-        $res = '<div class="src_name d-flex justify-content-between pe-2" data-source=".settings">'.$this->trans('Settings').
+        $res = '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">'.$this->trans('Settings').
             '<i class="bi bi-chevron-down"></i></div>'.
-            '<ul style="display: none;" class="settings folders">';
+            '<ul class="collapse settings folders">';
         $res .= '<li class="menu_home"><a class="unread_link" href="?page=home">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-house-door-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-house-door-fill menu-icon"></i>';
         }
         $res .= $this->trans('Home').'</a></li>';
         if ($this->format == 'HTML5') {
@@ -1545,7 +1542,7 @@ class Hm_Output_settings_servers_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_servers"><a class="unread_link" href="?page=servers">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-pc-display-horizontal fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-pc-display-horizontal menu-icon"></i>';
         }
         $res .= $this->trans('Servers').'</a></li>';
         $this->concat('formatted_folder_list', $res);
@@ -1563,7 +1560,7 @@ class Hm_Output_settings_site_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_settings"><a class="unread_link" href="?page=settings">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-gear-wide-connected fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-gear-wide-connected menu-icon"></i>';
         }
         $res .= $this->trans('Site').'</a></li>';
         $this->concat('formatted_folder_list', $res);
@@ -1584,7 +1581,7 @@ protected function output() {
         }
         $res = '<li class="menu_save"><a class="unread_link" href="?page=save">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-download fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-download menu-icon"></i>';
         }
         $res .= $this->trans('Save').'</a></li>';
         $this->concat('formatted_folder_list', $res);
diff --git a/modules/core/site.css b/modules/core/site.css
index 972fdb9b79..4d5f6b3828 100644
--- a/modules/core/site.css
+++ b/modules/core/site.css
@@ -33,7 +33,6 @@ a:hover {
 .folder_cell {
   vertical-align: top;
   height: 100%;
-  max-width: 15%;
   display: table-cell;
   padding: 0px;
   margin: 0px;
@@ -50,11 +49,11 @@ a:hover {
   min-height: 100vh;
 }
 
-.selected_menu,
+.selected_menu {
+  background-color: var(--bs-primary-bg-subtle);
+}
 .selected_menu a {
   color: var(--bs-link-color) !important;
-  font-weight: bold !important;
-  line-height: 1.25em;
 }
 
 form {
@@ -369,9 +368,10 @@ button {
   margin-right: 20px;
   padding-right: 15px;
   padding-bottom: 40px;
-  min-width: 200px;
+  min-width: 300px;
   padding-top: 0px;
   min-height: 100vh;
+  padding-top: 20px;
 }
 
 .folders,
@@ -381,14 +381,19 @@ button {
   margin-left: 10px;
   padding-right: 0px;
 }
-.folders li,
+.folders li {
+  padding: 0.5rem;
+  border-radius: var(--bs-border-radius);
+  transition: all linear 0.3s;
+  margin-bottom: 10px;
+}
 .inner_list li {
-  padding: 4px;
-  padding-left: 10px;
-  padding-bottom: 0px;
   margin: 2px;
   white-space: nowrap;
 }
+.inner_list li i {
+  margin-right: 0.25rem;
+}
 .loading_folders {
   text-align: center;
   margin: 10px;
@@ -444,19 +449,18 @@ button {
   cursor: pointer;
   padding-left: 25px;
   margin-top: 0px;
-  margin-right: -15px;
-  background: linear-gradient(
-    180deg,
-    var(--bs-body-bg),
-    var(--bs-body-bg),
-    var(--bs-secondary-bg)
-  ) !important;
   border-bottom: solid 1px var(--bs-secondary-bg);
-  border-top: solid 1px var(--bs-secondary-bg);
   padding-top: 10px;
   font-size: 125%;
   letter-spacing: -1px;
   padding-bottom: 10px;
+  transition: border-bottom-color 0.3s linear;
+}
+.src_name > i {
+  transition: transform 0.3s;
+}
+.src_name[aria-expanded="true"] {
+  border-bottom-color: transparent;
 }
 .main_menu {
   padding-top: 20px;
@@ -717,9 +721,6 @@ button {
 .search_terms {
   padding-left: 5px;
 }
-.folder_list .search_terms {
-  width: 100%;
-}
 .search_content {
   display: table;
   table-layout: fixed;
@@ -933,13 +934,9 @@ div.unseen,
 }
 .mobile .folder_cell {
   display: block;
-  max-width: 96%;
-  width: 96%;
   padding: 0px !important;
 }
 .mobile .folder_list {
-  padding: 0px !important;
-  font-size: 130%;
   margin-right: 0px;
   width: 100%;
 }
@@ -1396,3 +1393,14 @@ nav .menu-toggle {
 body {
   overflow-x: hidden;
 }
+
+.menu-icon {
+  font-size: 1rem;
+  margin-right: 0.5rem;
+}
+
+.app-logo {
+  height: 3rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+}
diff --git a/modules/core/site.js b/modules/core/site.js
index 5e98d9718e..7b17caccf4 100644
--- a/modules/core/site.js
+++ b/modules/core/site.js
@@ -1269,19 +1269,17 @@ var Hm_Folders = {
 
     folder_list_events: function() {
         $('.imap_folder_link').on("click", function() { return expand_imap_folders($(this)); });
-        $('.src_name').on("click", function() {
-            var class_name = $(this).data('source');
-            var icon_element = $(this).find('.bi');
-            Hm_Utils.toggle_section(class_name);
-            setTimeout(() => {
-                var target_element = document.querySelector(class_name);
-                var is_visible = Hm_Utils.is_element_visible(target_element);
-                if (is_visible) {
-                    icon_element.removeClass('bi-chevron-down').addClass('bi-chevron-up');
-                } else {
-                    icon_element.removeClass('bi-chevron-up').addClass('bi-chevron-down');
-                }
-            }, 0);
+        $('.src_name').on('click', function() {
+
+            let transformValue = '';
+            if ($(this).attr('aria-expanded') == 'true') {
+                transformValue = 'rotate(180deg)';
+                
+            } else {
+                transformValue = 'rotate(0deg)';
+            }
+            
+            $(this).find('i').css('transform', transformValue);
         });
         $('.update_message_list').on("click", function(e) {
             var text = e.target.innerHTML;
@@ -1309,7 +1307,7 @@ var Hm_Folders = {
         $('.folder_list').find('*').removeClass('selected_menu');
         if (path) {
             if (page == 'message_list' || page == 'message') {
-                $("[data-id='"+Hm_Utils.clean_selector(path)+"']").addClass('selected_menu');
+                $("[data-id='"+Hm_Utils.clean_selector(path)+"']").closest('li').addClass('selected_menu');
                 $('.menu_'+Hm_Utils.clean_selector(path)).addClass('selected_menu');
             }
             else {
diff --git a/modules/developer/modules.php b/modules/developer/modules.php
index a2bcd23ae0..505f501baf 100644
--- a/modules/developer/modules.php
+++ b/modules/developer/modules.php
@@ -127,7 +127,7 @@ class Hm_Output_developer_doc_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_dev"><a class="unread_link" href="?page=dev">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-bug-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-bug-fill menu-icon"></i>';
         }
         $res .= $this->trans('Dev').'</a></li>';
         if ($this->format == 'HTML5') {
@@ -149,7 +149,7 @@ class Hm_Output_info_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_info"><a class="unread_link" href="?page=info">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-info-circle fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-info-circle menu-icon"></i>';
         }
         $res .= $this->trans('Info').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/feeds/modules.php b/modules/feeds/modules.php
index 7d01cdb0fd..4ee95ed3ad 100644
--- a/modules/feeds/modules.php
+++ b/modules/feeds/modules.php
@@ -793,7 +793,7 @@ protected function output() {
             if(count($this->get('feeds', array()))  > 1) {
                 $res .= '<li class="menu_feeds"><a class="unread_link" href="?page=message_list&amp;list_path=feeds">';
                 if (!$this->get('hide_folder_icons')) {
-                    $res .= '<i class="bi bi-rss-fill fs-5 me-2"></i>';
+                    $res .= '<i class="bi bi-rss-fill menu-icon"></i>';
                 }
                 $res .= $this->trans('All');
                 $res .= '</a> <span class="unread_feed_count"></span></li>';
@@ -802,14 +802,14 @@ protected function output() {
                 $res .= '<li class="feeds_'.$this->html_safe($id).'">'.
                     '<a data-id="feeds_'.$this->html_safe($id).'" href="?page=message_list&list_path=feeds_'.$this->html_safe($id).'">';
                 if (!$this->get('hide_folder_icons')) {
-                    $res .= '<i class="bi bi-rss fs-5 me-2"></i>';
+                    $res .= '<i class="bi bi-rss menu-icon"></i>';
                 }
                 $res .= $this->html_safe($folder).'</a></li>';
             }
         }
         $res .= '<li class="feeds_add_new"><a href="?page=servers#feeds_section">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-plus-square fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-plus-square menu-icon"></i>';
         }
         $res .= $this->trans('Add a feed').'</a></li>';
         if ($res) {
@@ -873,7 +873,7 @@ protected function output() {
 class Hm_Output_start_feed_settings extends Hm_Output_Module {
     protected function output() {
         return '<tr><td colspan="2" data-target=".feeds_setting" class="settings_subtitle cursor-pointer border-bottom p-2">'.
-            '<i class="bi bi-rss-fill fs-5 me-2"></i>'.$this->trans('Feed Settings').'</td></tr>';
+            '<i class="bi bi-rss-fill menu-icon"></i>'.$this->trans('Feed Settings').'</td></tr>';
     }
 }
 
diff --git a/modules/history/modules.php b/modules/history/modules.php
index 5db713f6d5..1a7f1e1e3c 100644
--- a/modules/history/modules.php
+++ b/modules/history/modules.php
@@ -181,7 +181,7 @@ class Hm_Output_history_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_history"><a class="unread_link" href="?page=history">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-clock-history fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-clock-history menu-icon"></i>';
         }
         $res .= $this->trans('History').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/imap_folders/modules.php b/modules/imap_folders/modules.php
index 7e1197586f..4e926b7d4c 100644
--- a/modules/imap_folders/modules.php
+++ b/modules/imap_folders/modules.php
@@ -796,7 +796,7 @@ protected function output() {
         if ($this->get('imap_support')) {
             $res = '<li class="menu_folders"><a class="unread_link" href="?page=folders">';
             if (!$this->get('hide_folder_icons')) {
-                $res .= '<i class="bi bi-folder-fill fs-5 me-2"></i>';
+                $res .= '<i class="bi bi-folder-fill menu-icon"></i>';
             }
             $res .= $this->trans('Folders').'</a></li>';
             if ($this->format == 'HTML5') {
diff --git a/modules/keyboard_shortcuts/modules.php b/modules/keyboard_shortcuts/modules.php
index 6225acf979..797bbed57b 100644
--- a/modules/keyboard_shortcuts/modules.php
+++ b/modules/keyboard_shortcuts/modules.php
@@ -212,7 +212,7 @@ protected function output() {
         if ($this->get('shortcuts_enabled')) {
             $res = '<li class="menu_shortcuts"><a class="unread_link" href="?page=shortcuts">';
             if (!$this->get('hide_folder_icons')) {
-                $res .= '<i class="bi bi-code-slash fs-5 me-2"></i>';
+                $res .= '<i class="bi bi-code-slash menu-icon"></i>';
             }
             $res .= $this->trans('Shortcuts').'</a></li>';
             if ($this->format == 'HTML5') {
diff --git a/modules/pgp/modules.php b/modules/pgp/modules.php
index a1cdaf71d2..1d56df97f7 100644
--- a/modules/pgp/modules.php
+++ b/modules/pgp/modules.php
@@ -211,7 +211,7 @@ class Hm_Output_pgp_settings_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_pgp"><a class="unread_link" href="?page=pgp">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-lock-fill account_icon"></i> ';
+            $res .= '<i class="bi bi-lock-fill account_icon menu-icon"></i> ';
         }
         $res .= $this->trans('PGP').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/profiles/modules.php b/modules/profiles/modules.php
index 14e2204a2c..bbce3f587a 100644
--- a/modules/profiles/modules.php
+++ b/modules/profiles/modules.php
@@ -195,7 +195,7 @@ class Hm_Output_profile_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_profiles"><a class="unread_link" href="?page=profiles">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-person-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-person-fill menu-icon"></i>';
         }
         $res .= $this->trans('Profiles').'</a></li>';
         if ($this->format == 'HTML5') {
diff --git a/modules/smtp/modules.php b/modules/smtp/modules.php
index d819d106be..4f6d38c002 100644
--- a/modules/smtp/modules.php
+++ b/modules/smtp/modules.php
@@ -948,7 +948,7 @@ class Hm_Output_sent_folder_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_sent"><a class="unread_link" href="?page=message_list&amp;list_path=sent">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-send-check-fill fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-send-check-fill menu-icon"></i>';
         }
         $res .= $this->trans('Sent').'</a></li>';
         $this->concat('formatted_folder_list', $res);
@@ -1484,7 +1484,7 @@ class Hm_Output_compose_page_link extends Hm_Output_Module {
     protected function output() {
         $res = '<li class="menu_compose"><a class="unread_link" href="?page=compose">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-file-earmark-text fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-file-earmark-text menu-icon"></i>';
         }
         $res .= $this->trans('Compose').'</a></li>';
 
diff --git a/modules/tags/modules.php b/modules/tags/modules.php
index e1e0973caa..dd63ae1064 100644
--- a/modules/tags/modules.php
+++ b/modules/tags/modules.php
@@ -365,7 +365,7 @@ protected function output() {
         }
         $res .= '<li class="tags_add_new"><a href="?page=tags">';
         if (!$this->get('hide_folder_icons')) {
-            $res .= '<i class="bi bi-plus-square fs-5 me-2"></i>';
+            $res .= '<i class="bi bi-plus-square menu-icon"></i>';
         }
         $res .= $this->trans('Add label').'</a></li>';
         $this->append('folder_sources', array('tags_folders', $res));
diff --git a/tests/phpunit/modules/core/output_modules.php b/tests/phpunit/modules/core/output_modules.php
index 41b71454e9..fa0fc71da7 100644
--- a/tests/phpunit/modules/core/output_modules.php
+++ b/tests/phpunit/modules/core/output_modules.php
@@ -18,7 +18,7 @@ public function test_search_from_folder_list() {
         $test->run();
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals('<li class="menu_search"><form method="get"><div class="d-flex bd-highlight"><div class="ps-1 pe-2"><a class="unread_link" href="?page=search"><i class="bi bi-search"></i></a></div><div class="flex-fill bd-highlight"><input type="hidden" name="page" value="search" /><input type="search" class="search_terms form-control form-control-sm" name="search_terms" placeholder="Search" /></div></div></form></li>', $res->output_data['formatted_folder_list']);
+        $this->assertEquals('<li class="menu_search mb-4"><form method="get"><div class="input-group"><a href="?page=search" class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></a><input type="hidden" name="page" value="search" /><input type="search" class="search_terms form-control form-control-sm" aria-describedby="basic-addon1" name="search_terms" placeholder="Search" /></div></form></li>', $res->output_data['formatted_folder_list']);
     }
     /**
      * @preserveGlobalState disabled
@@ -852,10 +852,10 @@ public function test_folder_list_content_start() {
     public function test_main_menu_start() {
         $test = new Output_Test('main_menu_start', 'core');
         $res = $test->run();
-        $this->assertEquals(array('<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">Main<i class="bi bi-chevron-down"></i></div><div class="main"><ul class="folders">'), $res->output_response);
+        $this->assertEquals(array('<img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">Main<i class="bi bi-chevron-down"></i></div><div class="main"><ul class="folders">'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -865,10 +865,10 @@ public function test_main_menu_content() {
         $test = new Output_Test('main_menu_content', 'core');
         $test->handler_response = array('folder_sources' => array(array('email_folders', 'baz')));
         $res = $test->run();
-        $this->assertEquals(array('<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread"><i class="bi bi-envelope-fill fs-5 me-2"></i>Unread</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li><li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged"><i class="bi bi-flag-fill fs-5 me-2"></i>Flagged</a> <span class="flagged_count"></span></li><li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk"><i class="bi bi-envelope-x-fill fs-5 me-2"></i>Junk</a></li><li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash"><i class="bi bi-trash3-fill fs-5 me-2"></i>Trash</a></li><li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts"><i class="bi bi-pencil-square fs-5 me-2"></i>Drafts</a></li>'), $res->output_response);
+        $this->assertEquals(array('<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread"><i class="bi bi-envelope-fill menu-icon"></i>Unread</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li><li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged"><i class="bi bi-flag-fill menu-icon"></i>Flagged</a> <span class="flagged_count"></span></li><li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk"><i class="bi bi-envelope-x-fill menu-icon"></i>Junk</a></li><li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash"><i class="bi bi-trash3-fill menu-icon"></i>Trash</a></li><li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts"><i class="bi bi-pencil-square menu-icon"></i>Drafts</a></li>'), $res->output_response);
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals(array('folder_sources' => array(array('email_folders', 'baz')), 'formatted_folder_list' => '<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread"><i class="bi bi-envelope-fill fs-5 me-2"></i>Unread</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li><li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged"><i class="bi bi-flag-fill fs-5 me-2"></i>Flagged</a> <span class="flagged_count"></span></li><li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk"><i class="bi bi-envelope-x-fill fs-5 me-2"></i>Junk</a></li><li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash"><i class="bi bi-trash3-fill fs-5 me-2"></i>Trash</a></li><li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts"><i class="bi bi-pencil-square fs-5 me-2"></i>Drafts</a></li>'), $res->output_response);
+        $this->assertEquals(array('folder_sources' => array(array('email_folders', 'baz')), 'formatted_folder_list' => '<li class="menu_unread d-flex align-items-center"><a class="unread_link d-flex align-items-center" href="?page=message_list&amp;list_path=unread"><i class="bi bi-envelope-fill menu-icon"></i>Unread</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li><li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged"><i class="bi bi-flag-fill menu-icon"></i>Flagged</a> <span class="flagged_count"></span></li><li class="menu_junk"><a class="unread_link" href="?page=message_list&amp;list_path=junk"><i class="bi bi-envelope-x-fill menu-icon"></i>Junk</a></li><li class="menu_trash"><a class="unread_link" href="?page=message_list&amp;list_path=trash"><i class="bi bi-trash3-fill menu-icon"></i>Trash</a></li><li class="menu_drafts"><a class="unread_link" href="?page=message_list&amp;list_path=drafts"><i class="bi bi-pencil-square menu-icon"></i>Drafts</a></li>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -905,10 +905,10 @@ public function test_email_menu_content() {
         $this->assertEquals(array('<div class="email_folders"><ul class="folders">baz</ul></div>'), $res->output_response);
         $test->handler_response = array('folder_sources' => array(array('email_folders', 'baz')));
         $res = $test->run();
-        $this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-source=".email_folders">Email<i class="bi bi-chevron-down"></i></div><div style="display: none;" class="email_folders"><ul class="folders">baz</ul></div>'), $res->output_response);
+        $this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".email_folders">Email<i class="bi bi-chevron-down"></i></div><div class="email_folders collapse"><ul class="folders">baz</ul></div>'), $res->output_response);
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals(array('folder_sources' => array(array('email_folders', 'baz')), 'formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-source=".email_folders">Email<i class="bi bi-chevron-down"></i></div><div style="display: none;" class="email_folders"><ul class="folders">baz</ul></div>'), $res->output_response);
+        $this->assertEquals(array('folder_sources' => array(array('email_folders', 'baz')), 'formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".email_folders">Email<i class="bi bi-chevron-down"></i></div><div class="email_folders collapse"><ul class="folders">baz</ul></div>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -917,10 +917,10 @@ public function test_email_menu_content() {
     public function test_settings_menu_start() {
         $test = new Output_Test('settings_menu_start', 'core');
         $res = $test->run();
-        $this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-source=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul style="display: none;" class="settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill fs-5 me-2"></i>Home</a></li>'), $res->output_response);
+        $this->assertEquals(array('<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill menu-icon"></i>Home</a></li>'), $res->output_response);
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-source=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul style="display: none;" class="settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill fs-5 me-2"></i>Home</a></li>'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<div class="src_name d-flex justify-content-between pe-2" data-bs-toggle="collapse" role="button" data-bs-target=".settings">Settings<i class="bi bi-chevron-down"></i></div><ul class="collapse settings folders"><li class="menu_home"><a class="unread_link" href="?page=home"><i class="bi bi-house-door-fill menu-icon"></i>Home</a></li>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -941,7 +941,7 @@ public function test_save_form() {
     public function test_settings_servers_link() {
         $test = new Output_Test('settings_servers_link', 'core');
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_servers"><a class="unread_link" href="?page=servers"><i class="bi bi-pc-display-horizontal fs-5 me-2"></i>Servers</a></li>'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_servers"><a class="unread_link" href="?page=servers"><i class="bi bi-pc-display-horizontal menu-icon"></i>Servers</a></li>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -950,7 +950,7 @@ public function test_settings_servers_link() {
     public function test_settings_site_link() {
         $test = new Output_Test('settings_site_link', 'core');
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_settings"><a class="unread_link" href="?page=settings"><i class="bi bi-gear-wide-connected fs-5 me-2"></i>Site</a></li>'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_settings"><a class="unread_link" href="?page=settings"><i class="bi bi-gear-wide-connected menu-icon"></i>Site</a></li>'), $res->output_response);
     }
     /**
      * @preserveGlobalState disabled
@@ -959,7 +959,7 @@ public function test_settings_site_link() {
     public function test_settings_save_link() {
         $test = new Output_Test('settings_save_link', 'core');
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_save"><a class="unread_link" href="?page=save"><i class="bi bi-download fs-5 me-2"></i>Save</a></li>'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<li class="menu_save"><a class="unread_link" href="?page=save"><i class="bi bi-download menu-icon"></i>Save</a></li>'), $res->output_response);
         $test->handler_response = array('single_server_mode' => true);
         $res = $test->run();
         $this->assertEquals(array('single_server_mode' => 1), $res->output_response);
diff --git a/tests/phpunit/modules/core/output_modules_debug.php b/tests/phpunit/modules/core/output_modules_debug.php
index 9103ceed94..47905b3775 100644
--- a/tests/phpunit/modules/core/output_modules_debug.php
+++ b/tests/phpunit/modules/core/output_modules_debug.php
@@ -83,9 +83,9 @@ static function router_module_list_provider() {
     public function test_main_menu_start_debug() {
         $test = new Output_Test('main_menu_start', 'core');
         $res = $test->run();
-        $this->assertEquals(array('<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">Main <span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><i class="bi bi-chevron-down"></i></div><div class="main"><ul class="folders">'), $res->output_response);
+        $this->assertEquals(array('<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
         $test->rtype = 'AJAX';
         $res = $test->run();
-        $this->assertEquals(array('formatted_folder_list' => '<div class="src_name main_menu d-flex justify-content-between pe-2" data-source=".main">Main <span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><i class="bi bi-chevron-down"></i></div><div class="main"><ul class="folders">'), $res->output_response);
+        $this->assertEquals(array('formatted_folder_list' => '<span title="Running in debug mode. See https://cypht.org/install.html Section 6 for more detail." class="debug_title">Debug</span><img class="app-logo" src="modules/core/assets/images/logo_dark.svg"><div class="main"><ul class="folders">'), $res->output_response);
     }
 }
diff --git a/tests/selenium/base.py b/tests/selenium/base.py
index 2852fccf82..2d37b6ec78 100644
--- a/tests/selenium/base.py
+++ b/tests/selenium/base.py
@@ -136,7 +136,7 @@ def wait_on_class(self, class_name, timeout=30):
         self.wait(By.CLASS_NAME, class_name)
 
     def wait_with_folder_list(self):
-        self.wait(By.CLASS_NAME, "main_menu")
+        self.wait(By.CLASS_NAME, "main")
 
     def wait_on_sys_message(self, timeout=30):
         wait = WebDriverWait(self.driver, timeout)
@@ -153,6 +153,16 @@ def wait_for_navigation_to_complete(self, timeout=30):
             lambda driver: get_current_navigations_request_entries_length() > navigation_length
         )
 
+    def wait_for_settings_to_expand(self):
+        print(" - waiting for the settings section to expand...")
+        WebDriverWait(self.driver, 10).until(lambda x: self.by_class('settings').is_displayed())
+
+    def click_when_clickable(self, el):
+        print(" - waiting for element to be clickable")
+        WebDriverWait(self.driver, 10).until(
+            exp_cond.element_to_be_clickable(el)
+        ).click()
+
     def safari_workaround(self, timeout=1):
         if self.browser == 'safari':
             print(" - waiting {0} extra second for Safari".format(timeout))
diff --git a/tests/selenium/folder_list.py b/tests/selenium/folder_list.py
index e020a6d30d..60001fa6ed 100644
--- a/tests/selenium/folder_list.py
+++ b/tests/selenium/folder_list.py
@@ -14,10 +14,11 @@ def __init__(self):
         WebTest.__init__(self)
         self.login(USER, PASS)
         self.wait_with_folder_list()
+        self.load()
 
     def reload_folder_list(self):
-        main_menu = self.by_class('main_menu')
-        assert main_menu.text.startswith('Main')
+        main_menu = self.by_class('main')
+        assert main_menu.is_displayed()
         self.by_class('update_message_list').click()
         self.safari_workaround(3)
         # update_message_list triggers site reload, so we explicitly wait for element to become stale
@@ -25,14 +26,14 @@ def reload_folder_list(self):
         ignored_exceptions=(NoSuchElementException,StaleElementReferenceException,)
         # And once it is stale, we can now wait for it to become available again as the page contents are loaded again.
         main_menu = WebDriverWait(self.driver, 10,ignored_exceptions=ignored_exceptions).until(
-        EC.presence_of_element_located((By.CLASS_NAME, 'main_menu'))
+        EC.presence_of_element_located((By.CLASS_NAME, 'main'))
         )
-        main_menu = self.by_class('main_menu')
+        main_menu = self.by_class('main')
         #and finally perform our test on the actual, refreshed element.
-        assert main_menu.text.startswith('Main')
+        assert main_menu.is_displayed()
 
     def expand_section(self):
-        self.by_css('[data-source=".settings"]').click()
+        self.by_css('[data-bs-target=".settings"]').click()
         list_item = self.by_class('menu_home')
         list_item.find_element(By.TAG_NAME, 'a').click()
         self.wait_with_folder_list()
@@ -40,9 +41,13 @@ def expand_section(self):
         assert self.by_class('content_title').text == 'Home'
 
     def collapse_section(self):
-        self.by_css('[data-source=".main"]').click()
-        list_item = self.by_class('menu_unread')
+        list_item = self.by_class('menu_settings')
         link = list_item.find_element(By.TAG_NAME, 'a')
+        self.by_css('[data-bs-target=".settings"]').click()
+        assert link.is_displayed() == True
+        self.by_css('[data-bs-target=".settings"]').click()
+        # Wait for the transition to complete
+        WebDriverWait(self.driver, 10).until(lambda x: not link.is_displayed())
         assert link.is_displayed() == False
 
     def hide_folders(self):
@@ -59,8 +64,8 @@ def hide_folders(self):
     def show_folders(self):
         folder_toggle = self.by_class('folder_toggle')
         self.driver.execute_script("arguments[0].click();", folder_toggle)
-        self.wait(By.CLASS_NAME, 'main_menu')
-        self.by_css('[data-source=".settings"]').click()
+        self.wait(By.CLASS_NAME, 'main')
+        self.by_css('[data-bs-target=".settings"]').click()
         list_item = self.by_class('menu_home')
         a_tag = list_item.find_element(By.TAG_NAME, 'a')
         self.driver.execute_script("arguments[0].scrollIntoView(true);", a_tag)
@@ -68,7 +73,6 @@ def show_folders(self):
         self.wait_with_folder_list()
         self.wait_for_navigation_to_complete()
         assert self.by_class('content_title').text == 'Home'
-        self.by_css('[data-source=".main"]').click()
 
 
 if __name__ == '__main__':
diff --git a/tests/selenium/login.py b/tests/selenium/login.py
index e032bb10ff..70413344e9 100644
--- a/tests/selenium/login.py
+++ b/tests/selenium/login.py
@@ -44,6 +44,7 @@ def good_login(self):
         assert self.by_class('content_title') != None
 
     def good_logout(self):
+        self.load()
         self.logout()
         self.wait()
         assert self.by_class('sys_messages').text == 'Session destroyed on logout'
diff --git a/tests/selenium/pages.py b/tests/selenium/pages.py
index a5663315a1..173d5375b5 100644
--- a/tests/selenium/pages.py
+++ b/tests/selenium/pages.py
@@ -95,7 +95,7 @@ def history(self):
         assert self.by_class('content_title').text == 'Message history'
 
     def home(self):
-        self.by_css('[data-source=".settings"]').click()
+        self.by_css('[data-bs-target=".settings"]').click()
         list_item = self.by_class('menu_home')
         list_item.find_element(By.TAG_NAME, 'a').click()
         self.wait_with_folder_list()
diff --git a/tests/selenium/profiles.py b/tests/selenium/profiles.py
index 9fe5bea15a..00fcdfa87d 100644
--- a/tests/selenium/profiles.py
+++ b/tests/selenium/profiles.py
@@ -2,6 +2,7 @@
 from selenium.webdriver.common.by import By
 from runner import test_runner
 from settings import SettingsHelpers
+from selenium.webdriver.support.ui import WebDriverWait
 
 class ProfileTest(SettingsHelpers):
 
@@ -12,7 +13,8 @@ def __init__(self):
 
     def load_profile_page(self):
         self.load()
-        self.by_css('[data-source=".settings"]').click()
+        self.by_css('[data-bs-target=".settings"]').click()
+        WebDriverWait(self.driver, 10).until(lambda x: self.by_class('settings').is_displayed())
         list_item = self.by_class('menu_profiles')
         list_item.find_element(By.TAG_NAME, 'a').click()
         self.wait_with_folder_list()
diff --git a/tests/selenium/send.py b/tests/selenium/send.py
index 779dbd0d3e..c1816231ab 100644
--- a/tests/selenium/send.py
+++ b/tests/selenium/send.py
@@ -13,6 +13,7 @@ def __init__(self):
         self.wait_with_folder_list()
 
     def load_compose_page(self):
+        self.load()
         list_item = self.by_class('menu_compose')
         link = list_item.find_element(By.TAG_NAME, 'a').click()
         self.wait_with_folder_list()
diff --git a/tests/selenium/servers.py b/tests/selenium/servers.py
index de2cdbe7f8..17c2a8dc0f 100644
--- a/tests/selenium/servers.py
+++ b/tests/selenium/servers.py
@@ -17,9 +17,10 @@ def toggle_server_section(self, name):
 
     def load_servers_page(self):
         self.wait_with_folder_list()
-        self.by_css('[data-source=".settings"]').click()
+        self.by_css('[data-bs-target=".settings"]').click()
+        self.wait_for_settings_to_expand()
         list_item = self.by_class('menu_servers')
-        list_item.find_element(By.TAG_NAME, 'a').click()
+        self.click_when_clickable(list_item.find_element(By.TAG_NAME, 'a'))
         self.wait_with_folder_list()
         self.wait_for_navigation_to_complete()
         assert self.by_class('content_title').text == 'Servers'
diff --git a/tests/selenium/settings.py b/tests/selenium/settings.py
index 0a8f20c008..30794bc421 100644
--- a/tests/selenium/settings.py
+++ b/tests/selenium/settings.py
@@ -31,9 +31,10 @@ def save_settings(self):
 
     def settings_section(self, section):
         if not self.by_class('settings').is_displayed():
-            self.by_css('[data-source=".settings"]').click()
+            self.by_css('[data-bs-target=".settings"]').click()
+            self.wait_for_settings_to_expand()
         list_item = self.by_class('menu_settings')
-        list_item.find_element(By.TAG_NAME, 'a').click()
+        self.click_when_clickable(list_item.find_element(By.TAG_NAME, 'a'))
         self.wait_with_folder_list()
         self.wait_for_navigation_to_complete()
         if not self.by_class(section).is_displayed():
@@ -84,10 +85,11 @@ def __init__(self):
         self.wait()
 
     def load_settings_page(self):
-        self.wait_on_class('main_menu')
-        self.by_css('[data-source=".settings"]').click()
+        self.wait_on_class('main')
+        self.by_css('[data-bs-target=".settings"]').click()
+        self.wait_for_settings_to_expand()
         list_item = self.by_class('menu_settings')
-        list_item.find_element(By.TAG_NAME, 'a').click()
+        self.click_when_clickable(list_item.find_element(By.TAG_NAME, 'a'))
         self.wait_with_folder_list()
         self.wait_for_navigation_to_complete()
         assert self.by_class('content_title').text == 'Site Settings'
diff --git a/tests/selenium/tags.py b/tests/selenium/tags.py
index ebd724df6d..f0148a16e9 100644
--- a/tests/selenium/tags.py
+++ b/tests/selenium/tags.py
@@ -11,7 +11,7 @@ def __init__(self):
         self.wait()
 
     def load_tag_page(self):
-        self.by_css('[data-source=".tags_folders"]').click()
+        self.by_css('[data-bs-target=".tags_folders"]').click()
         list_item = self.by_class('tags_add_new')
         list_item.find_element(By.TAG_NAME, 'a').click()
         self.wait_with_folder_list()