@momo-kits/native-kits 0.167.1-beta.9-debug → 0.167.1-duo-search.1

package/ios/Application/Navigation/component/NavigationHeaderRight.swift

@@ -26,9 +26,12 @@ public struct NavigationHeaderRight: View {
 struct ToolkitNavigationHeaderRight: View {
     var headerRight: HeaderRightData?
     var tintColor: Color?
+    /// iPhone Duo side bar column instead of the bar row.
+    var vertical: Bool = false
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
     @Environment(\.applicationEnvironment) private var environment
+    @Environment(\.duoBarCompression) private var compression
 
     private func apiValue(_ value: Any?) -> Any {
         value ?? NSNull()
@@ -142,15 +145,99 @@ struct ToolkitNavigationHeaderRight: View {
         return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
     }
 
+    private var showHelpCenter: Bool {
+        environment.applicationContext != nil && showsHelpCenter(environment.applicationContext)
+    }
+
+    private var closeIcon: String { headerRight?.closeIcon ?? "16_basic_home" }
+
     var body: some View {
+        Group {
+            if vertical {
+                verticalBody
+            } else {
+                horizontalBody
+            }
+        }
+        .onAppear {
+            loadFavoriteState()
+        }
+    }
+
+    private var showBadge: Bool {
+        headerRight?.tools.contains { group in
+            group.items.contains { $0.showBadge }
+        } ?? false
+    }
+
+    /// Back slot, the optional shortcut, then the help/home capsule.
+    private var fullToolbarHeight: CGFloat {
+        DuoMetrics.controlSize + Spacing.M
+            + (shouldShowShortcut ? DuoMetrics.controlSize + Spacing.M : 0)
+            + (showHelpCenter ? 2 * DuoMetrics.itemPitch : DuoMetrics.controlSize)
+    }
+
+    @ViewBuilder
+    private var verticalBody: some View {
+        Group {
+            if compression.toolbarHidden {
+                // an open tab rail takes this slot for a moment
+                EmptyView()
+            } else if compression.toolbarCompressed {
+                // HIG "Toolbar compressed": tools fold into one button, distinct from the useMore icon
+                SideBarButton(
+                    icon: "navigation_menu",
+                    tintColor: tintColor,
+                    showBadge: showBadge,
+                    accessibilityId: "btn_navigation_toolbar",
+                    action: compression.expandToolbar
+                )
+            } else {
+                toolbarColumn
+            }
+        }
+        // full height, so the tab bar compression decision matches this screen's toolkit
+        .onAppear { compression.setToolbarHeight(fullToolbarHeight) }
+        .onChange(of: fullToolbarHeight) { compression.setToolbarHeight($0) }
+    }
+
+    private var toolbarColumn: some View {
+        let navButtonConfig = getNavigationButtonConfig()
+        return VStack(spacing: Spacing.M) {
+            if shouldShowShortcut {
+                SideBarButton(
+                    icon: navButtonConfig.icon,
+                    tintColor: tintColor,
+                    showBadge: showBadge,
+                    disabled: isLoading,
+                    action: navButtonConfig.onPress
+                )
+            }
+            SideBarGroup(tintColor: tintColor, itemCount: showHelpCenter ? 2 : 1) {
+                if showHelpCenter {
+                    SideBarGroupItem(
+                        icon: "help_center",
+                        tintColor: tintColor,
+                        accessibilityId: "btn_navigation_help_center",
+                        action: onPressHelpCenter
+                    )
+                }
+                SideBarGroupItem(
+                    icon: closeIcon,
+                    tintColor: tintColor,
+                    accessibilityId: "btn_navigation_close",
+                    action: onPressClose
+                )
+            }
+        }
+    }
+
+    private var horizontalBody: some View {
         let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
         let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
         let navButtonConfig = getNavigationButtonConfig()
-        let showBadge = headerRight?.tools.contains { group in
-            group.items.contains { $0.showBadge }
-        } ?? false
 
-        HStack(alignment: .center, spacing: 0) {
+        return HStack(alignment: .center, spacing: 0) {
             if shouldShowShortcut {
                 NavigationButton(
                     disabled: isLoading,
@@ -162,7 +249,7 @@ struct ToolkitNavigationHeaderRight: View {
             }
 
             HStack(alignment: .center, spacing: 0) {
-                if environment.applicationContext != nil {
+                if showHelpCenter {
                     Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
                         .padding(4)
                         .onTapGesture {
@@ -174,7 +261,7 @@ struct ToolkitNavigationHeaderRight: View {
                         .frame(width: 0.5, height: 12)
                 }
 
-                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
+                Icon(source: closeIcon, size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
                     .onTapGesture {
                         onPressClose()
@@ -189,8 +276,5 @@ struct ToolkitNavigationHeaderRight: View {
             )
             .padding(.leading, Spacing.S)
         }
-        .onAppear {
-            loadFavoriteState()
-        }
     }
 }

package/ios/Application/Navigation/component/SideBar.swift

@@ -0,0 +1,155 @@
+//
+//  SideBar.swift
+//  MoMoUIKits
+//
+//  iPhone Duo: back and toolkit leave the header bar for a column in the side safe area,
+//  as the system bars do. Port of RN `SideBarButton.tsx` + `useSideBarItemStyle`.
+//
+
+import SwiftUI
+
+private let sideBarIconSize: CGFloat = 24
+
+/// Toolkit data when `headerRight` renders the kit toolkit; nil for a custom header right.
+func toolkitHeaderRight(_ headerRight: (() -> any View)?) -> (data: HeaderRightData?, tintColor: Color?)? {
+    guard let view = headerRight?() else { return nil }
+    if let toolkit = view as? HeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
+    if let toolkit = view as? NavigationHeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
+    return nil
+}
+
+/// The back button and toolkit column, placed in window coordinates over the side strip.
+struct HeaderSideBar: View {
+    let sideBar: SideBarLayout
+    let goBack: (() -> Void)?
+    let toolkit: (data: HeaderRightData?, tintColor: Color?)?
+    let headerColor: HeaderColor
+    /// What footer / tab bar / home indicator take from the bottom, gap included; the column stays above it.
+    let bottomInset: CGFloat
+
+    @Environment(\.screenLayout) private var layout
+    @State private var columnHeight: CGFloat = 0
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    private var top: CGFloat {
+        let maxY = layout.height - bottomInset - columnHeight
+        return max(min(sideBar.top, maxY), 0)
+    }
+
+    var body: some View {
+        VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
+            if let goBack {
+                SideBarButton(
+                    icon: "arrow-back",
+                    tintColor: headerColor.tintIconColor,
+                    accessibilityId: "btn_navigation_back",
+                    action: goBack
+                )
+            } else {
+                // keep the slot so the toolkit does not jump between root and pushed screens
+                Color.clear.frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
+            }
+            if let toolkit {
+                ToolkitNavigationHeaderRight(
+                    headerRight: toolkit.data,
+                    tintColor: toolkit.tintColor ?? headerColor.tintIconColor,
+                    vertical: true
+                )
+            }
+        }
+        .padding(isRight ? .leading : .trailing, Spacing.M)
+        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
+        .background(
+            GeometryReader { proxy in
+                Color.clear
+                    .onAppear { columnHeight = proxy.size.height }
+                    .onChange(of: proxy.size.height) { columnHeight = $0 }
+            }
+        )
+        .padding(.top, top)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
+        .ignoresSafeArea()
+    }
+}
+
+/// Dark glass under light icons (banner headers), light glass otherwise.
+private struct SideBarGlass<S: Shape>: ViewModifier {
+    let tintColor: Color?
+    let shape: S
+
+    private var isDark: Bool { tintColor == Colors.black01 || tintColor == .white }
+
+    func body(content: Content) -> some View {
+        if isDark {
+            content
+                .background(shape.fill(Colors.black20.opacity(0.5)))
+                .overlay(shape.stroke(Colors.black01.opacity(0.2), lineWidth: 0.5))
+        } else {
+            content
+                .background(
+                    shape.fill(Colors.black01.opacity(0.85))
+                        .shadow(color: Color.black.opacity(0.12), radius: 4, x: 0, y: 2)
+                )
+                .overlay(shape.stroke(Colors.black20.opacity(0.08), lineWidth: 0.5))
+        }
+    }
+}
+
+/// 48pt glass circle for a single side bar control.
+struct SideBarButton: View {
+    let icon: String
+    var tintColor: Color?
+    var showBadge: Bool = false
+    var disabled: Bool = false
+    var accessibilityId: String?
+    let action: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: { if !disabled { action() } }) {
+            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
+                .frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
+                .modifier(SideBarGlass(tintColor: tintColor, shape: Circle()))
+                .overlay(alignment: .topTrailing) {
+                    if showBadge {
+                        BadgeDot(size: .small).offset(x: -Spacing.XXS, y: Spacing.XXS)
+                    }
+                }
+        }
+        .buttonStyle(.plain)
+        .accessibilityIdentifier(accessibilityId ?? "")
+    }
+}
+
+/// 48pt wide glass capsule grouping related controls, one item per 50pt.
+struct SideBarGroup<Content: View>: View {
+    var tintColor: Color?
+    let itemCount: Int
+    @ViewBuilder let content: () -> Content
+
+    var body: some View {
+        VStack(spacing: 0) { content() }
+            .frame(
+                width: DuoMetrics.controlSize,
+                height: itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
+            )
+            .modifier(SideBarGlass(tintColor: tintColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
+    }
+}
+
+struct SideBarGroupItem: View {
+    let icon: String
+    var tintColor: Color?
+    let accessibilityId: String
+    let action: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: action) {
+            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .contentShape(Rectangle())
+        }
+        .buttonStyle(.plain)
+        .accessibilityIdentifier(accessibilityId)
+    }
+}

package/ios/Application/StackScreen.swift

@@ -102,8 +102,14 @@ public struct StackScreen<Content: View>: View {
     @State private var keyboardHeight: CGFloat = 0
     @State private var headerRightWidth: CGFloat = 0
     @State private var isBottomTabRoot: Bool = false
+    @State private var headerHide: CGFloat = 0
+    @State private var lastScrollOffset: CGFloat = 0
+    @State private var headerSettle: Task<Void, Never>?
 
     @Environment(\.applicationEnvironment) private var appEnv
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.duoTabBarInsets) private var duoTabBarInsets
+    @State private var footerHeight: CGFloat = 0
 
     // Auto-tracking state (mirrors Compose's `remember { ScreenTrackingState() }` +
     // the once-computed push/back `action`).
@@ -125,6 +131,63 @@ public struct StackScreen<Content: View>: View {
 
     private static var headerHeight: CGFloat { 52 }
 
+    private var toolkit: (data: HeaderRightData?, tintColor: Color?)? { toolkitHeaderRight(headerRight) }
+
+    private var showsSideBar: Bool {
+        layout.sideBar != nil && headerType != .none && !isBottomTabRoot && (goBack != nil || toolkit != nil)
+    }
+
+    /// iPhone Duo: content scrolls under a glass header instead of starting below it.
+    private var useDuoGlass: Bool {
+        layout.sideBar != nil && headerType != .none && animatedHeader == nil
+            && inputSearchProps == nil && !headerTransparent && !fullScreenContent
+    }
+
+    /// iPhone Duo: the header leaves with the content and slides back in on a reverse scroll
+    /// (RN DuoQuickReturnHeader). The side bar is drawn apart from the header, so it stays put.
+    private var useQuickReturn: Bool {
+        layout.sideBar != nil && scrollable && (useDuoGlass || animatedHeader != nil)
+    }
+
+    private func updateHeaderHide(_ offset: CGFloat) {
+        let delta = offset - lastScrollOffset
+        lastScrollOffset = offset
+        guard useQuickReturn, offset > 0 else {
+            if headerHide != 0 { headerHide = 0 }
+            return
+        }
+        headerHide = min(max(headerHide + delta, 0), layout.headerHeight)
+        settleHeaderWhenScrollStops()
+    }
+
+    /// A half-shown header settles fully in or out. SwiftUI before iOS 18 reports no scroll
+    /// phase, so the scroll counts as ended once the offset stops changing.
+    private func settleHeaderWhenScrollStops() {
+        headerSettle?.cancel()
+        headerSettle = Task { @MainActor in
+            try? await Task.sleep(nanoseconds: 150_000_000)
+            guard !Task.isCancelled else { return }
+            let height = layout.headerHeight
+            // within the first header height the header still sits on the content
+            guard scrollOffset >= height, headerHide > 0, headerHide < height else { return }
+            withAnimation(.easeOut(duration: 0.2)) {
+                headerHide = headerHide > height / 2 ? height : 0
+            }
+        }
+    }
+
+    /// What the footer, tab bar or home indicator takes from the bottom of the window, gap included.
+    private var bottomBarsHeight: CGFloat {
+        if footer != nil { return footerHeight + NavigationFooter.safeAreaBottom + Spacing.XL }
+        if duoTabBarInsets.sideBarReserve > 0 { return duoTabBarInsets.sideBarReserve }
+        return NavigationFooter.navigationBarInset + Spacing.XL
+    }
+
+    /// Keyboard frames are in screen coordinates; UIScreen stays on the outer display on iPhone Duo.
+    private var keyboardReferenceHeight: CGFloat {
+        layout.isIPhoneDuo ? layout.height : UIScreen.main.bounds.height
+    }
+
     /// Extra top space reserved inside the content so the animated search bar has
     /// room below the header at scroll 0; it shrinks to 0 as the bar slides up.
     private var animatedSearchInset: CGFloat {
@@ -163,9 +226,18 @@ public struct StackScreen<Content: View>: View {
                             hasFooter: footer != nil,
                             scrollOffset: scrollOffset
                         )
+                        .padding(.bottom, footer == nil ? duoTabBarInsets.overlay : 0)
                     }
 
                     NavigationFooter(footerComponent: footer, keyboardSize: keyboardSize)
+                        .padding(.bottom, duoTabBarInsets.overlay)
+                        .background(
+                            GeometryReader { proxy in
+                                Color.clear
+                                    .onAppear { footerHeight = proxy.size.height }
+                                    .onChange(of: proxy.size.height) { footerHeight = $0 }
+                            }
+                        )
                 }
 
                 // Animated search bar overlay (mirrors Compose's SearchAnimated layer).
@@ -176,11 +248,29 @@ public struct StackScreen<Content: View>: View {
                         hiddenBack: !isBack,
                         hasHeaderRight: headerRight != nil,
                         headerRightWidth: headerRightWidth,
-                        headerHeight: Self.headerHeight
+                        headerHeight: Self.headerHeight,
+                        useSideBar: layout.sideBar != nil,
+                        hasToolkit: toolkit != nil
+                    )
+                }
+
+                if showsSideBar, let sideBar = layout.sideBar {
+                    HeaderSideBar(
+                        sideBar: sideBar,
+                        goBack: goBack,
+                        toolkit: toolkit,
+                        headerColor: getHeaderColor(
+                            isAnimated: animatedHeader != nil,
+                            isSurface: animatedHeader?.isSurface ?? true,
+                            opacity: scrollOpacity,
+                            tintColor: tintColor
+                        ),
+                        bottomInset: bottomBarsHeight
                     )
                 }
             }
             .ignoresSafeArea(.keyboard, edges: .bottom)
+            .onChange(of: scrollOffset) { updateHeaderHide($0) }
             .onPreferenceChange(HeaderRightWidthKey.self) { width in
                 if headerRightWidth != width { headerRightWidth = width }
             }
@@ -191,7 +281,7 @@ public struct StackScreen<Content: View>: View {
                 guard useAvoidKeyboard,
                       let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
                 withAnimation(.easeOut(duration: 0.25)) {
-                    keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+                    keyboardHeight = keyboardReferenceHeight - endFrame.origin.y
                 }
             }
             // Mirrors Compose's `hideKeyboardOnTap()`: a simultaneous gesture so
@@ -246,16 +336,27 @@ public struct StackScreen<Content: View>: View {
                     scrollOffset: $scrollOffset,
                     scrollToTopCallback: scrollToTopCallback,
                     animatedSearchInset: animatedSearchInset,
+                    bottomInset: duoTabBarInsets.overlay,
                     content: { animatedHeroBody(animatedHeader) }
                 )
                 .edgesIgnoringSafeArea(.all)
 
                 header
                     .background(
-                        Colors.black01
-                            .opacity(scrollOpacity)
-                            .edgesIgnoringSafeArea(.top)
+                        Group {
+                            if layout.sideBar != nil {
+                                // glass shows once the banner has scrolled under the header
+                                Color.clear.modifier(DuoBarMaterial(
+                                    shape: Rectangle(),
+                                    visible: scrollOffset > heroGlassStart(animatedHeader)
+                                ))
+                            } else {
+                                Colors.black01.opacity(scrollOpacity)
+                            }
+                        }
+                        .edgesIgnoringSafeArea([.top, .horizontal])
                     )
+                    .offset(y: -headerHide)
                     .zIndex(100)
             }
         } else if headerTransparent && fullScreenContent {
@@ -271,9 +372,36 @@ public struct StackScreen<Content: View>: View {
                     )
                     .zIndex(100)
 
-                StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, content: content)
+                StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, bottomInset: duoTabBarInsets.overlay, content: { duoInsetContent })
                     .edgesIgnoringSafeArea(.all)
             }
+        } else if useDuoGlass {
+            ZStack(alignment: .top) {
+                DuoScrollGradient(
+                    scrollOffset: scrollOffset,
+                    headerHeight: layout.headerHeight,
+                    extended: headerType == .extended,
+                    followScroll: useQuickReturn
+                )
+
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    topInset: layout.headerHeight - layout.insets.top,
+                    bottomInset: duoTabBarInsets.overlay,
+                    content: content
+                )
+
+                header
+                    .background(
+                        Color.clear
+                            .modifier(DuoBarMaterial(shape: Rectangle(), visible: scrollOffset > 0))
+                            .edgesIgnoringSafeArea([.top, .horizontal])
+                    )
+                    .offset(y: -headerHide)
+                    .zIndex(100)
+            }
         } else {
             header
                 .background(
@@ -283,28 +411,40 @@ public struct StackScreen<Content: View>: View {
                         headerTransparent: headerTransparent,
                         fullScreenContent: fullScreenContent
                     )
-                    .edgesIgnoringSafeArea(.top)
+                    .edgesIgnoringSafeArea([.top, .horizontal])
                 )
 
-            StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, content: content)
+            StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, bottomInset: duoTabBarInsets.overlay, content: content)
         }
     }
 
