UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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...

2      

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

2      

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

2      

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.

2      

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!

4      

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!

2      

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

2      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

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.