title: Implementing custom sidebar across all views - SwiftUI
body: <p><strong>OUTLINE</strong></p>
  <p>I have made a custom slimline sidebar that I am now implementing across the whole app. The sidebar consists of a main button that is always showing and when pressed it shows or hides the rest of the sidebar that consists of buttons navigating to other views.</p>
  <p>I am currently implementing the sidebar across the app on each view by creating a <code>ZStack</code> like this:</p>
  <pre><code>struct MainView: View {
      var body: some View {
          ZStack(alignment: .topLeading) {
              SideBarCustom()
              Text(&quot;Hello, World!&quot;)
          }
      }
  }
  </code></pre>
  <p><strong>PROBLEM</strong></p>
  <p>I am planning on adding a <code>GeometryReader</code> so if the side bar is shown the rest of the content moves over. With this in mind, the way I am implementing the sidebar on every view feels clunky and a long winded way to add it. <strong>Is there a more simple/better method to add this to each view?</strong></p>
  <p>Sidebar Code:</p>
  <pre><code>struct SideBarCustom: View {
      
      @State var isToggle = false
      
      var names = [&quot;Home&quot;, &quot;Products&quot;, &quot;Compare&quot;, &quot;AR&quot;, &quot;Search&quot;]
      var icons = [&quot;house.fill&quot;, &quot;printer.fill.and.paper.fill&quot;, &quot;list.bullet.rectangle&quot;, &quot;arkit&quot;, &quot;magnifyingglass&quot;]
      var imgSize = 20
      
      var body: some View {
          GeometryReader { geo in
              VStack {
                  Button(action: {
                      self.isToggle.toggle()
                  }, label: {
                      Image(&quot;hexagons&quot;)
                          .resizable()
                          .frame(width: 40, height: 40)
                          .padding(.bottom, 20)
                  })
                  if isToggle {
                      ZStack{
                          RoundedRectangle(cornerRadius: 5)
                              .foregroundColor(Color.red)
                              .frame(width: 70, height: geo.size.height)                        
                          VStack(alignment: .center, spacing: 60) {
                              ForEach(Array(zip(names, icons)), id: \.0) { item in
                                  Button(action: {
                                      // NAVIIGATE TO VIEW
                                  }, label: {
                                      VStack {
                                          Image(systemName: item.1)
                                              .resizable()
                                              .frame(width: CGFloat(imgSize), height: CGFloat(imgSize))
                                          Text(item.0)
                                      }
                                  })
                              }
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>