add settings navigation

2026-05-21 01:04:39 +08:00 · 2023-09-04 19:38:40 +01:00
parent 6af5c9a9ca
commit 03a9b81a80
10 changed files with 315 additions and 108 deletions
@@ -0,0 +1,68 @@
+import React, { ReactNode } from 'react';
+import {
+  IconHome,
+  IconSearch,
+  IconSettings,
+  IconFilePlus,
+} from '@tabler/icons-react';
+import NavigationLink from "@/components/sidebar/navigation/navigation-link";
+import ButtonWithIcon from "@/components/ui/button-with-icon";
+
+export type NavigationMenuType = {
+  label: string;
+  path: string;
+  icon: ReactNode;
+  target?: string,
+  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+};
+
+export const navigationMenu: NavigationMenuType[] = [
+  {
+    label: 'Home',
+    path: '',
+    icon: <IconHome size={16} />,
+    target: '/home',
+  },
+  {
+    label: 'Search',
+    path: '',
+    icon: <IconSearch size={16} />,
+  },
+  {
+    label: 'Settings',
+    path: '',
+    icon: <IconSettings size={16} />,
+    target: '/settings/account'
+  },
+  {
+    label: 'New Page',
+    path: '',
+    icon: <IconFilePlus size={16} />,
+  },
+];
+
+export const renderMenuItem = (menu, index) => {
+  if (menu.target) {
+    return (
+      <NavigationLink
+        href={menu.target}
+        icon={menu.icon}
+        className="w-full flex flex-1 justify-start items-center"
+      >
+        {menu.label}
+      </NavigationLink>
+    );
+  }
+
+  return (
+    <ButtonWithIcon
+      key={index}
+      icon={menu.icon}
+      variant="ghost"
+      className="w-full flex flex-1 justify-start items-center"
+      // onClick={}
+    >
+      <span className="text-ellipsis overflow-hidden">{menu.label}</span>
+    </ButtonWithIcon>
+  );
+};
@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface NavigationLinkProps {
+  children: ReactNode,
+  href: string;
+  icon?: ReactNode;
+  variant?: "default" | "ghost" | "outline";
+  className?: string;
+}
+
+export default function NavigationLink({ children, href, icon, variant = "ghost", className }: NavigationLinkProps) {
+  return (
+    <Link href={href} className={cn(buttonVariants({ variant: variant }), className)}>
+      {icon && <span className="mr-[8px]">
+        {icon}
+      </span>}
+      <span className="text-ellipsis overflow-hidden">
+        {children}
+      </span>
+    </Link>
+  );
+}
@@ -0,0 +1,40 @@
+import { SidebarSection } from "@/components/sidebar/sidebar-section";
+import { navigationMenu, renderMenuItem } from "@/components/sidebar/navigation/navigation-items";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import NavigationLink from "@/components/sidebar/navigation/navigation-link";
+import { IconFileText } from "@tabler/icons-react";
+
+import React from "react";
+
+export default function Navigation() {
+  return (
+    <div className="pt-8">
+      <PrimaryNavigation />
+      <SecondaryNavigationArea />
+    </div>
+  );
+}
+
+function PrimaryNavigation() {
+  return (
+    <SidebarSection className="pb-2 mb-4 select-none border-b">
+      {navigationMenu.map(renderMenuItem)}
+    </SidebarSection>
+  );
+}
+
+function SecondaryNavigationArea() {
+  return (
+    <ScrollArea className="h-[70vh]">
+      <div className="space-y-1">
+        <NavigationLink
+          href="#"
+          className="w-full justify-start"
+          icon={<IconFileText size={16} />}
+        >
+          Welcome page
+        </NavigationLink>
+      </div>
+    </ScrollArea>
+  );
+}