article

Friday, August 27, 2021

SwiftUI Slide Navigation Menu with animation

SwiftUI Slide Navigation Menu with animation

ContentView.swift
 
//
//  ContentView.swift
//  swiftuidev
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var size = UIScreen.main.bounds.width / 1.6
    let countryList = Locale.isoRegionCodes.compactMap { Locale.current.localizedString(forRegionCode: $0) }
    
    var body: some View {
        
        ZStack{
            NavigationView{
                
                //List(0..<5){_ in
                //    Text("Hello Cairocoders")
                //}
                List {
                    ForEach(countryList, id: \.self) { country in
                       Text(country)
                    }
                }
                
                .navigationBarTitle("Home")
                .navigationBarItems(leading: Button(action: {
                    self.size = 10
                }, label: {
                    Image(systemName: "slider.horizontal.3").resizable().frame(width: 30, height: 20)
                }).foregroundColor(.black))
            }
            
            HStack{
                menu(size: $size)
                    .cornerRadius(20)
                        .padding(.leading, -size)
                        .offset(x: -size)
                    Spacer()
            }
        }.animation(.spring())
        
    }
}

struct menu : View {
    
    @Binding var size : CGFloat
    
    var body : some View{
        VStack{
            HStack{
                Spacer()
                Button(action: {
                    self.size =  UIScreen.main.bounds.width / 1.6
                }) {
                    Image(systemName: "xmark.circle").resizable().frame(width: 25, height: 25).padding()
                }.background(Color.red)
                    .foregroundColor(.white)
                .clipShape(Circle())
            }
            
            HStack{
                Image(systemName: "house.fill").resizable().frame(width: 25, height: 25).padding()
                Text("Home").fontWeight(.heavy)
                Spacer()
            }
            .padding(.leading, 20)
            
            HStack{
                Image(systemName: "person.crop.circle").resizable().frame(width: 25, height: 25).padding()
                Text("Profile").fontWeight(.heavy)
                Spacer()
            }
            .padding(.leading, 20)
            
            HStack{
                Image(systemName: "paperplane.fill").resizable().frame(width: 25, height: 25).padding()
                Text("send").fontWeight(.heavy)
                Spacer()
            }
            .padding(.leading, 20)
            
            HStack{
                Image(systemName: "person.crop.circle.fill.badge.exclamationmark").resizable().frame(width: 25, height: 25).padding()
                Text("Log Out").fontWeight(.heavy)
                Spacer()
            }
            .padding(.leading, 20)
            
            Spacer()
            
        }// End VStack
        .frame(width: UIScreen.main.bounds.width / 1.6)
            .background(Color.white)
        
    }
}

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

Related Post