starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-21 16:21:25 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Flatten migrations, kvs lib, fix tabs

Browse Source
This commit is contained in:
Gregory Schier
2023-03-17 08:36:21 -07:00
parent 637c220475
commit 10616001df
23 changed files with 406 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src-web/components/Sidebar.tsx
View File

@@ -3,10 +3,11 @@ import React, { useRef, useState } from 'react';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useKeyValues } from '../hooks/useKeyValues';
import { useKeyValue } from '../hooks/useKeyValue';
import { useRequests } from '../hooks/useRequests';
import { useTheme } from '../hooks/useTheme';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { clamp } from '../lib/clamp';
import type { HttpRequest } from '../lib/models';
import { Button } from './core/Button';
import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
@@ -19,11 +20,12 @@ interface Props {
className?: string;
}
const MIN_WIDTH = 130;
const MIN_WIDTH = 110;
const MAX_WIDTH = 500;
export function Sidebar({ className }: Props) {
const [isDragging, setIsDragging] = useState<boolean>(false);
const width = useKeyValues<number>({ key: 'sidebar_width', initialValue: 200 });
const width = useKeyValue<number>({ key: 'sidebar_width', initialValue: 200 });
const requests = useRequests();
const activeRequest = useActiveRequest();
const createRequest = useCreateRequest({ navigateAfter: true });
@@ -43,7 +45,7 @@ export function Sidebar({ className }: Props) {
const startWidth = width.value;
moveState.current = {
move: (e: MouseEvent) => {
const newWidth = Math.max(MIN_WIDTH, startWidth + (e.clientX - mouseStartX));
const newWidth = clamp(startWidth + (e.clientX - mouseStartX), MIN_WIDTH, MAX_WIDTH);
width.set(newWidth);
},
up: () => {
@@ -73,8 +75,8 @@ export function Sidebar({ className }: Props) {
>
<div
className={classnames(
'transition-colors w-[1px] group-hover:bg-white/10 h-full pointer-events-none',
isDragging && '!bg-white/20',
'transition-colors w-[1px] group-hover:bg-gray-300 h-full pointer-events-none',
isDragging && '!bg-blue-500/70',
)}
/>
</div>