Add responsive styling for min-width sidebar

src/renderer/features/sidebar/components/action-bar.tsx

@@ -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,16 +19,20 @@ 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
+    <ActionsContainer ref={cq.ref}>
-      ref={cq.ref}
+      {cq.isMd ? (
+        <Grid
+          display="flex"
           gutter="sm"
+          px="1rem"
+          w="100%"
         >
-      <Grid.Col span={cq.isSm ? 7 : 6}>
+          <Grid.Col span={6}>
             <TextInput
               readOnly
               icon={<RiSearchLine />}
@@ -43,7 +46,7 @@ export const ActionBar = () => {
               }}
             />
           </Grid.Col>
-      <Grid.Col span={cq.isSm ? 5 : 6}>
+          <Grid.Col span={6}>
             <Group
               grow
               noWrap
@@ -81,6 +84,54 @@ export const ActionBar = () => {
               </Button>
             </Group>
           </Grid.Col>
+        </Grid>
+      ) : (
+        <Group
+          grow
+          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
+                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>
+      )}
     </ActionsContainer>
   );
 };