diff options
| author | David Hill <[email protected]> | 2026-03-12 23:23:03 +0000 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-03-13 10:17:56 -0500 |
| commit | ffde837e8318900e92761ca8a7d9a0621143e04b (patch) | |
| tree | ba3c9f6aac7931d8ae9f9e956825241770588e37 /packages/app/src/components | |
| parent | 536abea2e2ed3bee160cf16a12b23558ed6e3fa3 (diff) | |
| download | opencode-ffde837e8318900e92761ca8a7d9a0621143e04b.tar.gz opencode-ffde837e8318900e92761ca8a7d9a0621143e04b.zip | |
fix(app): animate titlebar controls on sidebar open
Diffstat (limited to 'packages/app/src/components')
| -rw-r--r-- | packages/app/src/components/titlebar.tsx | 52 |
1 files changed, 34 insertions, 18 deletions
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index 3ab811e92..227670e42 100644 --- a/packages/app/src/components/titlebar.tsx +++ b/packages/app/src/components/titlebar.tsx @@ -217,26 +217,42 @@ export function Titlebar() { </TooltipKeybind> <div class="hidden xl:flex items-center shrink-0"> <Show when={params.dir}> - <TooltipKeybind - placement="bottom" - title={language.t("command.session.new")} - keybind={command.keybind("session.new")} - openDelay={2000} + <div + class="overflow-hidden flex items-center shrink-0 transition-[width,opacity,transform]" + classList={{ + "w-8 opacity-100 translate-x-0": !layout.sidebar.opened(), + "w-0 opacity-0 -translate-x-1 pointer-events-none": layout.sidebar.opened(), + "duration-180 ease-out": !layout.sidebar.opened(), + "duration-120 ease-in": layout.sidebar.opened(), + }} + aria-hidden={layout.sidebar.opened() ? "true" : undefined} > - <Button - variant="ghost" - icon={creating() ? "new-session-active" : "new-session"} - class="titlebar-icon w-8 h-6 p-0 box-border" - onClick={() => { - if (!params.dir) return - navigate(`/${params.dir}/session`) - }} - aria-label={language.t("command.session.new")} - aria-current={creating() ? "page" : undefined} - /> - </TooltipKeybind> + <TooltipKeybind + placement="bottom" + title={language.t("command.session.new")} + keybind={command.keybind("session.new")} + openDelay={2000} + > + <Button + variant="ghost" + icon={creating() ? "new-session-active" : "new-session"} + class="titlebar-icon w-8 h-6 p-0 box-border" + disabled={layout.sidebar.opened()} + tabIndex={layout.sidebar.opened() ? -1 : undefined} + onClick={() => { + if (!params.dir) return + navigate(`/${params.dir}/session`) + }} + aria-label={language.t("command.session.new")} + aria-current={creating() ? "page" : undefined} + /> + </TooltipKeybind> + </div> </Show> - <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}> + <div + class="flex items-center gap-0 transition-[margin] duration-180 ease-out" + classList={{ "ml-1": !!params.dir && !layout.sidebar.opened() }} + > <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}> <Button variant="ghost" |