From 6dd1d058e5e9e7cab7f86036ee8381a2a2ec17a8 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 18 Oct 2021 17:24:17 +0100
Subject: [PATCH] Added open/close animation for design settings sidebar groups

refs https://github.com/TryGhost/Team/issues/1149

- basic switch to `{{liquid-if}}` for animating the expand/collapse interaction
---
 ghost/admin/app/components/gh-nav-menu/design.hbs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/gh-nav-menu/design.hbs b/ghost/admin/app/components/gh-nav-menu/design.hbs
index e24e07addb..b4f47a1d51 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/design.hbs
@@ -10,13 +10,13 @@
                     <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
                     {{svg-jar "paintbrush"}}Brand
                 </button>
-                {{#if isOpen}}
+                {{#liquid-if isOpen}}
                     <div class="gh-nav-design-settings">
                         <Settings::Design::GeneralSettingsForm
                             @updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
                         />
                     </div>
-                {{/if}}
+                {{/liquid-if}}
             {{/let}}
 
             {{#each this.customThemeSettings.settingGroups as |group|}}
@@ -26,14 +26,14 @@
                         {{svg-jar group.icon}} {{group.name}}
                     </button>
 
-                    {{#if isOpen}}
+                    {{#liquid-if isOpen}}
                         <div class="gh-nav-design-settings">
                             <Settings::Design::ThemeSettingsForm
                                 @themeSettings={{group.settings}}
                                 @updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
                             />
                         </div>
-                    {{/if}}
+                    {{/liquid-if}}
                 {{/let}}
             {{/each}}
         </div>