fix(toolbar): adjust toolbar position to center (#464)

* fix(toolbar): fix position

* fix(toolbar): adjust toolbar position to center

Signed-off-by: MadDogOwner <xiaoran@xrgzs.top>

---------

Signed-off-by: MadDogOwner <xiaoran@xrgzs.top>
Co-authored-by: MadDogOwner <xiaoran@xrgzs.top>

Author: jyxjjj

src/pages/home/toolbar/Center.tsx

@@ -30,61 +30,65 @@ export const Center = () => {
           class="center-toolbar"
           pos="fixed"
           bottom="$4"
-          right="50%"
+          left="50%"
           w="max-content"
           color="$neutral11"
-          as={Motion.div}
-          initial={{ opacity: 0, scale: 0.9, x: "50%", y: 10 }}
-          animate={{ opacity: 1, scale: 1, x: "50%", y: 0 }}
-          exit={{ opacity: 0, scale: 0.9 }}
-          // @ts-ignore
-          transition={{ duration: 0.2 }}
+          transform="translateX(-50%)"
         >
-          <HStack
-            p="$2"
-            bgColor={useColorModeValue("white", "#000000d0")()}
-            spacing="$1"
-            shadow="0px 10px 30px -5px rgba(0, 0, 0, 0.3)"
-            rounded="$lg"
-            css={{
-              backdropFilter: "blur(8px)",
-            }}
+          <Box
+            as={Motion.div}
+            initial={{ opacity: 0, scale: 0.9, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            // @ts-ignore
+            transition={{ duration: 0.2 }}
           >
-            <Show when={!isShare() && objStore.write}>
-              <For
-                each={
-                  ["rename", "move", "copy", "delete", "decompress"] as const
-                }
-              >
-                {(name) => {
-                  return userCan(name) ? (
-                    <CenterIcon
-                      name={name}
-                      onClick={() => {
-                        bus.emit("tool", name)
-                      }}
-                    />
-                  ) : null
-                }}
-              </For>
-            </Show>
-            <Show when={userCan("share")}>
+            <HStack
+              p="$2"
+              bgColor={useColorModeValue("white", "#000000d0")()}
+              spacing="$1"
+              shadow="0px 10px 30px -5px rgba(0, 0, 0, 0.3)"
+              rounded="$lg"
+              css={{
+                backdropFilter: "blur(8px)",
+              }}
+            >
+              <Show when={!isShare() && objStore.write}>
+                <For
+                  each={
+                    ["rename", "move", "copy", "delete", "decompress"] as const
+                  }
+                >
+                  {(name) => {
+                    return userCan(name) ? (
+                      <CenterIcon
+                        name={name}
+                        onClick={() => {
+                          bus.emit("tool", name)
+                        }}
+                      />
+                    ) : null
+                  }}
+                </For>
+              </Show>
+              <Show when={userCan("share")}>
+                <CenterIcon
+                  name="share"
+                  onClick={() => {
+                    bus.emit("tool", "share")
+                  }}
+                />
+              </Show>
+              <CopyLink />
+              <Download />
               <CenterIcon
-                name="share"
+                name="cancel_select"
                 onClick={() => {
-                  bus.emit("tool", "share")
+                  selectAll(false)
                 }}
               />
-            </Show>
-            <CopyLink />
-            <Download />
-            <CenterIcon
-              name="cancel_select"
-              onClick={() => {
-                selectAll(false)
-              }}
-            />
-          </HStack>
+            </HStack>
+          </Box>
         </Box>
       </Show>
     </Presence>