BLACK FRIDAY SALE: Save big 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!

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

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

Reply to this topic…

You need to create an account or log in to reply.

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.