Skip to content

[NavMenu] Enhance working in mobile view #2183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
vnbaaij merged 8 commits into from
Jun 12, 2024
Merged

[NavMenu] Enhance working in mobile view #2183

vnbaaij merged 8 commits into from
Jun 12, 2024

Conversation

@vnbaaij
Copy link
Collaborator

@vnbaaij vnbaaij commented Jun 12, 2024

When using a FluentNavGroup and tap on it in mobile view it closes the opened navigation. When you use the dropdown buttons instead the navigation will open just like expected without closing the mobile menu.

The demo site was already configured for this but it would not work that way in a site created with the template. With these changes clicking on either the button or the group will just expand/collapse that group (when no href set on the group) for template created sites.

The template created sites had an (JS) onclick event on the nav element so that the menu would be closed after navigating to an item. This PR moves that logic to the FluentNavGroup/FluentNavLink (when an href is set)

With these change we get consistent behavior in both demo and template sites whare a menu group can be expanded/collapsed by clicking it and clicking an item navigates to that item and closes the menu:

Before:

better-menu-before

After:

better-menu

Changes:

  • Add CustomToggle parameter to FluentNavMenu
  • Add CustomToggleId to FluentNavBase
  • Add onclick to FluentNavGroup/FluentNavLink

vnbaaij added 2 commits June 12, 2024 12:59
@vnbaaij
- Add CustomToggle parameter toFluentNavMenu
e560ed6 
- Add CustomToggleId to FluentNavBase
- Add onclick to FluentNavGroup/FluentNavLink
@vnbaaij
Adjust templates
93c9f58
@vnbaaij vnbaaij requested a review from dvoituron as a code owner June 12, 2024 11:36
@vnbaaij vnbaaij added this to the v4.7.3 milestone Jun 12, 2024
@vnbaaij vnbaaij mentioned this pull request Jun 12, 2024
Closed
@github-actions
Copy link

github-actions bot commented Jun 12, 2024 •
edited
Loading

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

@github-actions
Copy link

github-actions bot commented Jun 12, 2024 •
edited
Loading

Summary - Unit Tests Code Coverage

Summary
Generated on: 6/12/2024 - 8:50:19 PM
Coverage date: 6/12/2024 - 8:50:10 PM
Parser: Cobertura
Assemblies: 1
Classes: 233
Files: 328
Line coverage: 60% (4891 of 8147)
Covered lines: 4891
Uncovered lines: 3256
Coverable lines: 8147
Total lines: 27643
Branch coverage: 51.6% (2319 of 4493)
Covered branches: 2319
Total branches: 4493
Method coverage: Feature is only available for sponsors
Tag: 683_9489509296

Coverage

