Add option to toggle sidebar visibility

This commit is contained in:
david-swift 2023-12-20 06:07:26 +01:00
parent 3a0897cbb5
commit 396cbbf23c
5 changed files with 68 additions and 22 deletions

View File

@ -17,6 +17,10 @@ The split view's main content.
Whether the sidebar is at the trailing position. Whether the sidebar is at the trailing position.
### `visible`
Whether the sidebar is visible.
### `sidebarID` ### `sidebarID`
The sidebar content's id. The sidebar content's id.
@ -26,10 +30,11 @@ The sidebar content's id.
The main content's id. The main content's id.
## Methods ## Methods
### `init(sidebar:content:)` ### `init(visible:sidebar:content:)`
Initialize an overlay split view. Initialize an overlay split view.
- Parameters: - Parameters:
- visible: Whether the sidebar is visible.
- sidebar: The sidebar content. - sidebar: The sidebar content.
- content: The main content. - content: The main content.
@ -55,3 +60,4 @@ Update the view storage of the overlay split view widget.
### `updatePosition(_:)` ### `updatePosition(_:)`
Update the sidebar's position in the split view. Update the sidebar's position in the split view.
- Parameter splitView: The overlay split view.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -16,6 +16,8 @@ public struct OverlaySplitView: Widget {
var content: () -> Body var content: () -> Body
/// Whether the sidebar is at the trailing position. /// Whether the sidebar is at the trailing position.
var trailing = false var trailing = false
/// Whether the sidebar is visible.
var visible: Bool
/// The sidebar content's id. /// The sidebar content's id.
let sidebarID = "sidebar" let sidebarID = "sidebar"
@ -24,11 +26,17 @@ public struct OverlaySplitView: Widget {
/// Initialize an overlay split view. /// Initialize an overlay split view.
/// - Parameters: /// - Parameters:
/// - visible: Whether the sidebar is visible.
/// - sidebar: The sidebar content. /// - sidebar: The sidebar content.
/// - content: The main content. /// - content: The main content.
public init(@ViewBuilder sidebar: @escaping () -> Body, @ViewBuilder content: @escaping () -> Body) { public init(
visible: Bool = true,
@ViewBuilder sidebar: @escaping () -> Body,
@ViewBuilder content: @escaping () -> Body
) {
self.sidebar = sidebar self.sidebar = sidebar
self.content = content self.content = content
self.visible = visible
} }
/// The position of the sidebar. /// The position of the sidebar.
@ -77,8 +85,14 @@ public struct OverlaySplitView: Widget {
} }
/// Update the sidebar's position in the split view. /// Update the sidebar's position in the split view.
/// - Parameter splitView: The overlay split view.
func updatePosition(_ splitView: Libadwaita.OverlaySplitView) { func updatePosition(_ splitView: Libadwaita.OverlaySplitView) {
_ = splitView.position(trailing: trailing) _ = splitView.position(trailing: trailing)
if visible {
splitView.showSidebar()
} else {
splitView.hideSidebar()
}
} }
} }

View File

@ -55,6 +55,9 @@ public struct Toggle: Widget {
public func container(modifiers: [(View) -> View]) -> ViewStorage { public func container(modifiers: [(View) -> View]) -> ViewStorage {
let toggle: Libadwaita.ToggleButton = .init(label ?? "") let toggle: Libadwaita.ToggleButton = .init(label ?? "")
updateState(toggle: toggle) updateState(toggle: toggle)
toggle.handler {
self.isOn.toggle()
}
return .init(toggle) return .init(toggle)
} }

View File

@ -57,11 +57,12 @@ struct Demo: App {
@State private var selection: Page = .welcome @State private var selection: Page = .welcome
@State private var toast: Signal = .init() @State private var toast: Signal = .init()
@State private var sidebarVisible = true
var window: GTUIApplicationWindow var window: GTUIApplicationWindow
var app: GTUIApp! var app: GTUIApp!
var view: Body { var view: Body {
NavigationSplitView { OverlaySplitView(visible: sidebarVisible) {
ScrollView { ScrollView {
List(Page.allCases, selection: $selection) { element in List(Page.allCases, selection: $selection) { element in
Text(element.label) Text(element.label)
@ -72,21 +73,7 @@ struct Demo: App {
} }
.topToolbar { .topToolbar {
HeaderBar.end { HeaderBar.end {
Menu(icon: .default(icon: .openMenu), app: app, window: window) { menu
MenuButton("New Window", window: false) {
app.addWindow("main")
}
.keyboardShortcut("n".ctrl())
MenuButton("Close Window") {
window.close()
}
.keyboardShortcut("w".ctrl())
MenuSection {
MenuButton("About") { app.addWindow("about", parent: window) }
MenuButton("Quit", window: false) { app.quit() }
.keyboardShortcut("q".ctrl())
}
}
} }
} }
.navigationTitle("Demo") .navigationTitle("Demo")
@ -95,16 +82,52 @@ struct Demo: App {
selection.label, selection.label,
icon: selection.icon, icon: selection.icon,
description: selection.description description: selection.description
) { ) { selection.view(app: app, window: window, toast: toast) }
selection.view(app: app, window: window, toast: toast)
}
.topToolbar { .topToolbar {
HeaderBar.empty() HeaderBar {
Toggle(icon: .default(icon: .sidebarShow), isOn: $sidebarVisible)
} end: {
if sidebarVisible {
Text("")
.transition(.crossfade)
} else {
menu
.transition(.crossfade)
}
}
.headerBarTitle {
if sidebarVisible {
Text("")
.transition(.crossfade)
} else {
Text("Swift Adwaita Demo")
.style("heading")
.transition(.crossfade)
}
}
} }
.toast("This is a toast!", signal: toast) .toast("This is a toast!", signal: toast)
} }
} }
var menu: View {
Menu(icon: .default(icon: .openMenu), app: app, window: window) {
MenuButton("New Window", window: false) {
app.addWindow("main")
}
.keyboardShortcut("n".ctrl())
MenuButton("Close Window") {
window.close()
}
.keyboardShortcut("w".ctrl())
MenuSection {
MenuButton("About") { app.addWindow("about", parent: window) }
MenuButton("Quit", window: false) { app.quit() }
.keyboardShortcut("q".ctrl())
}
}
}
} }
} }