Here you go. Here you have a ready sample for a Swift UI hamburger menu. You can easily hide the menu with a slide or tap on the hamburger symbol. Simply create a new SwiftUI project as a single app with the default settings. Simply copy and paste everything and play around with the project.
//
// ContentView.swift
// SlideMenuSwiftSample
//
// Created by T. Stephan on 03.05.20.
// Copyright © 2020 eCommerce - Tobias Stephan. All rights reserved.
//
import SwiftUI
struct ContentView: View {
@State var showHamburgerMenu = false
var body: some View {
let drag = DragGesture()
.onEnded {
if $0.translation.width < -100 {
withAnimation {
self.showHamburgerMenu = false
}
}
}
return NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
MainView(showHamburgerMenu: self.$showHamburgerMenu)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(x: self.showHamburgerMenu ? geometry.size.width/2 : 0)
.disabled(self.showHamburgerMenu ? true : false)
if self.showHamburgerMenu {
MenuView()
.frame(width: geometry.size.width/2)
.transition(.move(edge: .leading))
}
}
.gesture(drag)
}
.navigationBarTitle("Side Menu", displayMode: .inline)
.navigationBarItems(leading: (
Button(action: {
withAnimation {
self.showHamburgerMenu.toggle()
}
}) {
Image(systemName: "line.horizontal.3")
.imageScale(.large)
}
))
}
}
}
struct MainView: View {
@Binding var showHamburgerMenu: Bool
var body: some View {
Button(action: {
withAnimation {
self.showHamburgerMenu = true
}
}) {
Text("Show Menu")
}
}
}
struct MenuView: View {
var body: some View {
VStack(alignment: .leading) {
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
NavigationLink(destination: ProfileView()) {
Text("Profile")
.foregroundColor(.gray)
.font(.headline)
}
}
.padding(.top, 100)
HStack {
Image(systemName: "envelope")
.foregroundColor(.gray)
.imageScale(.large)
NavigationLink(destination: MessagesView()) {
Text("Messages")
.foregroundColor(.gray)
.font(.headline)
}
}
.padding(.top, 30)
HStack {
Image(systemName: "gear")
.foregroundColor(.gray)
.imageScale(.large)
NavigationLink(destination: SettingsView()) {
Text("Settings")
.foregroundColor(.gray)
.font(.headline)
}
}
.padding(.top, 30)
Spacer()
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color(red: 32/255, green: 32/255, blue: 32/255))
.edgesIgnoringSafeArea(.all)
}
}
struct SettingsView: View {
var body: some View {
VStack{
Text("Settings Subview")
}
}
}
struct MessagesView: View {
var body: some View {
VStack{
Text("Messages Subview")
}
}
}
struct ProfileView: View {
var body: some View {
VStack{
Text("Profile Subview")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Über den Autor