To create the navigation bar in our design, a horizontal flow layout is the right tool for the job. We can use widget.Spacer to create the gaps between the buttons and the label and to ensure the filename is centered within the space available. A helper method, expandSpace(), is added to create a new spacer that will expand along the flow layout axis. We also define the previousImage() and nextImage() functions, which will execute when the buttons are pressed:

func previousImage() {}

func nextImage() {}

func expandSpace() node.Node {
   return widget.WithLayoutData(widget.NewSpace(),
      widget.FlowLayoutData{ExpandAlong: true, ExpandAcross: true, AlongWeight:1})
}

With those functions defined, we can lay out the navigation bar. We define the prev, next, and name items and add them to a widget.AxisHoriontal flow container that includes expandSpace() elements to space the items. To create buttons, we are using the same newButton() function as earlier in this chapter (due to the Shiny widget API not having a standard button defined). We use theme.Neutral for the background container for this section and we set the whole bar to expand along the horizontal axis:

func makeBar() node.Node {
   prev := newButton("Previous", previousImage)
   next := newButton("Next", nextImage)
   name := widget.NewLabel("Filename")

   flow := widget.NewFlow(widget.AxisHorizontal, prev, expandSpace(),
      widget.NewPadder(widget.AxisBoth, padSize, name), expandSpace(), next)

   bar := widget.NewUniform(theme.Neutral, flow)

   return widget.WithLayoutData(bar,
      widget.FlowLayoutData{ExpandAlong: true, ExpandAcross: true})
}

The preceding code should update the navigation bar, as follows. As we've defined the buttons ourselves, they can be customized to use the border style if preferred (the full code listing is available in this book's code repository):