Here you are. A Microsoft App Store clone on PowerApps.

Supporting darkmode and dinamic theme color selection, bery usefull to organize your applications or just because the menu works much better than the default empty header on powerapps templates.

This is how the power app looks like:

You can download and install the app right from my github AppStore

Requirements

The challenge to clone any website are multiple but the main required skills are:

• Adaptative layouts. Been confortable manipulating layouts is key and very powerfull while building an app. But it's a must if you really want to clone one.
• Theme colors. It's ideal but not mandatory to follow some Color strategy like the ones I do myself for DarkMode or CustomTheme

Hands On

The idea was to build a nice header that adapts to smaller screen sizes (actually not so small). That why I like this website.

I ended up creating a gallery just to say it's a clone. But actually the gallery is not super usefull.

1. Header Layout
2. Syncronized Gallery
3. Collect Icons & Colors
4. Create an adaptative Gallery

Header Layout

My Strategy while build a complex layout is always ading as many Content Layout [vertical/horizontal] as needed. It's better to add more than less, trust me.

One of the worst experience in PowerApps is related to a well known bug with layouts. Many times copy paste doesn't work well all gets messed up. My recommendation is to keep a copy of your screen as a backup and also pusblish your app more often than usual.

This is how it look with the browser is medium/small:

Also notice the Text Input Search goes all over the top part of the menu

In theory I could use a layout changing between Horinzontal to Vertical based on the screensize. And then The menu would look like moving from the top to the bottom of the menu.

What I actually did is a duplicated syncronized Menu Gallery. For Menu Galleries is ok. I would do it for content/data galleries.

For to top Menu Visible property

App.ActiveScreen.Size>ScreenSize.Medium

And the otherway around for the lower menu:

App.ActiveScreen.Size<ScreenSize.Large

Syncronized Galleries

To sync our galleries is quite simple. We want that every time you click on a Gallery Item both Galleries changes it's selection at the same time. Set the folowing properties for both galleries:

• OnSelect:

    UpdateContext({varCTXMenuItemSelected:ThisItem});
    //For Gallery1 Reset Gallery2 and viceversa.
    Reset(Gallery2)

-Default: varCTXMenuItemSelected

And that's it, both Galleries are now syncronized. So Simple.

Collect Icons & Colors

For most of the cases I follow the SVG Icon aproach. But you also need sometimes to downlaod PNG and remove some backgrounds.

• To remove bacground this is my favorite free online tool remove.bg
• Sometimes I also like to instect the webpage and hack their SVGs or PNG urls.

You also need to follow and/or copy a particular set of colors. Apart following my DarkMode & CustomTheme.

• You can use the color picker from paint3D. Super basic but powerfull. You can cpy and prepare all the color set from any site in minutes.

Create an adaptative Gallery

There are two relevant thing to understand for a page that scroll and not the gallery:

You can see the scroll bar enabled at the page and not at the gallery

• The Wrap Count (number of columns) has to adapt based on the Active Screen Size. 3 for large screens...

  The Gallery Wrap Count property

Switch(App.ActiveScreen.Size,ScreenSize.Small,1,ScreenSize.Large,2,3)

//This is the same but with IF
//If(App.ActiveScreen.Size=ScreenSize.Small,1,App.ActiveScreen.Size<=ScreenSize.Large,2,3)

• The Height of the Gallery is based on the number of items and the column layour (based on Active screen size)

  The Gallery Height should adapt based on the Gallery.TemaplateSize , number of items and the column layout (same we used for Wrap Count)

155*RoundUp(CountRows(Gallery.AllItems)/(Switch(App.ActiveScreen.Size,ScreenSize.Small,1,ScreenSize.Large,2,3)),0)

• Content Layout Vertical Overflow

Now we have our Gallary adapting the 155px for every row. And in case the gallery overflows the ActiveScreen, we don't want to use the Gallery scroll propery, but to the main content layout it's placed. Container.LayoutOverflowY = Scrool

Conclusion

You have a very versatil Menu with Search Input that smothly adapts to all sizes.

Also supports Custom Theme selection and DarkMode:

Next

If you never had a good excuse to practive with Content Layouts, here you have a good reason.

There is no secret, just start small and learn messing it up.