diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index c8c80bd4b..2d6b40cc6 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -138,13 +138,13 @@ export default class MobileLayout {
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
- .optChild(!launcherPaneIsHorizontal, new MobileDetailMenuWidget().contentSized())
+ .optChild(!launcherPaneIsHorizontal, new MobileDetailMenuWidget(false).contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
)
- .optChild(launcherPaneIsHorizontal, new MobileDetailMenuWidget().contentSized())
+ .optChild(launcherPaneIsHorizontal, new MobileDetailMenuWidget(true).contentSized())
.child(new CloseDetailButtonWidget().contentSized()))
.child(new SharedInfoWidget())
.child(new FloatingButtons()
diff --git a/src/public/app/widgets/mobile_widgets/mobile_detail_menu.js b/src/public/app/widgets/mobile_widgets/mobile_detail_menu.js
index 65386ce1d..7ad1592e4 100644
--- a/src/public/app/widgets/mobile_widgets/mobile_detail_menu.js
+++ b/src/public/app/widgets/mobile_widgets/mobile_detail_menu.js
@@ -6,12 +6,20 @@ import branchService from "../../services/branches.js";
import treeService from "../../services/tree.js";
import { t } from "../../services/i18n.js";
-const TPL = ``;
+const TPL = ``;
class MobileDetailMenuWidget extends BasicWidget {
+
+ constructor(isHorizontalLayout) {
+ super();
+ this.isHorizontalLayout = isHorizontalLayout;
+ }
+
doRender() {
this.$widget = $(TPL);
+ this.$widget.addClass(this.isHorizontalLayout ? "bx-dots-vertical-rounded" : "bx-menu");
+
this.$widget.on("click", async e => {
const note = appContext.tabManager.getActiveContextNote();