BLACK FRIDAY SALE: Save 50% on all my Swift books and bundles! >>

Left and right sidebars: Navigation and Inspector, like in Xсode

Forums > SwiftUI

How do I create both left and right sidebars: Navigation and Inspector, like in Xсode, in SwiftUI? There is a ton of examples with one Navigation(Stack/(Split)View) to the left and detail to the right. But both right and left never seen. Searched for it, didn't help...

   

My guess is you have to build them yourself. F.e. with an HStack, a visible boolean and animations.

   

Apple added NavigationSplitView to SwiftUI in iOS 16. Navigation split views support 3 columns. The following article has some code for a 3 column split view:

A Beginner’s Guide to NavigationSplitView in SwiftUI for iOS 16

   

A three-column split view is not the same thing as what @Eldar describes, which is a main content area with a sidebar on each side. Like Xcode with its Navigation sidebar and Inspector sidebar.

   

If I am correct this is what you want in it's simplest form:

import SwiftUI

struct SideBarsView: View {
    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {
        HStack {
            //Left
            VStack {
                Text("Left")
            }
            .frame(maxHeight: .infinity)
            .frame(width: showLeft ? 150: 0)
            .background(.red)

            //Main
            VStack {
                HStack {
                    Button {
                        withAnimation {
                            showLeft.toggle()
                        }
                    } label: {
                        Image(systemName: "rectangle.split.3x1")
                    }
                    .padding()

                    Spacer()

                    Button {
                        withAnimation {
                            showRight.toggle()
                        }
                    } label: {
                        Image(systemName: "rectangle.split.3x1")
                    }
                    .padding()
                }

                Spacer()

                Text("Main")
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.green)

            //Right
            VStack {
                Text("Right")
            }
            .frame(maxHeight: .infinity)
            .frame(width: showRight ? 150: 0)
            .background(.purple)
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct SideBarsView_Previews: PreviewProvider {
    static var previews: some View {
        SideBarsView()
    }
}

Hope you can build on this!

2      

Wow! Didn't see all the replies. Thank you very much everybody!

@Gakkienl, that is the basic idea, yes. But NavigationSplitView goes to the top edge and has these automatic toolbar buttons to show and hide the sidebars. Seems like in Xcode it is done with UIKit on lower level. I just was wondering if there are any SwiftUI implementations. Thanks for the code example anyway!

   

don't know what you mean exactly, but with this basic setup, that has two buttons, you can build any layout you want!

   

Save 50% in my Black Friday sale.

SAVE 50% To celebrate Black Friday, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.