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,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
+    <ActionsContainer ref={cq.ref}>
-      ref={cq.ref}
+      {cq.isMd ? (
-      gutter="sm"
+        <Grid
-    >
+          display="flex"
-      <Grid.Col span={cq.isSm ? 7 : 6}>
+          gutter="sm"
-        <TextInput
+          px="1rem"
-          readOnly
+          w="100%"
-          icon={<RiSearchLine />}
+        >
-          placeholder="Search"
+          <Grid.Col span={6}>
-          size="md"
+            <TextInput
-          onClick={open}
+              readOnly
-          onKeyDown={(e) => {
+              icon={<RiSearchLine />}
-            if (e.key === 'Enter' || e.key === ' ') {
+              placeholder="Search"
-              open();
+              size="md"
-            }
+              onClick={open}
-          }}
+              onKeyDown={(e) => {
-        />
+                if (e.key === 'Enter' || e.key === ' ') {
-      </Grid.Col>
+                  open();
-      <Grid.Col span={cq.isSm ? 5 : 6}>
+                }
+              }}
+            />
+          </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>
   );
 };