128 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			Swift
		
	
	
	
	
	
			
		
		
	
	
			128 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			Swift
		
	
	
	
	
	
import SwiftUI
 | 
						|
 | 
						|
struct SideMenuView: View {
 | 
						|
    @Binding var isPresented: Bool
 | 
						|
    
 | 
						|
    // Adjustable paddings
 | 
						|
    private let topPadding: CGFloat = 66
 | 
						|
    private let bottomPadding: CGFloat = 34
 | 
						|
 | 
						|
    var body: some View {
 | 
						|
        VStack(alignment: .leading, spacing: 0) {
 | 
						|
            ScrollView {
 | 
						|
                VStack(alignment: .leading, spacing: 0) { // Parent VStack
 | 
						|
                    // Header
 | 
						|
                    VStack(alignment: .leading) {
 | 
						|
                        Image(systemName: "person.circle.fill")
 | 
						|
                            .resizable()
 | 
						|
                            .frame(width: 60, height: 60)
 | 
						|
                            .foregroundColor(.gray)
 | 
						|
                        Text("Your Name")
 | 
						|
                            .font(.title2).bold()
 | 
						|
                        Text("@yourusername")
 | 
						|
                            .font(.subheadline)
 | 
						|
                            .foregroundColor(.secondary)
 | 
						|
                    }
 | 
						|
                    .padding(.horizontal, 20)
 | 
						|
                    .padding(.top, topPadding)
 | 
						|
                    .padding(.bottom, 20)
 | 
						|
                    
 | 
						|
                    
 | 
						|
                    // Menu Items
 | 
						|
                    VStack(alignment: .leading, spacing: 20) {
 | 
						|
                        // Section 1
 | 
						|
                        VStack(alignment: .leading, spacing: 15) {
 | 
						|
                            SideMenuButton(icon: "person.2.fill", title: "People You May Like", action: {})
 | 
						|
                            SideMenuButton(icon: "star.fill", title: "Fun Fest", action: {})
 | 
						|
                            SideMenuButton(icon: "lightbulb.fill", title: "Creator Center", action: {})
 | 
						|
                        }
 | 
						|
 | 
						|
                        Divider()
 | 
						|
 | 
						|
                        // Section 2
 | 
						|
                        VStack(alignment: .leading, spacing: 15) {
 | 
						|
                            Text("CATEGORY").font(.caption).foregroundColor(.secondary)
 | 
						|
                            SideMenuButton(icon: "doc.text", title: "Drafts", action: {})
 | 
						|
                            SideMenuButton(icon: "bubble.left", title: "My Comments", action: {})
 | 
						|
                            SideMenuButton(icon: "clock", title: "History", action: {})
 | 
						|
                            SideMenuButton(icon: "arrow.down.circle", title: "My Downloads", action: {})
 | 
						|
                        }
 | 
						|
 | 
						|
                        Divider()
 | 
						|
 | 
						|
                        // Section 3
 | 
						|
                        VStack(alignment: .leading, spacing: 15) {
 | 
						|
                            Text("SERVICES").font(.caption).foregroundColor(.secondary)
 | 
						|
                            SideMenuButton(icon: "shippingbox", title: "Orders", action: {})
 | 
						|
                            SideMenuButton(icon: "cart", title: "Cart", action: {})
 | 
						|
                            SideMenuButton(icon: "wallet.pass", title: "Wallet", action: {})
 | 
						|
                        }
 | 
						|
                        
 | 
						|
                        Divider()
 | 
						|
                        
 | 
						|
                        // Section 4
 | 
						|
                        VStack(alignment: .leading, spacing: 15) {
 | 
						|
                            SideMenuButton(icon: "square.grid.2x2", title: "Applets", action: {})
 | 
						|
                        }
 | 
						|
                    }
 | 
						|
                    .padding()
 | 
						|
                }
 | 
						|
                .frame(maxWidth: .infinity, alignment: .leading) // Align to the left
 | 
						|
            }
 | 
						|
 | 
						|
            Spacer()
 | 
						|
 | 
						|
            // Footer
 | 
						|
            HStack(spacing: 20) {
 | 
						|
                Spacer()
 | 
						|
                SideMenuFooterButton(icon: "qrcode.viewfinder", title: "Scan", action: {})
 | 
						|
                SideMenuFooterButton(icon: "questionmark.circle", title: "Help Center", action: {})
 | 
						|
                SideMenuFooterButton(icon: "gear", title: "Settings", action: {})
 | 
						|
                Spacer()
 | 
						|
            }
 | 
						|
            .padding()
 | 
						|
            .padding(.bottom, bottomPadding)
 | 
						|
        }
 | 
						|
        .background(Color(UIColor.systemBackground))
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
// Helper Views for buttons
 | 
						|
struct SideMenuButton: View {
 | 
						|
    let icon: String
 | 
						|
    let title: String
 | 
						|
    let action: () -> Void
 | 
						|
 | 
						|
    var body: some View {
 | 
						|
        Button(action: action) {
 | 
						|
            HStack(spacing: 15) {
 | 
						|
                Image(systemName: icon)
 | 
						|
                    .font(.title3)
 | 
						|
                    .frame(width: 30)
 | 
						|
                Text(title)
 | 
						|
                    .font(.headline)
 | 
						|
            }
 | 
						|
            .foregroundColor(.primary)
 | 
						|
            .padding(.vertical, 8)
 | 
						|
        }
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
struct SideMenuFooterButton: View {
 | 
						|
    let icon: String
 | 
						|
    let title: String
 | 
						|
    let action: () -> Void
 | 
						|
 | 
						|
    var body: some View {
 | 
						|
        Button(action: action) {
 | 
						|
            VStack {
 | 
						|
                Image(systemName: icon)
 | 
						|
                    .font(.title2)
 | 
						|
                Text(title)
 | 
						|
                    .font(.caption)
 | 
						|
            }
 | 
						|
            .foregroundColor(.primary)
 | 
						|
        }
 | 
						|
    }
 | 
						|
}
 |