Microsoft.FluentUI.AspNetCore.Components - 60%
Name Line Branch
Microsoft.FluentUI.AspNetCore.Components 60% 51.6%
Microsoft.FluentUI.AspNetCore.Components.AccordionChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.ActionButton`1 50%
Microsoft.FluentUI.AspNetCore.Components.ActionLink`1 0%
Microsoft.FluentUI.AspNetCore.Components.CalendarExtended 95% 86.6%
Microsoft.FluentUI.AspNetCore.Components.CalendarTitles 87% 76.6%
Microsoft.FluentUI.AspNetCore.Components.CheckboxChangeEventArgs 50%
Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1 59.5% 21%
Microsoft.FluentUI.AspNetCore.Components.CommunicationToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.CommunicationToastContent 0%
Microsoft.FluentUI.AspNetCore.Components.ComponentParameters 16.6% 0%
Microsoft.FluentUI.AspNetCore.Components.Components.Dialog.ContentComponent
s.RenderFragmentDialog		 100%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipGlobalOp
tions		 0%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipOptions 0%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipService 0% 0%
Microsoft.FluentUI.AspNetCore.Components.CountdownTimer 0% 0%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.AsyncQuery
ExecutorSupplier		 72.7% 71.4%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.ColumnsCol
lectedNotifier`1		 87.5% 50%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.Defer 100%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.DisplayAtt
ributeExtensions		 66.6% 50%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.InternalGr
idContext`1		 95.2% 100%
Microsoft.FluentUI.AspNetCore.Components.DataGridCellFocusEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DataGridRowFocusEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance 92.3% 75%
Microsoft.FluentUI.AspNetCore.Components.DialogParameters 92.3%
Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1 0%
Microsoft.FluentUI.AspNetCore.Components.DialogReference 33.3% 0%
Microsoft.FluentUI.AspNetCore.Components.DialogResult 0% 0%
Microsoft.FluentUI.AspNetCore.Components.DialogService 3% 3.3%
Microsoft.FluentUI.AspNetCore.Components.Emoji 0% 0%
Microsoft.FluentUI.AspNetCore.Components.EmojiCompress 0% 0%
Microsoft.FluentUI.AspNetCore.Components.EmojiInfo 0%
Microsoft.FluentUI.AspNetCore.Components.Extensions.AdditionalAttributesExt
ensions		 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.BooleanExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions 83.8% 85%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions 84.6% 75%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccessibilityStatus 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordion 60% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem 76% 35.7%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchor 89.7% 67.8%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchoredRegion 87.2% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentAppBar 53% 35.2%
Microsoft.FluentUI.AspNetCore.Components.FluentAppBarItem 82.1% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1 86.8% 75.7%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBodyContent 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumb 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumbItem 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton 84.4% 64%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendar 90.2% 83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarBase 94.4% 83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarDay 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarMonth 100% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarYear 90.9% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentCard 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox 95.8% 90.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCollapsibleRegion 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1 53.7% 32.5%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase 90.9% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge 93.1% 86.5%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1 61.8% 48.5%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1 92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1 56.6% 30%
Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker 74.3% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentDesignSystemProvider 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog 62.5% 71%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogFooter 62.5% 43.3%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader 80.9% 81.8%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider 37.3% 18.7%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider 85.7% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentDragEventArgs`1 0%
Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1 20.9% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentEditForm 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentEmoji`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentFlipper 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFooter 100%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid 70.5% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem 87.2% 82.5%
Microsoft.FluentUI.AspNetCore.Components.FluentHeader 100%
Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter 92.3% 20%
Microsoft.FluentUI.AspNetCore.Components.FluentHorizontalScroll 58% 20%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1 85% 77.7%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1 70% 61%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile 88.3% 76.6%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs 91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentInputLabel 100% 95%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode 90% 90%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs 100% 75%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider 40% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel 72.7% 21.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentListbox`1 93.3% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentMain 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMainLayout 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenu 35% 41.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton 70.2% 8.3%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar 54.1% 25%
Microsoft.FluentUI.AspNetCore.Components.FluentMessageBarProvider 82.3% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter 81.6% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane 95.7% 87.5%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentNavBase 55.1% 16.6%
Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup 62.5% 37.5%
Microsoft.FluentUI.AspNetCore.Components.FluentNavLink 86.3% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu 59.6% 33.3%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuGroup 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuItemBase 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuLink 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuTree 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNumberField`1 63.8% 47.2%
Microsoft.FluentUI.AspNetCore.Components.FluentOption`1 78.9% 58.3%
Microsoft.FluentUI.AspNetCore.Components.FluentOverflow 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentOverflowItem 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentOverlay 70% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentPageScript 100%
Microsoft.FluentUI.AspNetCore.Components.FluentPaginator 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentPersona 100% 78.1%
Microsoft.FluentUI.AspNetCore.Components.FluentPopover 77% 65.9%
Microsoft.FluentUI.AspNetCore.Components.FluentPresenceBadge 60.3% 29.1%
Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgress 85.7% 68.1%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing 97.4% 92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh 93.9% 89.2%
Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext 70% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1 83.3% 28.5%
Microsoft.FluentUI.AspNetCore.Components.FluentSearch 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSkeleton 42.8% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1 59.3% 38.6%
Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1 62.1% 30%
Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1 70.4% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSpacer 100% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSplashScreen 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSplitter 68.4% 40%
Microsoft.FluentUI.AspNetCore.Components.FluentStack 90.2% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentSwitch 88.8% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentTab 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTabs 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea 84.2%
Microsoft.FluentUI.AspNetCore.Components.FluentTextField 88.2% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker 100% 75%
Microsoft.FluentUI.AspNetCore.Components.FluentToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentToastProvider 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentToolbar 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltip 62.9% 47.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem 85.2% 75%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeView 91.3% 84.3%
Microsoft.FluentUI.AspNetCore.Components.FluentValidationMessage`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentValidationSummary 100% 87.5%
Microsoft.FluentUI.AspNetCore.Components.FluentWizard 94.5% 82.3%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStep 97% 88.3%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepChangeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.GlobalState 33.3% 50%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderRequest`1 92.3% 41.6%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult 100%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult`1 100%
Microsoft.FluentUI.AspNetCore.Components.GridSort`1 35.1% 25.9%
Microsoft.FluentUI.AspNetCore.Components.HorizontalScrollEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.Icon 81.3% 85.2%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage 100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo 100%
Microsoft.FluentUI.AspNetCore.Components.Identifier 66.6% 62.5%
Microsoft.FluentUI.AspNetCore.Components.IdentifierContext 66.6% 41.6%
Microsoft.FluentUI.AspNetCore.Components.INavMenuItemsOwner 0%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
ibable`1		 83.3% 100%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
iber`1		 90% 75%
Microsoft.FluentUI.AspNetCore.Components.InputHelpers`1 38.8% 31.6%
Microsoft.FluentUI.AspNetCore.Components.InternalAppBarContext 100% 100%
Microsoft.FluentUI.AspNetCore.Components.InternalDialogContext 80%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1 80% 66.6%
Microsoft.FluentUI.AspNetCore.Components.InternalToastContext 0%
Microsoft.FluentUI.AspNetCore.Components.KeyCodeService 60.3% 28.5%
Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration 100%
Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1 61% 56.9%
Microsoft.FluentUI.AspNetCore.Components.LoadedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.LuminanceChangedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.MenuChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.Message 50% 0%
Microsoft.FluentUI.AspNetCore.Components.MessageBox 66.6% 0%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxContent 0%
Microsoft.FluentUI.AspNetCore.Components.MessageOptions 76.9%
Microsoft.FluentUI.AspNetCore.Components.MessageService 33% 26.9%
Microsoft.FluentUI.AspNetCore.Components.NavMenuActionArgs 0% 0%
Microsoft.FluentUI.AspNetCore.Components.OfficeColorUtilities 0%
Microsoft.FluentUI.AspNetCore.Components.Option`1 0%
Microsoft.FluentUI.AspNetCore.Components.OptionsSearchEventArgs`1 100%
Microsoft.FluentUI.AspNetCore.Components.OverflowItem 100%
Microsoft.FluentUI.AspNetCore.Components.PaginationState 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails 100%
Microsoft.FluentUI.AspNetCore.Components.ProgressToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ProgressToastContent 0%
Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2 75% 53.3%
Microsoft.FluentUI.AspNetCore.Components.Resources.TimeAgoResource 76.1% 100%
Microsoft.FluentUI.AspNetCore.Components.SelectAllTemplateArgs 100%
Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1 90.2% 90.2%
Microsoft.FluentUI.AspNetCore.Components.ServiceCollectionExtensions 78.5% 100%
Microsoft.FluentUI.AspNetCore.Components.SortedProperty 0%
Microsoft.FluentUI.AspNetCore.Components.SplashScreenContent 0% 0%
Microsoft.FluentUI.AspNetCore.Components.SplitterCollapsedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.SplitterResizedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.StandardLuminanceExtensions 0% 0%
Microsoft.FluentUI.AspNetCore.Components.StaticAssetServiceConfiguration 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.TemplateColumn`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TimeAgoOptions 92.3%
Microsoft.FluentUI.AspNetCore.Components.ToastInstance 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ToastParameters 0%
Microsoft.FluentUI.AspNetCore.Components.ToastParameters`1 0%
Microsoft.FluentUI.AspNetCore.Components.ToastResult 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ToastService 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TreeChangeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItem 100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItemExpandedEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails 0%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debouncer 94.8% 37.5%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder 96.4% 87.5%
Microsoft.FluentUI.AspNetCore.Components.Utilities.JSModule 0% 0%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Splitter 82.8% 81.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.ZIndex 100%
System.Text.RegularExpressions.Generated 76.6% 51.4%

