diff --git a/CHANGELOG.md b/CHANGELOG.md
index 935f9573..90a8e2a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ and this project adheres to
- ✨(frontend) add ErrorIcon component and support numeric icon sizes
- ✨(frontend) make file upload abortable in driver layer
+### Fixed
+
+- 🐛(frontend) add actions menu on mobile My Files page
+
## [v0.16.0] - 2026-04-09
### Added
diff --git a/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx b/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
index cc0c686b..9a966af8 100644
--- a/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
+++ b/src/frontend/apps/drive/src/features/explorer/components/app-view/AppExplorerBreadcrumbs.tsx
@@ -4,6 +4,7 @@ import {
useGlobalExplorer,
} from "@/features/explorer/components/GlobalExplorerContext";
import {
+ DropdownMenu,
HorizontalSeparator,
IconSize,
useDropdownMenu,
@@ -24,6 +25,7 @@ import {
ORDERED_DEFAULT_ROUTES,
} from "@/utils/defaultRoutes";
import { ItemActionDropdown } from "../item-actions/ItemActionDropdown";
+import { useCreateMenuItems } from "../../hooks/useCreateMenuItems";
export const AppExplorerBreadcrumbs = () => {
const { item, onNavigate } = useGlobalExplorer();
@@ -99,6 +101,11 @@ export const ExplorerBreadcrumbsMobile = () => {
const { item, onNavigate } = useGlobalExplorer();
const { data: breadcrumb } = useBreadcrumbQuery(item?.id);
const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
+ const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+ const { menuItems, modals: createModals } = useCreateMenuItems({
+ includeImport: true,
+ includeCreate: false,
+ });
const defaultRouteId = getDefaultRouteId(router.pathname);
const defaultRouteData = ORDERED_DEFAULT_ROUTES.find(
@@ -121,13 +128,29 @@ export const ExplorerBreadcrumbsMobile = () => {
if (!item && defaultRouteData) {
return (
-
-
-
+ <>
+
+
+
- {t(defaultRouteData.label)}
+ {t(defaultRouteData.label)}
+
+ {defaultRouteId === DefaultRoute.MY_FILES && (
+
+
+ )}
-
+ {defaultRouteId === DefaultRoute.MY_FILES && createModals}
+ >
);
}
diff --git a/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx b/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
index ebcf2ff2..27964a5a 100644
--- a/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
+++ b/src/frontend/apps/drive/src/features/explorer/hooks/useCreateMenuItems.tsx
@@ -16,6 +16,7 @@ import { useState } from "react";
type UseCreateMenuItemsProps = {
includeImport?: boolean;
+ includeCreate?: boolean;
};
type UseCreateMenuItemsReturn = {
@@ -33,6 +34,7 @@ const renderFileIcon = (item: Partial
- ) => {
export const useCreateMenuItems = ({
includeImport = false,
+ includeCreate = true,
}: UseCreateMenuItemsProps = {}): UseCreateMenuItemsReturn => {
const { t } = useTranslation();
const { item, itemId } = useGlobalExplorer();
@@ -81,41 +83,43 @@ export const useCreateMenuItems = ({
);
}
- items.push(
- {
- icon: renderFileIcon({
- type: ItemType.FILE,
- filename: "doc.odt",
- mimetype:
- "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
- }),
- label: t("explorer.tree.create.file.doc"),
- isHidden,
- callback: () => openCreateFileModal(ExplorerCreateFileType.DOC),
- },
- {
- icon: renderFileIcon({
- type: ItemType.FILE,
- filename: "powerpoint.odp",
- mimetype:
- "application/vnd.openxmlformats-officedocument.presentationml.presentation",
- }),
- label: t("explorer.tree.create.file.powerpoint"),
- isHidden,
- callback: () => openCreateFileModal(ExplorerCreateFileType.POWERPOINT),
- },
- {
- icon: renderFileIcon({
- type: ItemType.FILE,
- filename: "calc.ods",
- mimetype:
- "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
- }),
- label: t("explorer.tree.create.file.calc"),
- isHidden,
- callback: () => openCreateFileModal(ExplorerCreateFileType.CALC),
- },
- );
+ if (includeCreate) {
+ items.push(
+ {
+ icon: renderFileIcon({
+ type: ItemType.FILE,
+ filename: "doc.odt",
+ mimetype:
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+ }),
+ label: t("explorer.tree.create.file.doc"),
+ isHidden,
+ callback: () => openCreateFileModal(ExplorerCreateFileType.DOC),
+ },
+ {
+ icon: renderFileIcon({
+ type: ItemType.FILE,
+ filename: "powerpoint.odp",
+ mimetype:
+ "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+ }),
+ label: t("explorer.tree.create.file.powerpoint"),
+ isHidden,
+ callback: () => openCreateFileModal(ExplorerCreateFileType.POWERPOINT),
+ },
+ {
+ icon: renderFileIcon({
+ type: ItemType.FILE,
+ filename: "calc.ods",
+ mimetype:
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ }),
+ label: t("explorer.tree.create.file.calc"),
+ isHidden,
+ callback: () => openCreateFileModal(ExplorerCreateFileType.CALC),
+ },
+ );
+ }
const modals = (
<>