fix(nav): remove HStack before Breadcrumb (#131)

* fix(nav): remove HStack before Breadcrumb

* chore(nav): organize imports

Author: xrgzs

src/pages/home/Nav.tsx

@@ -4,7 +4,6 @@ import {
   BreadcrumbLink,
   BreadcrumbProps,
   BreadcrumbSeparator,
-  HStack,
 } from "@hope-ui/solid"
 import { Link } from "@solidjs/router"
 import { createMemo, For, Show } from "solid-js"
@@ -49,47 +48,45 @@ export const Nav = () => {
   })
 
   return (
-    <HStack background="$background" class="nav" w="$full">
-      <Breadcrumb {...stickyProps} flexGrow="1">
-        <For each={paths()}>
-          {(name, i) => {
-            const isLast = createMemo(() => i() === paths().length - 1)
-            const path = paths()
-              .slice(0, i() + 1)
-              .join("/")
-            const href = encodePath(path)
-            let text = () => name
-            if (text() === "") {
-              text = () => getSetting("home_icon") + t("manage.sidemenu.home")
-            }
-            return (
-              <BreadcrumbItem class="nav-item">
-                <BreadcrumbLink
-                  class="nav-link"
-                  css={{
-                    wordBreak: "break-all",
-                  }}
-                  color="unset"
-                  _hover={{ backgroundColor: hoverColor(), color: "unset" }}
-                  _active={{ transform: "scale(.95)", transition: "0.1s" }}
-                  cursor="pointer"
-                  p="$1"
-                  rounded="$lg"
-                  currentPage={isLast()}
-                  as={isLast() ? undefined : Link}
-                  href={joinBase(href)}
-                  onMouseEnter={() => setPathAs(path)}
-                >
-                  {text()}
-                </BreadcrumbLink>
-                <Show when={!isLast()}>
-                  <BreadcrumbSeparator class="nav-separator" />
-                </Show>
-              </BreadcrumbItem>
-            )
-          }}
-        </For>
-      </Breadcrumb>
-    </HStack>
+    <Breadcrumb {...stickyProps} background="$background" class="nav" w="$full">
+      <For each={paths()}>
+        {(name, i) => {
+          const isLast = createMemo(() => i() === paths().length - 1)
+          const path = paths()
+            .slice(0, i() + 1)
+            .join("/")
+          const href = encodePath(path)
+          let text = () => name
+          if (text() === "") {
+            text = () => getSetting("home_icon") + t("manage.sidemenu.home")
+          }
+          return (
+            <BreadcrumbItem class="nav-item">
+              <BreadcrumbLink
+                class="nav-link"
+                css={{
+                  wordBreak: "break-all",
+                }}
+                color="unset"
+                _hover={{ backgroundColor: hoverColor(), color: "unset" }}
+                _active={{ transform: "scale(.95)", transition: "0.1s" }}
+                cursor="pointer"
+                p="$1"
+                rounded="$lg"
+                currentPage={isLast()}
+                as={isLast() ? undefined : Link}
+                href={joinBase(href)}
+                onMouseEnter={() => setPathAs(path)}
+              >
+                {text()}
+              </BreadcrumbLink>
+              <Show when={!isLast()}>
+                <BreadcrumbSeparator class="nav-separator" />
+              </Show>
+            </BreadcrumbItem>
+          )
+        }}
+      </For>
+    </Breadcrumb>
   )
 }