switcher account animation
This commit is contained in:
parent
82168755e2
commit
27a6ce7ce3
@ -1,5 +1,7 @@
|
|||||||
import SwiftUI
|
import SwiftUI
|
||||||
|
|
||||||
|
// --- HELPER STRUCTS & EXTENSIONS ---
|
||||||
|
|
||||||
// Dummy data for the account list
|
// Dummy data for the account list
|
||||||
struct Account: Identifiable {
|
struct Account: Identifiable {
|
||||||
let id = UUID()
|
let id = UUID()
|
||||||
@ -8,6 +10,57 @@ struct Account: Identifiable {
|
|||||||
let isCurrent: Bool
|
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 {
|
struct SideMenuView: View {
|
||||||
@Binding var isPresented: Bool
|
@Binding var isPresented: Bool
|
||||||
@State private var isAccountListExpanded = false
|
@State private var isAccountListExpanded = false
|
||||||
@ -66,41 +119,45 @@ struct SideMenuView: View {
|
|||||||
.padding(.horizontal, 20)
|
.padding(.horizontal, 20)
|
||||||
.padding(.bottom, 10)
|
.padding(.bottom, 10)
|
||||||
|
|
||||||
// --- Collapsible Account List ---
|
// --- Collapsible Account List in a clipped container ---
|
||||||
if isAccountListExpanded {
|
VStack {
|
||||||
VStack(alignment: .leading, spacing: 15) {
|
if isAccountListExpanded {
|
||||||
ForEach(accounts) { account in
|
VStack(alignment: .leading, spacing: 15) {
|
||||||
HStack {
|
ForEach(accounts) { account in
|
||||||
Button(action: { }) {
|
HStack {
|
||||||
ZStack {
|
Button(action: { }) {
|
||||||
Image(systemName: "person.circle.fill")
|
ZStack {
|
||||||
.resizable()
|
Image(systemName: "person.circle.fill")
|
||||||
.frame(width: 32, height: 32) // Smaller icon
|
.resizable()
|
||||||
.foregroundColor(.secondary)
|
.frame(width: 32, height: 32) // Smaller icon
|
||||||
|
.foregroundColor(.secondary)
|
||||||
|
|
||||||
if account.isCurrent {
|
if account.isCurrent {
|
||||||
Image(systemName: "checkmark.circle.fill")
|
Image(systemName: "checkmark.circle.fill")
|
||||||
.foregroundColor(.blue)
|
.foregroundColor(.blue)
|
||||||
.background(Circle().fill(Color(UIColor.systemBackground)))
|
.background(Circle().fill(Color(UIColor.systemBackground)))
|
||||||
.font(.body) // Smaller checkmark
|
.font(.body) // Smaller checkmark
|
||||||
.offset(x: 11, y: 11) // Adjusted offset
|
.offset(x: 11, y: 11) // Adjusted offset
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
VStack(alignment: .leading) {
|
||||||
|
Text(account.name).font(.footnote).bold() // Smaller text
|
||||||
|
Text(account.username).font(.caption2) // Smaller text
|
||||||
|
}
|
||||||
|
.foregroundColor(.primary)
|
||||||
}
|
}
|
||||||
|
|
||||||
VStack(alignment: .leading) {
|
Spacer()
|
||||||
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)
|
||||||
}
|
}
|
||||||
.padding(.horizontal, 20)
|
|
||||||
.padding(.vertical, 10)
|
|
||||||
}
|
}
|
||||||
|
.clipped()
|
||||||
|
|
||||||
// Menu Items
|
// Menu Items
|
||||||
VStack(alignment: .leading, spacing: 20) {
|
VStack(alignment: .leading, spacing: 20) {
|
||||||
@ -143,6 +200,7 @@ struct SideMenuView: View {
|
|||||||
}
|
}
|
||||||
.frame(maxWidth: .infinity, alignment: .leading) // Align to the left
|
.frame(maxWidth: .infinity, alignment: .leading) // Align to the left
|
||||||
}
|
}
|
||||||
|
.clipped()
|
||||||
|
|
||||||
Spacer()
|
Spacer()
|
||||||
|
|
||||||
@ -160,42 +218,3 @@ struct SideMenuView: View {
|
|||||||
.background(Color(UIColor.systemBackground))
|
.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(.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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user