In the last few steps, we built both an image grid and a slideshow for our app. So far, however, we have not been able to switch between the two. In the next few steps, we'll make it possible to switch between the image grid and the slideshow.
Our plan of attack will be as follows:
- First, we'll create a `MenuBar` with a single `Button`.
- Next, we'll create an `ImageBrowser`, consisting of an `ImageGrid` with a `MenuBar` on top.
- Finally, we'll use a `PageFlip` to switch between the `ImageBrowser` and the `Slideshow`.
The `Button` in the `MenuBar` will be used to switch to the slideshow. While the slideshow is visible, the escape key will be used to switch back to the image grid.
In this step, we'll start by creating the `MenuBar`.
> **Note:**
> If you don't feel like typing along, you can find all the code for this step here:
> https://github.com/makepad/image_viewer/tree/main/step_13
## Defining a `MenuBar`
Let's start by adding a definition for an `MenuBar`. An `MenuBar` is a wide, small strip that takes up the width of its container, and contains the button we'll use to switch to the slideshow.
In **app.rs**, add the following code to the live design block, before the definition of `ImageGrid`:
```rust
MenuBar = <View> {
width: Fill,
height: Fit,
<Filler> {}
slideshow_button = <Button> {
text: "Slideshow"
}
}
```
A `MenuBar` contains a single `Button`, with a `Filler` in front of it to ensure the `Button` is laid out to the right.
## Updating `App`
Now that we have an `MenuBar`, let's update our definition of `App` to display a `MenuBar` instead of a `Slideshow` (we'll put the `Slideshow` back later).
In **app.rs**, replace the definition of `App` in the live design block with the one here below:
```rust
App = {{App}} {
placeholder: (PLACEHOLDER),
ui: <Root> {
<Window> {
body = <View> {
<MenuBar> {}
}
}
}
}
```
## Checking our Progress so far
Let's check our progress so far.
Make sure you're in your package directory, and run:
```
cargo run --release
```
If everything is working correctly, you should see a single button:
![[MenuBar.png]]Of course, what you're really seeing here is the menu bar, but since the menu bar itself is transparent, you only see the button.
## What's next
In this step, we created the `MenuBar`. In the next step, we'll create the `ImageBrowser`.