Create a Slide out Menu with SwiftUI

Darren
Darren
Aug 10, 2019 · 5 min read
Image for post
Image for post

What are we building?

We are going to build a simple side menu. When you click on the open button the menu will slide open and the background will animate in. If you tap on the background the menu slide closed and the background will fade away.

Image for post
Image for post

Step 1: Create the menu content

For this we will create a list with three Text views. Each Text view will have a TapGesture so that we can test that it is working.

struct MenuContent: View {
var body: some View {
List {
Text("My Profile").onTapGesture {
print("My Profile")
}
Text("Posts").onTapGesture {
print("Posts")
}
Text("Logout").onTapGesture {
print("Logout")
}
}
}
}

Step 2: Create the side menu

This is the most difficult step of the tutorial, but it is still relatively simple.

struct SideMenu: View {
let width: CGFloat
let isOpen: Bool
let menuClose: () -> Void

var body: some View {
// Code here
}
}

Create the background view

Before we get to the background view, let’s add a ZStack to our body. This will allow us to add a the menu above the background.

struct SideMenu: View {
let width: CGFloat
let isOpen: Bool
let menuClose: () -> Void

var body: some View {
ZStack {
// Code here
}
}
}
GeometryReader { _ in
EmptyView()
}
.background(Color.gray.opacity(0.3))
.opacity(self.isOpen ? 1.0 : 0.0)
.animation(Animation.easeIn.delay(0.25))
.onTapGesture {
self.menuClose()
}

Add the menu content view

We are going to add an HStack and in that HStack we will use the MenuContent view we created in step 1. Will also use a Spacer so that the menu is on the left hand side.

HStack {
MenuContent()
.frame(width: self.width)
.background(Color.white)
.offset(x: self.isOpen ? 0 : -self.width)
.animation(.default)
Spacer()
}

Step 3: Adding the menu and the open button to the ContentView

We can now add the SideMenu to the ContentView. The ContentView has one property, menuOpen, which will track whether or not the menu is open. Based on this we show the Button that opens the menu.

struct ContentView: View {
@State var menuOpen: Bool = false

var body: some View {
// Code here
}

func openMenu() {
self.menuOpen.toggle()
}
}
ZStack {
if !self.menuOpen {
Button(action: {
self.openMenu()
}, label: {
Text("Open")
})
}
SideMenu(width: 270,
isOpen: self.menuOpen,
menuClose: self.openMenu)
}

Final Code

import SwiftUIstruct MenuContent: View {
var body: some View {
List {
Text("My Profile").onTapGesture {
print("My Profile")
}
Text("Posts").onTapGesture {
print("Posts")
}
Text("Logout").onTapGesture {
print("Logout")
}
}
}
}
struct SideMenu: View {
let width: CGFloat
let isOpen: Bool
let menuClose: () -> Void

var body: some View {
ZStack {
GeometryReader { _ in
EmptyView()
}
.background(Color.gray.opacity(0.3))
.opacity(self.isOpen ? 1.0 : 0.0)
.animation(Animation.easeIn.delay(0.25))
.onTapGesture {
self.menuClose()
}

HStack {
MenuContent()
.frame(width: self.width)
.background(Color.white)
.offset(x: self.isOpen ? 0 : -self.width)
.animation(.default)

Spacer()
}
}
}
}
struct ContentView: View {
@State var menuOpen: Bool = false

var body: some View {
ZStack {
if !self.menuOpen {
Button(action: {
self.openMenu()
}, label: {
Text("Open")
})
}

SideMenu(width: 270,
isOpen: self.menuOpen,
menuClose: self.openMenu)
}
}

func openMenu() {
self.menuOpen.toggle()
}
}

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Darren

Written by

Darren

Creator of https://imageresizer.online. Writing swift tutorials at https://programmingwithswift.com.

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Darren

Written by

Darren

Creator of https://imageresizer.online. Writing swift tutorials at https://programmingwithswift.com.

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store