fix(ui): remove left sidebar and back/forward nav when no project
David Hill
parent
e718db624f
commit
eb0a67695e
|
|
@ -58,6 +58,7 @@ export function Titlebar() {
|
|||
})
|
||||
|
||||
const path = () => `${location.pathname}${location.search}${location.hash}`
|
||||
const home = createMemo(() => !params.dir)
|
||||
const creating = createMemo(() => {
|
||||
if (!params.dir) return false
|
||||
if (params.id) return false
|
||||
|
|
@ -175,6 +176,7 @@ export function Titlebar() {
|
|||
>
|
||||
<Show when={mac()}>
|
||||
<div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
|
||||
<Show when={!home()}>
|
||||
<div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
|
||||
<IconButton
|
||||
icon="menu"
|
||||
|
|
@ -186,7 +188,9 @@ export function Titlebar() {
|
|||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
<Show when={!mac()}>
|
||||
<Show when={!home()}>
|
||||
<div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
|
||||
<IconButton
|
||||
icon="menu"
|
||||
|
|
@ -198,7 +202,9 @@ export function Titlebar() {
|
|||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<Show when={!home()}>
|
||||
<TooltipKeybind
|
||||
class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
|
||||
placement="bottom"
|
||||
|
|
@ -282,6 +288,7 @@ export function Titlebar() {
|
|||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ export default function Layout(props: ParentProps) {
|
|||
let scrollContainerRef: HTMLDivElement | undefined
|
||||
|
||||
const params = useParams()
|
||||
const home = createMemo(() => !params.dir)
|
||||
const globalSDK = useGlobalSDK()
|
||||
const globalSync = useGlobalSync()
|
||||
const layout = useLayout()
|
||||
|
|
@ -2241,7 +2242,7 @@ export default function Layout(props: ParentProps) {
|
|||
const sidebarContent = (mobile?: boolean) => (
|
||||
<SidebarContent
|
||||
mobile={mobile}
|
||||
opened={() => layout.sidebar.opened()}
|
||||
opened={() => (home() ? false : layout.sidebar.opened())}
|
||||
aimMove={aim.move}
|
||||
projects={projects}
|
||||
renderProject={(project) => (
|
||||
|
|
@ -2285,7 +2286,7 @@ export default function Layout(props: ParentProps) {
|
|||
"absolute inset-y-0 left-0": true,
|
||||
"z-10": true,
|
||||
}}
|
||||
style={{ width: `${Math.max(layout.sidebar.width(), 244)}px` }}
|
||||
style={{ width: home() ? "4rem" : `${Math.max(layout.sidebar.width(), 244)}px` }}
|
||||
ref={(el) => {
|
||||
setState("nav", el)
|
||||
}}
|
||||
|
|
@ -2294,13 +2295,14 @@ export default function Layout(props: ParentProps) {
|
|||
}}
|
||||
onMouseLeave={() => {
|
||||
aim.reset()
|
||||
if (home()) return
|
||||
if (!sidebarHovering()) return
|
||||
|
||||
arm()
|
||||
}}
|
||||
>
|
||||
<div class="@container w-full h-full contain-strict">{sidebarContent()}</div>
|
||||
<Show when={layout.sidebar.opened()}>
|
||||
<Show when={!home() && layout.sidebar.opened()}>
|
||||
<div onPointerDown={() => setState("sizing", true)}>
|
||||
<ResizeHandle
|
||||
direction="horizontal"
|
||||
|
|
@ -2325,6 +2327,7 @@ export default function Layout(props: ParentProps) {
|
|||
style={{ left: "calc(4rem + 12px)" }}
|
||||
/>
|
||||
|
||||
<Show when={!home()}>
|
||||
<div class="xl:hidden">
|
||||
<div
|
||||
classList={{
|
||||
|
|
@ -2349,22 +2352,29 @@ export default function Layout(props: ParentProps) {
|
|||
{sidebarContent(true)}
|
||||
</nav>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div
|
||||
classList={{
|
||||
"absolute inset-0": true,
|
||||
"xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
|
||||
"xl:inset-y-0 xl:right-0": true,
|
||||
"xl:left-[var(--main-left)]": true,
|
||||
"z-20": true,
|
||||
"transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
|
||||
!state.sizing,
|
||||
}}
|
||||
style={{
|
||||
"--main-left": layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "4rem",
|
||||
"--main-left": home()
|
||||
? "4rem"
|
||||
: layout.sidebar.opened()
|
||||
? `${Math.max(layout.sidebar.width(), 244)}px`
|
||||
: "4rem",
|
||||
}}
|
||||
>
|
||||
<main
|
||||
classList={{
|
||||
"size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
|
||||
"size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base": true,
|
||||
"xl:border-l xl:rounded-tl-[12px]": true,
|
||||
}}
|
||||
>
|
||||
<Show when={!autoselecting()} fallback={<div class="size-full" />}>
|
||||
|
|
@ -2373,6 +2383,7 @@ export default function Layout(props: ParentProps) {
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<Show when={!home()}>
|
||||
<div
|
||||
classList={{
|
||||
"hidden xl:flex absolute inset-y-0 left-16 z-30": true,
|
||||
|
|
@ -2396,7 +2407,9 @@ export default function Layout(props: ParentProps) {
|
|||
<SidebarPanel project={peekProject} merged={false} />
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!home()}>
|
||||
<div
|
||||
classList={{
|
||||
"hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
|
||||
|
|
@ -2410,6 +2423,7 @@ export default function Layout(props: ParentProps) {
|
|||
>
|
||||
<div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
{import.meta.env.DEV && <DebugBar />}
|
||||
|
|
|
|||
Loading…
Reference in New Issue