feat: add drilldown menu for sub menus on mobile devices

[AlexAndBear]

Description

---

Related Issue

• Fixes Mobile only: add drilldown menu to bottom drawer #930

How Has This Been Tested?

• test environment:
• test case 1:
• test case 2:
• ...

Types of changes

• Bugfix
• Enhancement (a change that doesn't break existing code or deployments)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)

[Copilot]

Pull Request Overview

This PR adds drilldown menu functionality for sub-menus on mobile devices by implementing a nested bottom drawer system. The main purpose is to enhance mobile user experience by providing proper navigation between menu levels on touch devices.

• Implements nested bottom drawer support with parent-child relationships
• Updates drop menu components to pass dropRef for better mobile integration
• Adds proper accessibility attributes and navigation controls for nested menus

Reviewed Changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/web-runtime/src/layouts/Application.vue	Enables multiple portal targets for bottom drawer rendering
packages/web-pkg/src/components/ContextActions/*.vue	Updates context action components to support nested drop references
packages/web-pkg/src/components/FilesList/*.vue	Passes dropRef through slot props for mobile menu integration
packages/design-system/src/components/OcDrop/OcDrop.vue	Refactors to support nested elements with parent references
packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue	Implements nested drawer functionality with back navigation
Test snapshots and documentation	Updates reflecting the new nested drawer behavior and API changes

Comments suppressed due to low confidence (1)

packages/design-system/src/components/OcDrop/OcDrop.vue:150

• [nitpick] The prop name 'isNestedElement' is inconsistent with the previous 'isNested' naming pattern. Consider keeping 'isNested' for consistency or updating all related documentation and comments to use 'isNestedElement' terminology consistently.

  isNestedElement = false,

[Copilot]

Direct DOM manipulation using classList should be avoided in Vue components. Consider using Vue's reactive CSS classes or computed properties to manage visibility states instead of directly manipulating the DOM.

Suggested change

	const bottomDrawerRef = useTemplateRef<HTMLElement | null>('bottomDrawerRef')
	const bottomDrawerCardBodyRef = useTemplateRef<HTMLElement | null>('bottomDrawerCardBodyRef')
	const open = async () => {
	show.value = true
	emit('open')
	const show = async () => {
	if (isNestedElement) {
	unref(nestedParentRef).getElement().classList.add('oc-hidden')
	const isParentHidden = ref(false)
	const bottomDrawerRef = useTemplateRef<HTMLElement | null>('bottomDrawerRef')
	const bottomDrawerCardBodyRef = useTemplateRef<HTMLElement | null>('bottomDrawerCardBodyRef')
	const show = async () => {
	if (isNestedElement) {
	isParentHidden.value = true

[Copilot]

Direct DOM manipulation using classList should be avoided in Vue components. Consider using Vue's reactive CSS classes or computed properties to manage visibility states instead of directly manipulating the DOM.

Suggested change

	unref(nestedParentRef).getElement().classList.remove('oc-hidden')
	unref(nestedParentRef).show()

[kulmann]

I have some "Gemotze" regarding the aria-labels, but that's not in scope for this PR. More for the bottom drawer in general. I'll open a separate issue about that.

Nice job! UI/UX feels good as well. 🥳 💪