Navigation shell

Use lcsNavShell as the main menu of an app with several screens. Building one by hand means a gallery per screen size, a variable for the collapse state and the same formulas copied onto every screen. This component gives you:

• One table for the menu. Each item has a Key (your own id), a Label, an Icon (a Fluent icon name, such as Home) and a Badge (text such as 3, or blank).
• A side menu on wide screens with your app's name and a button that collapses it to icons. Collapsed, each icon shows its name on hover, and its badge as a dot with the count.
• A bottom bar on phones, with an icon and a short label per item. It switches by itself below the width you choose (BottomBarBelow, 640 by default).
• The current screen, from your app. Set CurrentKey and the menu marks that item, with a bar and a filled icon.
• Items for some people only: hide items by key (HiddenKeys), or show them but don't allow them (DisabledKeys).
• Who is signed in, at the bottom of the side menu: their picture (or initials), name and a line such as their role. Selecting it runs OnUserSelect().
• Motion that feels finished: the current item's highlight eases in and its bar grows when the screen changes, and a new badge pulses twice to catch the eye. Turn it off with Motion; it never plays for people who've asked their device for reduced motion.
• A light and dark switch beside it: a sun that turns into a moon, animated (it doesn't move for people who've asked for reduced motion). It switches the menu and runs OnThemeChange(NewTheme), so your app can follow.
• Outputs that place it and your content, so the content moves over when the menu collapses or becomes a bottom bar.
• Two looks: Standard, a plain side panel, and Premium, a floating card with a soft shadow, your app's mark (its first letter on your colour), a solid pill for the current item and the person signed in on their own card.
• Your AccentColor, and a Dark theme. Hover and press shades follow the menu's own theme, so they show in dark mode too.

The examples call it navMain. Put it on each screen (or copy it), and give it the screen's size:

// navMain.ScreenWidth
Parent.Width

// navMain.ScreenHeight
Parent.Height

Place the menu from its own outputs:

// navMain.X, Y, Width and Height
navMain.ShellX
navMain.ShellY
navMain.ShellWidth
navMain.ShellHeight

Put your screen's content in a container and place it the same way:

// conContent.X, Y, Width and Height
navMain.ContentX
navMain.ContentY
navMain.ContentWidth
navMain.ContentHeight

Your menu:

// navMain.Items
Table(
    { Key: "home", Label: "Home", Icon: "Home", Badge: "" },
    { Key: "orders", Label: "Orders", Icon: "Cart", Badge: Text(CountRows(Filter(Orders, Status = "New"))) },
    { Key: "customers", Label: "Customers", Icon: "People", Badge: "" },
    { Key: "reports", Label: "Reports", Icon: "Document", Badge: "" },
    { Key: "settings", Label: "Settings", Icon: "Settings", Badge: "" }
)

Go to the screen the user picks:

// navMain.OnNavigate
Navigate(
    Switch(ItemKey, "orders", OrdersScreen, "customers", CustomersScreen, "reports", ReportsScreen, "settings", SettingsScreen, HomeScreen),
    ScreenTransition.None
)

Mark the screen the user is on. On each screen, set its own key:

// navMain.CurrentKey, on OrdersScreen
"orders"

Show Reports to managers only, and keep Settings for admins:

// navMain.HiddenKeys
If(gblUser.IsManager, "", "reports")

// navMain.DisabledKeys
If(gblUser.IsAdmin, "", "settings")

Show who is signed in, and open their profile:

// navMain.UserName, UserDetail and UserImage
User().FullName
User().Email
User().Image

// navMain.OnUserSelect
Navigate(ProfileScreen)

Keep your whole app in step with the light and dark switch:

// navMain.OnThemeChange
Set(gblTheme, NewTheme)

// navMain.Theme, and anything else that follows the theme
gblTheme

// Screen1.Fill
If(gblTheme = "Dark", RGBA(27, 27, 27, 1), RGBA(255, 255, 255, 1))

Remember the collapse state across screens:

// navMain.OnToggle
Set(gblMenuCollapsed, Collapsed)

// navMain.StartCollapsed
gblMenuCollapsed

The menu holds no data, but a badge often counts rows. On a whole Dataverse table, CountRows returns a number Dataverse caches, which can be out of date. For an exact count of up to 50,000 rows, use CountIf, and compare a choice column with its own values:

{ Key: "orders", Label: "Orders", Icon: "Cart", Badge: Text(CountIf(Orders, Status = 'Status (Orders)'.New)) }

• Each item is one button, named by its label and badge ("Orders, 3"). The current item is marked by a bar, a filled icon and bold text, so colour is never the only signal.
• Disabled items stay in the menu, dimmed, but can't be selected, and screen readers say they're unavailable.
• Every button shows a focus ring in your colour when reached with the keyboard.
• The collapse button says what it does ("Collapse the menu", "Expand the menu"), and so does the theme button ("Switch to dark theme"). All of these phrases are inputs, for your language.
• The avatar is a button named by the person's name and detail.
• The animations are short and play once: the sun and moon half a second, the current item's highlight about a third of a second, a new badge's pulse two rounds of about a second. None of them loops, and none plays for people who've asked their device for reduced motion. Motion turns them all off except the theme switch.
• Collapsed, each icon shows its label on hover. Choose clear icons.
• Badges are white on your AccentColor. Pick an accent dark enough for white text (the default meets WCAG AA).

• The menu is one level. Group related screens under one item and use Tabs on that screen.
• The bottom bar shows the first MaxBottomItems items (5 by default). Put the ones people use most first.
• Icons are names from Power Apps' own set of about 180 (the same set as the classic icons), as the modern button and Icon controls use them: Home, People, Settings, Cart, Document, Folder, Mail, Calendar and so on. A name outside the set shows no icon, so pick from the Icon list in Studio.
• A canvas component can't place itself, so set its X, Y, Width and Height from the outputs, as shown above. If you leave its Width at 240, the collapsed menu still draws 64 pixels wide, but the rest of its box stays over your screen.
• The theme button changes the menu's own theme at once. To change it from your app as well, set Theme from your own variable and set that variable in OnThemeChange.
• The bottom bar has no room for the avatar or the theme button; put them on a settings screen on phones.
• On each screen it's a separate copy. Keep the menu the same everywhere with a global table (gblMenu) in App.Formulas, and set Items to it.

• 0.2.0: motion: the current item's highlight eases in and its bar grows when it changes, and a new badge pulses twice; a Motion input turns them off. With Motion off, it looks and works exactly as 0.1.0.
• 0.1.0: first version: side menu that collapses to icons, bottom bar on phones, badges, HiddenKeys and DisabledKeys, CurrentKey, placement outputs, OnNavigate and OnToggle, SetCollapsed(); who is signed in (OnUserSelect) and an animated light and dark switch (OnThemeChange, CurrentTheme).