+    /// Edge-to-edge branches lay out outside the safe area; iPhone Duo content still keeps
+    /// clear of the side strips, as RN's Screen does.
+    private var duoInsetContent: some View {
+        content()
+            .padding(.leading, layout.insetLeft)
+            .padding(.trailing, layout.insetRight)
+    }
+
+    private func heroGlassStart(_ animatedHeader: AnimatedHeader) -> CGFloat {
+        max(layout.width / animatedHeader.aspectRatio.value - layout.headerHeight, 0)
+    }
+
     /// Hero image + body for an animated header. The image fills the width at its
     /// aspect-ratio height; the body is offset below the header band so it overlaps
     /// the lower part of the image (mirrors Compose's image box + padded content).
     @ViewBuilder
     private func animatedHeroBody(_ animatedHeader: AnimatedHeader) -> some View {
-        let width = UIScreen.main.bounds.width
+        let width = layout.width
         let imageHeight = width / animatedHeader.aspectRatio.value
-        let contentTopInset = safeAreaTopInset() + HEADER_HEIGHT + layoutOffset
+        let contentTopInset = layout.headerHeight + layoutOffset
 
         ZStack(alignment: .top) {
             animatedHeader.composable(scrollOffset)
                 .frame(width: width, height: imageHeight)
                 .clipped()
 
-            content()
+            duoInsetContent
                 .padding(.top, contentTopInset)
         }
         .frame(maxWidth: .infinity, alignment: .top)
@@ -343,6 +483,10 @@ private struct StackScreenContent<Content: View>: View {
     /// Extra top space reserved for the animated search bar (mirrors Compose's
     /// MainContent animated top spacer). Zero for non-animated screens.
     var animatedSearchInset: CGFloat = 0
+    /// Room for a header the content scrolls under (iPhone Duo glass header).
+    var topInset: CGFloat = 0
+    /// Room for a bar that overlays the content (iPhone Duo floating tab bar).
+    var bottomInset: CGFloat = 0
     let content: () -> Content
 
     private let topAnchorID = "stack_screen_top_anchor"
@@ -369,13 +513,17 @@ private struct StackScreenContent<Content: View>: View {
                                     }
                             })
 
