From 4898fa7dcfeaec26d3e128d50741ee704c14417c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 13 Jun 2023 18:08:42 -0700
Subject: [PATCH] Add responsive styling for min-width sidebar

---
 .../sidebar/components/action-bar.tsx         | 99 ++++++++++++++-----
 1 file changed, 75 insertions(+), 24 deletions(-)

diff --git a/src/renderer/features/sidebar/components/action-bar.tsx b/src/renderer/features/sidebar/components/action-bar.tsx
index c9f4794a..519d0312 100644
--- a/src/renderer/features/sidebar/components/action-bar.tsx
+++ b/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
-      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>
   );
 };