Navigation View -Notes Like Sidebar - Toggle button

Question

I am very new to iOS development and Swift UI. I am making an app for our company. I believe Apple Notes like approach is best. I got most working tanks to some Udemmy courses and a couple of weeks of intense Googling. But I can't figure out how to implement the toggle sidebar button. I am probably searching for something obvious but using the wrong terminology.

I am talking about this:

When I remove most of the code, I have a structure like this:

NavigationView {
    List {
        Section(header: RoomHeader()) {
            ForEach(sections) { section in
                NavigationLink(destination: ViewRoom(section: section)) {
                    RoomListItem(section: section)
                }
            }
        }
    }
    .navigationTitle("Rooms")
    .listStyle(InsetGroupedListStyle())
}

The ViewRoom class

import SwiftUI

struct ViewRoom: View {
    var room: RoomModel
    
    var body: some View {
        ZStack {
            ScrollView {
                VStack {
                    controls
                    title
                    // ....
                }
                .padding()

            }

            bottomBar

        }
        .navigationTitle(room.name)
        .navigationBarItems(
            trailing: HStack {
                // ...
            }
        )
    }
    
    var controls: some View {
        HStack {
            Spacer()
            
            // Couldn't find the icon on SF Symbols but this is the toggle button
            Button(action: {}, label: {
                Image(systemName: "rectangle.portrait.arrowtriangle.2.outward")
            })
        }
        .font(.system(size: 24))
        .padding(.top, 15)
    }
    // ...
}

I'd appreciate it if you could let me know if how to implement this toggle feature.

score 0 · Answer 1 · answered Aug 08 '21 at 17:37

You can use Zstack & animation & transition features of SwiftUI. I made a sample for you to dig more into it and explore more about above mentioned concepts.

struct ContentView: View {
    @State private var showDetails = false
    
    var body: some View {
        ZStack {
            if showDetails {
                LeftView()
                    .transition(.move(edge: .leading))
                    .zIndex(1)
            } else {
                Button("Press to show details") {
                    withAnimation(.spring()) {
                        showDetails.toggle()
                    }
                }
            }
        }
        .onTapGesture {
            withAnimation(.spring()) {
                showDetails.toggle()
            }
        }
    }
}

Below is leftView which will animated from left

struct LeftView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Hello, World!")
                    
            }
                .frame(width: 200, height: geometry.size.height)
                .background(Color.blue)
        }
    }
}

Navigation View -Notes Like Sidebar - Toggle button

1 Answers1