title: Collapse sidebar in SwiftUI (Xcode 12)
body: <p>I'm trying to do a simple application in SwiftUI taking advantage of SwiftUI 2.0's new multiplatform project template, and I wish to add the option to collapse the sidebar as many other apps do.</p>
  <p>I tried adding a boolean state variable that controls whether the sidebar should show or not, but that doesn't work because then the main view is turned translucent (I guess this is because macOS thinks the sidebar is now the main view).</p>
  <p>Is there a way to natively achieve this in SwiftUI?
  <strong>Please note I'm using macOS Big Sur, Xcode 12, and SwiftUI 2.0</strong></p>
  <p>Thanks in advance.</p>
  <p><strong>My code</strong></p>
  <p><strong>ContentView.swift</strong></p>
  <pre><code>import SwiftUI
  
  struct ContentView: View {
  
      #if os(iOS)
      @Environment(\.horizontalSizeClass) private var horizontalSizeClass
      #endif
      
      @ViewBuilder var body: some View {
          #if os(iOS)
          if horizontalSizeClass == .compact {
              TabController()
          } else {
              SidebarNavigation()
          }
          #else
          SidebarNavigation()
              .frame(minWidth: 900, maxWidth: .infinity, minHeight: 500, maxHeight: .infinity)
          #endif
      }
      
  }
  
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
              .previewLayout(.sizeThatFits)
      }
  }
  </code></pre>
  <p><strong>Sidebar.swift</strong></p>
  <pre><code>import SwiftUI
  
  struct SidebarNavigation: View {
      
      enum HyperspaceViews {
          case home
          case localTimeline
          case publicTimeline
          case messages
          case announcements
          case community
          case recommended
          case profile
      }
  
      @State var selection: Set&lt;HyperspaceViews&gt; = [.home]
      @State var searchText: String = &quot;&quot;
      @State var showComposeTootView: Bool = false
      @State var showNotifications: Bool = false
      @State private var showCancelButton: Bool = false
      
      
      var sidebar: some View {
          
          VStack {
              
              HStack {
                  TextField(&quot;Search...&quot;, text: $searchText)
                      .cornerRadius(4)
              }
                  .padding()
                  .textFieldStyle(RoundedBorderTextFieldStyle())
              
              List(selection: self.$selection) {
                      
                  Group {
                      
                      NavigationLink(destination: Timeline().container.frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Home&quot;, systemImage: &quot;house&quot;)
                      }
                          .accessibility(label: Text(&quot;Home&quot;))
                          .tag(HyperspaceViews.home)
                      
                      NavigationLink(destination: Text(&quot;Local&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Local&quot;, systemImage: &quot;person.2&quot;)
                      }
                          .accessibility(label: Text(&quot;Local&quot;))
                          .tag(HyperspaceViews.localTimeline)
                      
                      NavigationLink(destination: Text(&quot;Public&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Public&quot;, systemImage: &quot;globe&quot;)
                      }
                          .accessibility(label: Text(&quot;Public&quot;))
                          .tag(HyperspaceViews.localTimeline)
                      
                      NavigationLink(destination: Text(&quot;Messages&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Messages&quot;, systemImage: &quot;bubble.right&quot;)
                      }
                          .accessibility(label: Text(&quot;Message&quot;))
                          .tag(HyperspaceViews.localTimeline)
                      
                      Divider()
                          
                      NavigationLink(destination: Text(&quot;Announcements&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Announcements&quot;, systemImage: &quot;megaphone&quot;)
                      }
                          .accessibility(label: Text(&quot;Announcements&quot;))
                          .tag(HyperspaceViews.announcements)
                      
                      NavigationLink(destination: Text(&quot;Community&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Community&quot;, systemImage: &quot;flame&quot;)
                      }
                          .accessibility(label: Text(&quot;Community&quot;))
                          .tag(HyperspaceViews.community)
                      
                      NavigationLink(destination: Text(&quot;Recommended&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;Recommended&quot;, systemImage: &quot;star&quot;)
                      }
                          .accessibility(label: Text(&quot;Community&quot;))
                          .tag(HyperspaceViews.recommended)
                      
                      Divider()
                      NavigationLink(destination: Text(&quot;Recommended&quot;).frame(maxWidth: .infinity, maxHeight: .infinity)) {
                          Label(&quot;hyperspacedev&quot;, systemImage: &quot;tag&quot;)
                      }
                          .accessibility(label: Text(&quot;Community&quot;))
                          .tag(HyperspaceViews.recommended)
                          
                  }
                  
              }
                  .overlay(self.profileButton, alignment: .bottom)
              .listStyle(SidebarListStyle())
              
          }
      }
      
      var profileButton: some View {
          VStack(alignment: .leading, spacing: 0) {
              Divider()
              NavigationLink(destination: ProfileView().container.frame(maxWidth: .infinity, maxHeight: .infinity)) {
                  HStack {
                      Image(&quot;amodrono&quot;)
                          .resizable()
                          .clipShape(Circle())
                          .frame(width: 25, height: 25)
                      Text(&quot;amodrono&quot;)
                          .font(.headline)
                  }
                  .contentShape(Rectangle())
              }
              .accessibility(label: Text(&quot;Your profile&quot;))
              .padding(.vertical, 8)
              .padding(.horizontal, 16)
              .buttonStyle(PlainButtonStyle())
          }
              .tag(HyperspaceViews.profile)
      }
      
      var body: some View {
          NavigationView {
              
              #if os(macOS)
              sidebar.frame(minWidth: 100, idealWidth: 180, maxWidth: 200, maxHeight: .infinity)
              #else
              sidebar
              #endif
              
              Text(&quot;Content List&quot;)
                  .frame(maxWidth: .infinity, maxHeight: .infinity)
              
          }
              .sheet(isPresented: self.$showComposeTootView) {
                  ComposeTootView(showComposeTootView: self.$showComposeTootView)
                      .frame(minWidth: 400, maxWidth: .infinity, minHeight: 200, maxHeight: .infinity)
              }
  
              .toolbar {
                  
                  ToolbarItem {
                      
                      Button(action: {
                          
                          self.showNotifications.toggle()
                          
                      }) {
                          
                          Image(systemName: &quot;bell&quot;)
                          
                      }
                          .popover(
                              isPresented: self.$showNotifications,
                              arrowEdge: .bottom
                          ) {
                              LazyVStack {
                                  ForEach(0 ..&lt; 10 ) { i in
                                      
                                      Label(&quot;@\(i) liked your post!&quot;, systemImage: &quot;hand.thumbsup&quot;)
                                          .padding()
                                      
                                      Divider()
                                      
                                  }
                              }
                          }
                      
                  }
                  
                  ToolbarItem {
                      
                      Button(action: {
                          
                          self.showComposeTootView.toggle()
                          
                      }) {
                          
                          Image(systemName: &quot;square.and.pencil&quot;)
                          
                      }
                  }
                  
               }
      }
      
  }
  
  struct SidebarNavigation_Previews: PreviewProvider {
      static var previews: some View {
          SidebarNavigation()
      }
  }
  </code></pre>