title: SwiftUI - Opening a new view on button click
body: <p>Noob in watchOS and SwiftUI. I have created a grid view with multiple buttons on it. Whenever a button is clicked, I wish to open a new view with navigation link. Since there are multiple buttons on the view, I have created a reusable view and having a hard time to implement navigation to next view. Below is my code:</p>
  <p><em><strong>Content View:</strong></em></p>
  <pre><code>struct ContentView: View {
      @Namespace var namespace
      @State var selected: [MenuItem] = []
      
      var body: some View {
          MainMenuCircularGridView()
      }
  }
  </code></pre>
  <p><em><strong>MainMenuCircularGridView:</strong></em></p>
  <pre><code>struct MainMenuCircularGridView: View {
      let columns = Array(repeating: GridItem(.fixed(72.0), spacing: 10), count: 2)
      
      var body: some View {
          NavigationView {
              ScrollView {
                  let menuOptions = MenuOptions()
                  let menuOptionsAction = MenuActions()
                  LazyVGrid(columns: columns, spacing: 5) {
                      ForEach(menuOptions.menu) { item in
                          MenuItemCircularGridView(imageName: item.imageName, menuItemName: item.name, action: (menuOptionsAction.menuActions.first {$0.id == item.id})?.action ?? {})
                      }
                  }.padding()
              }.navigationTitle(&quot;Sample App&quot;)
          }
      }
  }
  </code></pre>
  <p><em><strong>MenuItemCircularGridView:</strong></em></p>
  <pre><code>struct MenuItemCircularGridView: View {
      var imageName: String = &quot;&quot;
      var menuItemName: String = &quot;&quot;
      var action: () -&gt; Void
      
      var body: some View {
          VStack {
              CircularButtonWithImage(imageName:imageName,
                                      imageBackgroundColor:Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255),
                                      imageForegroundColor: Color(red: 23 / 255, green: 121 / 255, blue: 232 / 255),
                                      imageFrameWidth: 30.0,
                                      imageFrameHeight: 30.0,
                                      imagePadding: 10.0,
                                      action: action)
              Text(menuItemName).font(.system(size: 10))
          }.padding(10)
      }
  }
  </code></pre>
  <p><em><strong>CircularButtonWithImage:</strong></em></p>
  <pre><code>struct CircularButtonWithImage: View {
      var imageName: String = &quot;&quot;
      var imageBackgroundColor: Color?
      var imageForegroundColor: Color?
      var imageFrameWidth: CGFloat = 0.0
      var imageFrameHeight: CGFloat = 0.0
      var imagePadding: CGFloat = 0.0
      var action: () -&gt; Void
      
      var body: some View {
          Button(action: { action() }) {
              VStack{
                  Image(imageName)
                      .renderingMode(.template)
                      .resizable()
                      .scaledToFill()
                      .frame(width: imageFrameWidth, height: imageFrameHeight)
                      .padding(imagePadding)
                      .background(imageBackgroundColor)
                      .foregroundColor(imageForegroundColor)
                      .clipShape(Circle())
              }
          }
          .buttonStyle(PlainButtonStyle())
      }
  }
  </code></pre>
  <p><strong>This is kind of how my app looks:</strong></p>
  <p><a href="https://i.stack.imgur.com/HICYo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HICYo.png" alt="enter image description here" /></a></p>
  <p>Whenever I click on any of those buttons, I want to open a new view with navigation link. Something like below:</p>
  <pre><code>NavigationLink(destination: DetailView()) {
       Text(&quot;Show Detail View&quot;)
  }.navigationBarTitle(&quot;Navigation&quot;)
  </code></pre>
  <p>Since I have broken the view down into multiple reusable files, I am not sure where exactly should I put this logic to open a new view on button click.</p>
  <p>Edit: Adding the hardcoded data that I am using. I was trying to pass navigation link as action to the button.</p>
  <pre><code>struct MenuOptions {
      let menu: [MenuItem] = [
          MenuItem(id: 0, name: &quot;Option 1&quot;, imageName: &quot;settings-gray&quot;),
          MenuItem(id: 1, name: &quot;Option 2&quot;, imageName: &quot;settings-gray&quot;),
          MenuItem(id: 2, name: &quot;Option 3&quot;, imageName: &quot;settings-gray&quot;),
          MenuItem(id: 3, name: &quot;Set 1&quot;, imageName: &quot;settings-gray&quot;),
          MenuItem(id: 4, name: &quot;Set 2&quot;, imageName: &quot;settings-gray&quot;),
          MenuItem(id: 5, name: &quot;Settings&quot;, imageName: &quot;settings-gray&quot;)
      ]
  }
  
  struct MenuActions {
      let menuActions: [MenuItemAction] = [
          MenuItemAction(id: 1, action: { NavigationLink(&quot;New View 1&quot;, destination: View1()) }),
          MenuItemAction(id: 5, action: { NavigationLink(&quot;Settings&quot;, destination: SettingsView()) })
      ]
  }
  </code></pre>