Creating a Main Menu in SwiftUI

SwiftUI is a new framework for building user interfaces on Apple platforms, introduced in iOS 13. One of the most common UI elements is a main menu that allows users to navigate between different parts of an app. This article will teach us how to create a main menu in SwiftUI.

Getting Started

To get started, we will create a new Xcode project and select the Single View App template. Name the project and choose SwiftUI as the User Interface option. Xcode will generate the necessary code for a simple single-view app.

Defining the Main Menu

In SwiftUI, we can create a main menu by using a List component. The List the component is a container that displays a collection of rows. Each row can be a NavigationLink component that takes the user to a different part of the app when tapped or a Button component that performs an action when tapped.

Here is an example of a main menu in SwiftUI:

struct MainMenu: View {
    var body: some View {
        List {
            NavigationLink(destination: ProjectsView()) {
                Text("Projects")
            }
            NavigationLink(destination: AppsView()) {
                Text("Apps")
            }
            NavigationLink(destination: SettingsView()) {
                Text("Settings")
            }
            NavigationLink(destination: AboutView()) {
                Text("About")
            }
            NavigationLink(destination: PrivacyPolicyView()) {
                Text("Privacy and Policy")
            }
            Button(action: {
                self.logout()
            }) {
                Text("Logout")
            }
        }
    }
    
    func logout() {
        // Implement logout logic here
    }
}

In this example, the MainMenu struct conforms to the View protocol and defines the UI for the main menu. The body property returns a List component that contains a number of NavigationLink and Button components.

The NavigationLink components define the different parts of the app that can be navigated. The destination property specifies the view that should be displayed when it NavigationLink is tapped. The text between the NavigationLink component is the label that will be displayed in the main menu.

The Button the component performs an action when tapped. In this example, the action is a call to the logout method. You can customize the logic for logging out in the logout method.

Displaying the Main Menu

Now that we have defined the main menu, we need to display it in our app. We can do this by adding the MainMenu view as a subview of our ContentView:

struct ContentView: View {
    var body: some View {
        MainMenu()
    }
}

In this example, the ContentView struct conforms to the View protocol and defines the UI for the content of the app. The body property returns the MainMenu view.

In SwiftUI, you can add styles to your main menu by using modifier methods. Modifiers allow you to change the appearance and behavior of views.

Here’s an example of a main menu with some styles:

import SwiftUI

struct SideMenu: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: ProjectsListView()) {
                    Text("Projects")
                }
                NavigationLink(destination: ModulesListView()) {
                    Text("Modules")
                }
                NavigationLink(destination: SettingsView()) {
                    Text("Settings")
                }
                NavigationLink(destination: Text("About")) {
                    Text("About")
                }
                NavigationLink(destination: Text("Privacy and Policy")) {
                    Text("Privacy and Policy")
                }
                Button(action: {
                    // logout action
                }) {
                    Text("Logout")
                        .foregroundColor(.red)
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle("Main Menu", displayMode: .inline)
            .navigationBarItems(leading: HamburgerIcon())
        }
    }
}

struct HamburgerIcon: View {
    var body: some View {
        Image(systemName: "line.horizontal.3")
            .imageScale(.large)
    }
}

struct SideMenu_Previews: PreviewProvider {
    static var previews: some View {
        SideMenu()
    }
}


struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
    
        Group {
            SideMenu()
                .preferredColorScheme(.dark)
        }
          
        
    }
}

In this example, we’ve added some styles to each menu item using the listRowInsets, background, foregroundColor, and font modifiers. You can use these same or other available modifiers to style your main menu as desired.

Note that the listRowInsets modifier sets the padding around each menu item. The background modifier sets the background color of each item. The foregroundColor sets the text color of each item, and the font sets the font for each item.

This is just a basic example, you can use other available modifiers to further enhance the appearance of your main menu, such as cornerRadius for rounding corners, shadow for adding shadows, and so on.

Conclusion

In this article, we learned how to create a main menu in SwiftUI. We used a List component to display a collection of rows, including NavigationLink components for navigating to different parts of the app, and Button components for performing actions.

By using SwiftUI, we can create a main menu with a modern and streamlined user interface that is easy to maintain and customize. Additionally, SwiftUI provides a declarative syntax for defining UI, which makes it easier to understand and write code.

This is just the beginning of what can be done with SwiftUI. By exploring the framework further, you can create even more complex and sophisticated user interfaces for your apps.