apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-13 17:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve app layout

Browse source
This commit is contained in:
ramnique 2025-01-18 08:51:29 +05:30
parent 0e8921c1c8
commit a41fe26d4b
7 changed files with 21 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/rowboat/app/projects/[projectId]/layout.tsx
View file

@ -9,7 +9,7 @@ export default async function Layout({
}) {
return <div className="flex h-full">
<Nav projectId={params.projectId} />
<div className="grow p-4 overflow-auto">
<div className="grow p-4 overflow-auto bg-white rounded-tl-lg">
{children}
</div>
</div >;

17
apps/rowboat/app/projects/[projectId]/menu.tsx
View file

@ -3,17 +3,17 @@ import { usePathname } from "next/navigation";
import { Tooltip } from "@nextui-org/react";
import Link from "next/link";
import clsx from "clsx";
import { WorkflowIcon } from "@/app/lib/components/icons";
import { SettingsIcon, WorkflowIcon } from "lucide-react";
function NavLink({ href, label, icon, collapsed, selected = false }: { href: string, label: string, icon: React.ReactNode, collapsed: boolean, selected?: boolean }) {
return <Link
href={href}
className={clsx("flex px-2 py-3 gap-3 items-center rounded-lg hover:bg-gray-200", {
"bg-gray-200": selected,
className={clsx("flex px-2 py-2 gap-2 items-center rounded-lg text-sm hover:text-black", {
"text-black": selected,
"justify-center": collapsed,
})}
>
{collapsed && Tooltip && <Tooltip content={label} showArrow placement="right">
{collapsed && <Tooltip content={label} showArrow placement="right">
<div className="shrink-0">
{icon}
</div>
@ -36,7 +36,7 @@ export default function Menu({
}) {
const pathname = usePathname();
return <div className="flex flex-col">
return <div className="flex flex-col text-gray-500">
{/* <NavLink
href={`/projects/${projectId}/playground`}
label="Playground"
@ -50,7 +50,7 @@ export default function Menu({
href={`/projects/${projectId}/workflow`}
label="Workflow"
collapsed={collapsed}
icon={<WorkflowIcon />}
icon={<WorkflowIcon size={16} />}
selected={pathname.startsWith(`/projects/${projectId}/workflow`)}
/>
{/* <NavLink
@ -66,10 +66,7 @@ export default function Menu({
href={`/projects/${projectId}/config`}
label="Config"
collapsed={collapsed}
icon=<svg className="w-[24px] h-[24px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z" />
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
</svg>
icon={<SettingsIcon size={16} />}
selected={pathname.startsWith(`/projects/${projectId}/config`)}
/>
{/*<NavLink

23
apps/rowboat/app/projects/[projectId]/nav.tsx
View file

@ -7,6 +7,7 @@ import Menu from "./menu";
import { Project } from "@/app/lib/types";
import { z } from "zod";
import { getProjectConfig } from "@/app/actions";
import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
export function Nav({
projectId,
@ -37,27 +38,23 @@ export function Nav({
setCollapsed(!collapsed);
}
return <div className={clsx("bg-gray-50 shrink-0 flex flex-col gap-6 border-r-1 border-gray-100 relative p-4", {
"w-64": !collapsed,
"w-16": collapsed
return <div className={clsx("shrink-0 flex flex-col gap-2 border-r-1 border-gray-100 relative p-2", {
"w-40": !collapsed,
"w-10": collapsed
})}>
<Tooltip content={collapsed ? "Expand" : "Collapse"} showArrow placement="right">
<button onClick={toggleCollapse} className="absolute bottom-[100px] right-[-16px] rounded-full border bg-white text-gray-400 border-gray-400 hover:border-black hover:text-black w-[28px] h-[28px] shadow-sm">
{!collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m17 16-4-4 4-4m-6 8-4-4 4-4" />
</svg>}
{collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>}
<button onClick={toggleCollapse} className="absolute bottom-[50px] left-2 text-gray-400 hover:text-black w-[28px] h-[28px]">
{!collapsed && <ChevronsLeftIcon size={16} className="m-auto" />}
{collapsed && <ChevronsRightIcon size={16} className="m-auto" />}
</button>
</Tooltip>
{!collapsed && project && <div className="flex flex-col gap-1">
<Tooltip content="Change project" showArrow placement="bottom-end">
<Link className="relative group flex flex-col px-3 py-3 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
<div className="absolute top-[-7px] left-1 px-2 bg-gray-50 text-xs text-gray-400 group-hover:text-gray-600">
<Link className="relative group flex flex-col px-2 py-2 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
<div className="absolute top-[-7px] left-1 px-1 bg-gray-100 text-xs text-gray-400 group-hover:text-gray-600">
Project
</div>
<div className="truncate">
<div className="truncate text-sm">
{project.name}
</div>
</Link>