1

I'm trying to make an iOS app that uses SwiftUI's NavigationView to build a side menu. On iPhone it works perfectly, but on iPad I cannot get Rid of the Sidebar button and the back button text and icon. I would like to replace those buttons with the three horizontal lines icon named line.horizontal.3

Landscape screenshot with side menu icon I'd like to replace with three lines icon

Portrait screenshot with back button (woth icon and text) I'd like to replace with three lines icon

The code I'm using is the following:

import SwiftUI

struct ContentView_iPad: View {
    @State var showMenu: Bool = false
    
    
    var body: some View {
        NavigationView{
            MenuView()
            iPad_menu()
                .navigationBarTitle("Side Menu", displayMode: .inline)
                .navigationBarItems(leading:
                                        (Button(action: {
                                            withAnimation{
                                                self.showMenu.toggle()
                                            }
                                        }){
                                            Image(systemName: "line.horizontal.3").imageScale(.large)
                                        }
                                        ))
                .navigationViewStyle(StackNavigationViewStyle())
        }
        
    }
}

The MainView:

import SwiftUI
    
struct iPad_menu: View {
        var body: some View {
            EmptyView()
                .background(Color.black)
        }
    }

The MenuView:

import SwiftUI

struct MenuView: View {
    var body: some View {
        VStack(alignment: .leading) {
                    HStack {
                        Image(systemName: "person")
                            .foregroundColor(.gray)
                            .imageScale(.large)
                        Text("Profile")
                            .foregroundColor(.gray)
                            .font(.headline)
                    }
                        .padding(.top, 100)
                    HStack {
                        Image(systemName: "envelope")
                            .foregroundColor(.gray)
                            .imageScale(.large)
                        Text("Messages")
                            .foregroundColor(.gray)
                            .font(.headline)
                    }
                        .padding(.top, 30)
                    HStack {
                        Image(systemName: "gear")
                            .foregroundColor(.gray)
                            .imageScale(.large)
                        Text("Settings")
                            .foregroundColor(.gray)
                            .font(.headline)
                    }
                        .padding(.top, 30)
                }
        .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color(red: 32/255, green: 32/255, blue: 32/255))
                    .edgesIgnoringSafeArea(.all)
    }
}

0 Answers0