Easily and customisable menu for SwiftUI with SF Symbol support

SwiftyUI Angle Side Menu

Easily & customizable menu for SwiftUI with SF Symbol support

---

Usage

1. Drag and Drop Menu.swift into your project

2. Create a @State variable in you main view

   @State var isMenuShown: Bool = false

3. Inside your main ZStack, add the below code

   if isMenuShown {
           Menu(isMenuShown: $isMenuShown, menuItems: self.getMenuItems(), profileName: "Deepak Pillai", profileImage: UIImage(named: "profileIcon"), footerText: "©Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.")
   }

4. Add the below set of parameters to your main view

   .cornerRadius(isMenuShown ? 20 : 0)
   .offset(x: isMenuShown ? 300 : 0, y: isMenuShown ? 50 : 0)
   .rotationEffect(.init(degrees: isMenuShown ? -8 : 0))
   .navigationTitle("Home")
   .navigationBarTitleDisplayMode(.inline)
   .ignoresSafeArea()
   .scaleEffect(isMenuShown ? 0.9 : 1)
   .navigationBarHidden(isMenuShown ? true : false)
   .shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.5), radius: 10, x: -10, y: 10)
   .toolbar{
       ToolbarItem(placement: .navigationBarLeading) {
           Button{
               toggleMenu()
           } label: {
           Image(systemName: "filemenu.and.selection")
               .foregroundColor(.black)
               .font(.system(size: 18))
                   }
               }
           }
           .onTapGesture {
               if isMenuShown {
                   toggleMenu()
               }
           }

5. Add the property to your main ZStack

   .onAppear {
       isMenuShown = false
   }

6. Add the below func in your SwiftUI file

   func toggleMenu() {
       withAnimation(.spring()) {
           self.isMenuShown.toggle()
       }
   }

7. Create an array of ‘MenuItem’ which we passed on to the Menu class in step 3

   func getMenuItems() -> [MenuItem] {
       
       let array = [
           MenuItem(text: "Home", textColor: .white, sfIconName: "house.circle", sfIconForgroundColor: .white, didTap: {
               self.toggleMenu()
           }),
           MenuItem(text: "Profile", textColor: .white, sfIconName: "person.crop.circle", sfIconForgroundColor: .white, destinationObject: AnyView(Profile())),
           MenuItem(text: "Logout", textColor: .white, sfIconName: "rectangle.portrait.and.arrow.right", sfIconForgroundColor: .white, didTap: {
               self.toggleMenu()
               self.logout()
           })
       ]
       
       return array
   }

With the above steps you will be able to add the SwiftyUI Menu to your application.

UI Customization options

• Text customization

  • By making use of text, textColor & textFont property, you will be able to customize the menu item text

• Icon customization

  • Menu item with icon image
    • With custom icon image
      • You can set your own custom image and manage its width and height and backgroundColor by using iconImageName, iconImageWidth, iconImageHeight & iconImageBackgroundColor properties
    • With SF Symbols
      • You can make use of sfIconName, sfIconForgroundColor, sfIconBackgroundColor & sfIconSize properties to manage your icons
  • Menu item without icon image
    • You can set noIconRequired: true to remove image from the menu item

Event control customization options

• Navigating to different view

  • You can pass on the view instance to destinationObject. Make sure to cast your view to AnyView type before assigning the object.

• Get tap event

  • You can pass a closure to didTap property to get the tap event on a menu item.

Example

1. Example to shows the usage of didTap: closure

   MenuItem(text: "Home", textColor: .white, sfIconName: "house.circle", sfIconForgroundColor: .white, didTap: {
   self.toggleMenu()
   })

2. Example to shows the usage of destinationObject: property

   MenuItem(text: "Profile", textColor: .white, sfIconName: "person.crop.circle", sfIconForgroundColor: .white, destinationObject: AnyView(Profile()))

3. Example to show the menu item with no events

   MenuItem(text: "No event menu item", textColor: .white, iconImageName: "apple", iconImageWidth: 40.0, iconImageHeight: 40.0)

4. Example to show menu item without an image

   MenuItem(text: "Menu item with no icon", textColor: .white, noIconRequired: true, destinationObject: AnyView(Settings()))

Installation – Manually

Drop Menu.swift into your project.

GitHub

View Github