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      

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

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.