SwiftUI & Mac Catalyst | Adding buttons to trailing navigation bar

Question

I have a Mac Catalyst app I had built using SwiftUI,and I cant seem to add buttons to the trailing navigation bar?

I am also unsure where this navigationBar is defined, is it possible to remove? It only seems to have appeared in Ventura.

struct AppSidebarNavigation: View {
  
enum NavigationItem {
    case home
}

@State private var selection: NavigationItem? = .home

init() {

    #if !targetEnvironment(macCatalyst)
    UITableView.appearance().backgroundColor = UIColor(named: "White")
    UITableViewCell.appearance().selectionStyle = .none
    UITableView.appearance().allowsSelection = false

    #endif

}

var body: some View {
    NavigationView {
        sidebar
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)


        // Main View
        HomeView()
            .navigationTitle("")
            .edgesIgnoringSafeArea(.top)
            .navigationBarHidden(isMac ? false : true)
            .navigationBarBackButtonHidden(isMac ? false : true)
    }
    .accentColor(Color("Black"))
    .navigationViewStyle(.columns)

}
}

HomeView I had the following to the View.

#if targetEnvironment(macCatalyst)
.navigationBarItems(trailing:
    NavButtons
)
#endif

var NavButtons: some View {
    HStack {
        Button(action: { 
            Print("No")
        }) {
            Image(systemName: "plus")
                .font(.system(size: 14, weight: .medium))
        }
        .buttonStyle(NavPlusButton())
    }
}

Can you clarify exactly where in the image you posted you wish to add a button? What do you mean by "trailing navigation bar"? — HangarRash, Jan 31 '23 at 05:57

score 0 · Answer 1 · answered Feb 01 '23 at 13:07

I don't think it is possible to do that because:

 @available(iOS, introduced: 13.0, deprecated: 100000.0, message: "Use toolbar(_:) with navigationBarLeading or navigationBarTrailing placement")
    @available(tvOS, introduced: 13.0, deprecated: 100000.0, message: "Use toolbar(_:) with navigationBarLeading or navigationBarTrailing placement")
    @available(macOS, unavailable)
    @available(watchOS, unavailable)
    public func navigationBarItems<T>(trailing: T) -> some View where T : View

This indicates on macOS the function in not available.

I slightly modified your code (to get it to compile) and saw that where it would be is at the red circle below:

My code is:

struct AppSidebarNavigation: View {
    
    enum NavigationItem {
        case home
    }
    
    @State private var selection: NavigationItem? = .home
    
    var isMac: Bool
    
    init() {
        
#if !targetEnvironment(macCatalyst)
        UITableView.appearance().backgroundColor = UIColor(named: "White")
        UITableViewCell.appearance().selectionStyle = .none
        UITableView.appearance().allowsSelection = false
        isMac = false
#else
        isMac = true
#endif
        
    }
    
    var body: some View {
        NavigationView {

            // Main View
            HomeView()
                .navigationTitle("NavTitle")
                .edgesIgnoringSafeArea(.top)
                .navigationBarHidden(isMac ? false : true)
                .navigationBarBackButtonHidden(isMac ? false : true)
                .navigationBarItems(trailing: NavButtons)
        }
        .accentColor(Color("Black"))
        .navigationViewStyle(.columns)
        
    }
}
var NavButtons: some View {
    HStack {
        Button(action: {}) {
            Image(systemName: "plus")
        }
//        Button(action: {
//            print("No")
//        }) {
//            Image(systemName: "plus")
//                .font(.system(size: 14, weight: .medium)).frame(width: 80)
//        }
    }
}

struct HomeView: View {
    var body: some View {
        Group {
            Text("Home View")
            NavButtons
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

struct NavButton_Previews: PreviewProvider {
    static var previews: some View {
        NavButtons
    }
}
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
            AppSidebarNavigation()
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

score 0 · Answer 2 · answered Feb 02 '23 at 18:07

You can use Toolbar modifier with .primaryAction as placement to place button on the trailing side on Navigation Bar.

Just replace .navigationBarItem with below:

#if targetEnvironment(macCatalyst)
    .toolbar {
        ToolbarItem(placement: .primaryAction) {
            NavButtons
        }
    }
#endif

SwiftUI & Mac Catalyst | Adding buttons to trailing navigation bar

2 Answers2