2

I am new in SwiftUI and I am having an issue with my "hamburger" menu.

Basically I have created 2 views for the Home page: Home view and Home Side Menu view.

My main goal is to put the "hamburger" button at the top left of the view and open the side menu when it is clicked. However when I use .edgesIgnoringSafeArea(.top) and put the "hamburger" button at the top left of the view, the button doesn't open the menu. If, instead, I don't add .edgesIgnoringSafeArea(.top), the button is displayed in the middle of the view and works correctly opening the menu when it is clicked.

Could you please help me to see what I have done wrong.

Thanks in advance.

Home View:

import SwiftUI
    struct HomeView: View {      
       var body: some View {
           NavigationView{
              ScrollView{
                VStack(alignment: .center) {
                    Text("Home")
                        .font(.system(size: 22))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(.top, 20)
                        .padding(.bottom, 20)

                }
                .frame(width: UIScreen.main.bounds.width, height: 80)
                .background(Color.blue)

                Image("image")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .edgesIgnoringSafeArea(.all)
             }
             .edgesIgnoringSafeArea(.top)
         }
         .navigationBarBackButtonHidden(true)
    }
}

Home Side Menu view:

import SwiftUI

struct HomeSideMenuView : View {

@State var showMenu = false

var body: some View {

    let drag = DragGesture()
        .onEnded {
            if $0.translation.width < -100 {
                withAnimation {
                    self.showMenu = false
                }
            }
    }

    return NavigationView {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                VStack {

                      HomeView()
                        .overlay(
                            Button (action:{
                               withAnimation {
                                   self.showMenu = true
                               }
                            }){
                               Image(systemName: "line.horizontal.3")
                                   .padding()
                                   .imageScale(.large)
                                   .font(Font.system(size: 20, weight: .bold))
                           }
                           .padding()
                           .foregroundColor(.white)
                           .shadow(color: Color.gray, radius: 0.2, x: 1, y: 1)
                           .frame(maxWidth: geometry.size.width, maxHeight: geometry.size.height, alignment: .topLeading)
                           .edgesIgnoringSafeArea(.top) // -> if I add this line, the button doesn't work
                        )       
                    }
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .offset(x: self.showMenu ? geometry.size.width/1.5 : 0)
                    .disabled(self.showMenu ? true : false)

                    if self.showMenu {
                        MenuView()
                            .frame(width: geometry.size.width/1.5, height: geometry.size.height)
                            .transition(.move(edge: .leading))
                    }
                }
                .gesture(drag)

        }
    }
    .navigationBarBackButtonHidden(true)

}
}
Sofia
  • 23
  • 1
  • 4

1 Answers1

4

i am having the same issue, i guess the first top 100px are reserved to the navigationBar, just add

.navigationBarTitle("")
.navigationBarHidden(true)

to your views containers (first child of NavigationView). Hope this helps

Najib Maddah
  • 56
  • 3