263 lines
10 KiB
Swift
263 lines
10 KiB
Swift
import SwiftUI
|
|
|
|
// --- HELPER STRUCTS & EXTENSIONS ---
|
|
|
|
// Dummy data for the account list
|
|
struct Account: Identifiable {
|
|
let id = UUID()
|
|
let name: String
|
|
let username: String
|
|
let isCurrent: Bool
|
|
}
|
|
|
|
// Custom Transition for older Xcode versions
|
|
extension AnyTransition {
|
|
static var slideAndFade: AnyTransition {
|
|
let insertion = AnyTransition.move(edge: .top).combined(with: .opacity)
|
|
let removal = AnyTransition.move(edge: .top).combined(with: .opacity)
|
|
return .asymmetric(insertion: insertion, removal: removal)
|
|
}
|
|
}
|
|
|
|
// 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(.subheadline)
|
|
}
|
|
.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(.caption2)
|
|
}
|
|
.foregroundColor(.primary)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// --- MAIN VIEW ---
|
|
|
|
struct SideMenuView: View {
|
|
@ObservedObject var viewModel: LoginViewModel
|
|
@EnvironmentObject var themeManager: ThemeManager
|
|
@Environment(\.colorScheme) var colorScheme
|
|
@Binding var isPresented: Bool
|
|
@State private var isAccountListExpanded = false
|
|
|
|
// Adjustable paddings
|
|
private let topPadding: CGFloat = 66
|
|
private let bottomPadding: CGFloat = 34
|
|
|
|
// Dummy account data
|
|
private let accounts: [Account] = [
|
|
Account(name: "Your Name", username: "@yourusername", isCurrent: true),
|
|
Account(name: "Second Account", username: "@second", isCurrent: false),
|
|
Account(name: "Another One", username: "@another", isCurrent: false),
|
|
Account(name: "Test User", username: "@test", isCurrent: false),
|
|
Account(name: "Creative Profile", username: "@creative", isCurrent: false)
|
|
]
|
|
|
|
private var themeToggleButton: some View {
|
|
Button(action: {
|
|
themeManager.toggleTheme(from: colorScheme)
|
|
}) {
|
|
Image(systemName: iconName)
|
|
.font(.title2)
|
|
.foregroundColor(.primary)
|
|
}
|
|
}
|
|
|
|
private var iconName: String {
|
|
let effectiveScheme: ColorScheme
|
|
switch themeManager.theme {
|
|
case .system:
|
|
effectiveScheme = colorScheme
|
|
case .light:
|
|
effectiveScheme = .light
|
|
case .dark:
|
|
effectiveScheme = .dark
|
|
}
|
|
|
|
return effectiveScheme == .dark ? "sun.max.fill" : "moon.fill"
|
|
}
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
ScrollView(showsIndicators: false) {
|
|
VStack(alignment: .leading, spacing: 0) { // Parent VStack
|
|
|
|
// --- Header ---
|
|
HStack(alignment: .top) {
|
|
Button(action: { }) {
|
|
Image(systemName: "person.circle.fill")
|
|
.resizable()
|
|
.frame(width: 60, height: 60)
|
|
.foregroundColor(.gray)
|
|
}
|
|
Spacer()
|
|
themeToggleButton
|
|
}
|
|
.padding(.horizontal, 20)
|
|
.padding(.top, topPadding)
|
|
.padding(.bottom, 10)
|
|
|
|
// --- Header Button ---
|
|
Button(action: {
|
|
withAnimation(.spring()) {
|
|
isAccountListExpanded.toggle()
|
|
}
|
|
}) {
|
|
HStack {
|
|
VStack(alignment: .leading) {
|
|
Text("@\(viewModel.username)")
|
|
.font(.title3).bold()
|
|
// Text("@yourusername")
|
|
// .font(.footnote)
|
|
}
|
|
.foregroundColor(.primary)
|
|
|
|
Spacer()
|
|
|
|
Image(systemName: isAccountListExpanded ? "chevron.up" : "chevron.down")
|
|
.font(.headline)
|
|
.foregroundColor(.secondary)
|
|
}
|
|
}
|
|
.padding(.horizontal, 20)
|
|
.padding(.bottom, 10)
|
|
|
|
// --- Collapsible Account List in a clipped container ---
|
|
VStack {
|
|
if isAccountListExpanded {
|
|
VStack(alignment: .leading, spacing: 15) {
|
|
ForEach(accounts) { account in
|
|
HStack {
|
|
Button(action: { }) {
|
|
ZStack {
|
|
Image(systemName: "person.circle.fill")
|
|
.resizable()
|
|
.frame(width: 32, height: 32) // Smaller icon
|
|
.foregroundColor(.secondary)
|
|
|
|
if account.isCurrent {
|
|
Image(systemName: "checkmark.circle.fill")
|
|
.foregroundColor(.blue)
|
|
.background(Circle().fill(Color(UIColor.systemBackground)))
|
|
.font(.body) // Smaller checkmark
|
|
.offset(x: 11, y: 11) // Adjusted offset
|
|
}
|
|
}
|
|
|
|
VStack(alignment: .leading) {
|
|
Text(account.username).font(.footnote).bold() // Smaller text
|
|
// Text(account.name).font(.footnote).bold() // Smaller text
|
|
// Text(account.username).font(.caption2) // Smaller text
|
|
}
|
|
.foregroundColor(.primary)
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, 20)
|
|
.padding(.vertical, 10)
|
|
.transition(.slideAndFade)
|
|
}
|
|
}
|
|
.clipped()
|
|
|
|
// Menu Items
|
|
VStack(alignment: .leading, spacing: 20) {
|
|
// Section 1
|
|
VStack(alignment: .leading, spacing: 7) {
|
|
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: 7) {
|
|
Text("CATEGORY").font(.caption2).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: 7) {
|
|
Text("SERVICES").font(.caption2).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
|
|
}
|
|
.clipped()
|
|
|
|
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))
|
|
}
|
|
}
|
|
|
|
// --- PREVIEW ---
|
|
|
|
struct SideMenuView_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
let mockViewModel = LoginViewModel()
|
|
SideMenuView(viewModel: mockViewModel, isPresented: .constant(true))
|
|
.environmentObject(ThemeManager())
|
|
}
|
|
}
|