dvoituron
dvoituron requested changes Jun 12, 2024
View reviewed changes
@vnbaaij vnbaaij enabled auto-merge (squash) June 12, 2024 14:00
@vnbaaij vnbaaij merged commit 13979c3 into dev Jun 12, 2024
@vnbaaij vnbaaij deleted the users/vnbaaij/fix-issue-#2141 branch June 12, 2024 20:47
@MarvinKlein1508 MarvinKlein1508 mentioned this pull request Jun 18, 2024
Closed
@nhwilly
Copy link

nhwilly commented Oct 12, 2024

This is working perfectly for me - thank you for the update. I didn't think of the approach of making the menu take 100% but it makes great sense in operation.

In my application, a user has their own set of functions, and I put them in a navmenu. In mobile mode this appears in the top right header just like your approach.

But they also have a set of account functions and I want to put them in a navmenu in the opposite corner in a mobile app. This would mean appearing on the left.

I can't seem to make that work. I thought I could use the CustomToggleId somehow, but that seems to be assigned at the NavGroup level.

I think it is perfectly OK to close one menu when another one opens when the screen is less than 600px. In normal mode, having two menus works great.

Are there any tips or samples to achieve this? Would it help if I put up a repo?

@vnbaaij
Copy link
Collaborator Author

vnbaaij commented Oct 13, 2024 •
edited
Loading

Think you should start a post I the discussion area. Include some screens and code examples.
Having a repo with the 'problematic' code always helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dvoituron dvoituron dvoituron approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

v4.8.0

Development

Successfully merging this pull request may close these issues.

4 participants

@vnbaaij @nhwilly @dvoituron