pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add responsive styling for min-width sidebar

Browse source
This commit is contained in:
jeffvli 2023-06-13 18:08:42 -07:00
parent a6990fd732
commit 4898fa7dcf
1 changed files with 75 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
src/renderer/features/sidebar/components/action-bar.tsx
View file

@ -7,11 +7,10 @@ import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { useContainerQuery } from '/@/renderer/hooks';
import { useCommandPalette } from '/@/renderer/store';
const ActionsContainer = styled(Grid)`
const ActionsContainer = styled.div`
display: flex;
align-items: center;
height: 70px;
padding: 0 1rem;
-webkit-app-region: drag;
input {
@ -20,35 +19,87 @@ const ActionsContainer = styled(Grid)`
`;
export const ActionBar = () => {
const cq = useContainerQuery({ sm: 300 });
const cq = useContainerQuery({ md: 300 });
const navigate = useNavigate();
const { open } = useCommandPalette();
return (
<ActionsContainer
ref={cq.ref}
gutter="sm"
>
<Grid.Col span={cq.isSm ? 7 : 6}>
<TextInput
readOnly
icon={<RiSearchLine />}
placeholder="Search"
size="md"
onClick={open}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
open();
}
}}
/>
</Grid.Col>
<Grid.Col span={cq.isSm ? 5 : 6}>
<ActionsContainer ref={cq.ref}>
{cq.isMd ? (
<Grid
display="flex"
gutter="sm"
px="1rem"
w="100%"
>
<Grid.Col span={6}>
<TextInput
readOnly
icon={<RiSearchLine />}
placeholder="Search"
size="md"
onClick={open}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
open();
}
}}
/>
</Grid.Col>
<Grid.Col span={6}>
<Group
grow
noWrap
spacing="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
p="0.5rem"
size="md"
variant="default"
>
<RiMenuFill size="1rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<AppMenu />
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="1.5rem" />
</Button>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
</Grid>
) : (
<Group
grow
noWrap
px="1rem"
spacing="sm"
w="100%"
>
<Button
p="0.5rem"
size="md"
variant="default"
onClick={open}
>
<RiSearchLine size="1rem" />
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
@ -80,7 +131,7 @@ export const ActionBar = () => {
<RiArrowRightSLine size="1.5rem" />
</Button>
</Group>
</Grid.Col>
)}
</ActionsContainer>
);
};