feat: manage side menu

src/hooks/useT.ts

@@ -8,7 +8,10 @@ const useT = () => {
     defaultValue?: string | undefined
   ) => {
     const value = t(key, params, defaultValue);
-    return value ?? key;
+    if (!value) {
+      return key;
+    }
+    return value;
   };
 };
 

src/lang/en/sidemenu.json

@@ -0,0 +1,17 @@
+{
+  "settings": "Settings",
+  "site": "Site",
+  "style": "Style",
+  "preview": "Preview",
+  "global": "Global",
+  "other": "Other",
+  "users": "Users",
+  "accounts": "Accounts",
+  "metas": "Metas",
+  "profile": "Profile",
+  "about": "About",
+  "tasks": "Tasks",
+  "aria2": "Aria2",
+  "upload": "Upload",
+  "copy": "Copy"
+}

src/pages/manage/SideMenu.tsx

@@ -0,0 +1,90 @@
+import { Box, Flex, Heading, HStack, Icon, VStack } from "@hope-ui/solid";
+import { createSignal, For, JSX, Show } from "solid-js";
+import { useRouter } from "~/hooks/useRouter";
+import { BiSolidRightArrow, BiSolidDownArrow } from "solid-icons/bi";
+import { useT } from "~/hooks/useT";
+import { IconTypes } from "solid-icons/lib/browser/IconWrapper";
+
+export interface SideMenuItemProps {
+  title: string;
+  to?: string;
+  icon?: IconTypes;
+  children?: SideMenuItemProps[];
+}
+
+const SideMenuItem = (props: SideMenuItemProps) => {
+  return (
+    <Show when={props.children} fallback={<SideMenuItemWithTo {...props} />}>
+      <SideMenuItemWithChildren {...props} />
+    </Show>
+  );
+};
+
+const SideMenuItemWithTo = (props: SideMenuItemProps) => {
+  const { to } = useRouter();
+  const t = useT();
+  return (
+    <Flex
+      onClick={() => {
+        to(props.to!);
+      }}
+      w="$full"
+      alignItems="center"
+      _hover={{
+        bgColor: "rgba(156,163,175,0.2)",
+      }}
+      p="$2"
+      rounded="$md"
+    >
+      <Show when={props.icon}>{<Icon mr="$2" as={props.icon} />}</Show>
+      <Heading>{t(props.title)}</Heading>
+    </Flex>
+  );
+};
+
+const SideMenuItemWithChildren = (props: SideMenuItemProps) => {
+  const [open, setOpen] = createSignal(false);
+  const t = useT();
+  return (
+    <Box w="$full">
+      <Flex
+        justifyContent="space-between"
+        onClick={() => {
+          setOpen(!open());
+        }}
+        w="$full"
+        alignItems="center"
+        _hover={{
+          bgColor: "rgba(156,163,175,0.2)",
+        }}
+        p="$2"
+        rounded="$md"
+      >
+        <HStack>
+          <Show when={props.icon}>{<Icon mr="$2" as={props.icon} />}</Show>
+          <Heading>{t(props.title)}</Heading>
+        </HStack>
+        <Show when={open()} fallback={<Icon as={BiSolidRightArrow} />}>
+          <Icon as={BiSolidDownArrow} />
+        </Show>
+      </Flex>
+      <Show when={open()}>
+        <Box pl="$2">
+          <SideMenu items={props.children!} />
+        </Box>
+      </Show>
+    </Box>
+  );
+};
+
+export const SideMenu = (props: { items: SideMenuItemProps[] }) => {
+  return (
+    <VStack p="$2" w="$56" color="$neutral11">
+      <For each={props.items}>
+        {(item, i) => {
+          return <SideMenuItem {...item} />;
+        }}
+      </For>
+    </VStack>
+  );
+};

src/pages/manage/index.tsx

@@ -1,9 +1,16 @@
-import { Box, Heading } from "@hope-ui/solid"
+import { Box, Heading } from "@hope-ui/solid";
+import { SideMenu } from "./SideMenu";
+import { side_menu_items } from "./sidemenu_items";
+
+
 
 const Manage = () => {
-  return <Box>
-    <Heading>Manage here</Heading>
-  </Box>
-}
+  return (
+    <Box>
+      <Heading>Manage here</Heading>
+      <SideMenu items={side_menu_items} />
+    </Box>
+  );
+};
 
-export default Manage;
+export default Manage;

src/pages/manage/sidemenu_items.ts

@@ -0,0 +1,97 @@
+import { SideMenuItemProps } from "./SideMenu";
+import {
+  BsGearFill,
+  BsPaletteFill,
+  BsCameraFill,
+  BsWindow,
+  BsPersonCircle,
+  BsJoystick,
+  BsMedium,
+  BsFingerprint,
+  BsFront,
+  BsCloudArrowDownFill,
+  BsCloudUploadFill,
+} from "solid-icons/bs";
+import { SiMetabase } from "solid-icons/si";
+import { CgDatabase } from "solid-icons/cg";
+import { FaSolidTasks } from "solid-icons/fa";
+import { IoCopy } from "solid-icons/io";
+
+export const side_menu_items: SideMenuItemProps[] = [
+  {
+    title: "sidemenu.settings",
+    icon: BsGearFill,
+    children: [
+      {
+        title: "sidemenu.site",
+        icon: BsWindow,
+        to: "/@manage/settings/site",
+      },
+      {
+        title: "sidemenu.style",
+        icon: BsPaletteFill,
+        to: "/@manage/settings/style",
+      },
+      {
+        title: "sidemenu.preview",
+        icon: BsCameraFill,
+        to: "/@manage/settings/preview",
+      },
+      {
+        title: "sidemenu.global",
+        icon: BsJoystick,
+        to: "/@manage/settings/global",
+      },
+      {
+        title: "sidemenu.other",
+        icon: BsMedium,
+        to: "/@manage/settings/other",
+      },
+    ],
+  },
+  {
+    title: "sidemenu.tasks",
+    icon: FaSolidTasks,
+    children: [
+      {
+        title: "sidemenu.aria2",
+        icon: BsCloudArrowDownFill,
+        to: "/@manage/tasks/aria2",
+      },
+      {
+        title: "sidemenu.upload",
+        icon: BsCloudUploadFill,
+        to: "/@manage/tasks/upload",
+      },
+      {
+        title: "sidemenu.copy",
+        icon: IoCopy,
+        to: "/@manage/tasks/copy",
+      },
+    ],
+  },
+  {
+    title: "sidemenu.users",
+    icon: BsPersonCircle,
+    to: "/@manage/users",
+  },
+  {
+    title: "sidemenu.accounts",
+    icon: CgDatabase,
+  },
+  {
+    title: "sidemenu.metas",
+    icon: SiMetabase,
+    to: "/@manage/metas",
+  },
+  {
+    title: "sidemenu.profile",
+    icon: BsFingerprint,
+    to: "/@manage/profile",
+  },
+  {
+    title: "sidemenu.about",
+    icon: BsFront,
+    to: "/@manage/about",
+  },
+];