-                        if animatedSearchInset > 0 {
-                            Spacer().frame(height: animatedSearchInset)
+                        if animatedSearchInset + topInset > 0 {
+                            Spacer().frame(height: animatedSearchInset + topInset)
                         }
 
                         VStack {
                             content()
                         }
+
+                        if bottomInset > 0 {
+                            Spacer().frame(height: bottomInset)
+                        }
                     }
                 }
                 .coordinateSpace(name: scrollSpace)
@@ -390,6 +538,8 @@ private struct StackScreenContent<Content: View>: View {
             }
         } else {
             content()
+                .padding(.top, topInset)
+                .padding(.bottom, bottomInset)
         }
     }
 }
@@ -407,16 +557,23 @@ private struct SearchAnimatedHeader: View {
     let hasHeaderRight: Bool
     let headerRightWidth: CGFloat
     let headerHeight: CGFloat
+    var useSideBar: Bool = false
+    var hasToolkit: Bool = false
+
+    @Environment(\.screenLayout) private var layout
 
     var body: some View {
         let scroll = max(scrollOffset, 0)
 
-        // Insets are measured from the safe-area top (status bar handled by layout).
-        let minTop: CGFloat = 0
-        let maxTop = headerHeight
+        // Insets are measured from the safe-area top; collapsed, the search is centered in the bar row.
+        let rowTop = layout.headerStatusBarHeight - layout.insets.top
+        let minTop = rowTop + (layout.headerBarHeight - headerHeight) / 2
+        let maxTop = layout.headerHeight - layout.insets.top
         let minSide = Spacing.M
-        let maxStart: CGFloat = hiddenBack ? Spacing.M : 48
-        let maxEnd = headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M)
+        let maxStart: CGFloat = hiddenBack || useSideBar ? Spacing.M : 48
+        let maxEnd: CGFloat = useSideBar && hasToolkit
+            ? Spacing.M
+            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M)
 
         let top = min(max(maxTop - scroll, minTop), maxTop)
         let start = min(max(minSide + scroll, minSide), maxStart)