Add animation for sidebar visibility toggling macos

sentryco · Oct 26, 2024 · 39378c4 · 39378c4
1 parent 08fbf1e
commit 39378c4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/ExampleProject/ExampleProject/example/view/main/MainHeader/MainHeader+Content.swift b/ExampleProject/ExampleProject/example/view/main/MainHeader/MainHeader+Content.swift
@@ -55,8 +55,13 @@ extension MainHeader {
     */
    var sideBarToggleButton: some View {
       Button(action: { // Show sidebar
-         // - Fixme: ⚠️️ animate this transition, but only for macOS
-         splitConfig.columnVisibility = .all // Shows all 3 columns
+         #if os(macOS)
+         withAnimation(.easeInOut(duration: 0.3)) {
+            splitConfig.columnVisibility = .all // Shows all 3 columns
+         }
+         #else
+         splitConfig.columnVisibility = .all // Shows all 3 columns without animation for other platforms
+         #endif
       }) {}
          .iconButtonStyle(iconName: "square.righthalf.fill") // - Fixme: ⚠️️ describe what this icon looks like
       .opacity(splitConfig.isShowingSideBar(sizeClass: sizeClass) ? 0.0 : 1.0) // Only show this if sidebar is hidden

diff --git a/ExampleProject/ExampleProject/example/view/sidebar/SideBarHeader/SideBarHeader+Content.swift b/ExampleProject/ExampleProject/example/view/sidebar/SideBarHeader/SideBarHeader+Content.swift
@@ -52,7 +52,14 @@ extension SideBarHeader {
    @ViewBuilder var sideBarToggleButton: some View {
       let button = Button(action: { // Hide sidebar
          // - Fixme: ⚠️️ animate this transition, but only for macOS
-         splitConfig.columnVisibility = .doubleColumn // Go to double column, this effectivly hides sidebar
+         #if os(macOS)
+         let animation = Animation.easeInOut(duration: 0.3)
+         withAnimation(animation) {
+            splitConfig.columnVisibility = .doubleColumn // Go to double column, this effectively hides the sidebar
+         }
+         #else
+         splitConfig.columnVisibility = .doubleColumn // Change without animation for other platforms
+         #endif
       }) {}
       if splitConfig.isShowingSideBar(sizeClass: sizeClass)/*sizeClass == .regular*/ { // If 3 column
          button