atomsystem 0.1.38 → 0.1.39

package/app/templates/Navigation/Navigation.tsx

@@ -1,306 +1,53 @@
-"use client";
+"use client"
+
 import Link from "next/link";
-import Image from "next/image";
-import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
-import clsx from "clsx";
-import { useMediaQuery } from "react-responsive";
 
-interface NavItemsAttr {
-  type?: "topnav" | "sidenav";
-  navMenu: {
-    name: string;
-    path?: string;
-  }[];
+// Navigation을 베이스 interface로 정의
+export interface Navigation {
+  children: React.ReactNode;
 }
 
-// Custom CSS classes are now used via css/navigation.css
-
-const handleNavToggle = (targetId: string) => {
-  const el = document.getElementById(targetId);
-  if (el) {
-    const isHidden = el.style.display === "none" || el.style.display === "";
-    el.style.display = isHidden ? "block" : "none";
-  }
-};
-
-const Navigation = ({
-  children,
-  id,
-  className,
-  type = "topnav",
-}: {
-  children: React.ReactNode;
-  id?: string;
-  className?: string;
-  type?: "topnav" | "sidenav";
-}) => {
-  const isMobile = useMediaQuery({ maxWidth: 767 });
+export interface NavLink extends Navigation {
+  href: string;
+}
 
-  const mobileClose = () => {
-    if (isMobile) {
-      if (id) {
-        handleNavToggle(id);
-      }
-    }
-  };
 
+const Navigation = ({ children }: Navigation) => {
   return (
-    <nav
-      id={id ? id : undefined}
-      className={`nav-container nav-${type} ${className} overflow-auto`}
-      onClick={mobileClose}
-    >
-      {children}
-    </nav>
-  );
-};
+        <nav className="nav-menu flex items-center justify-between">
+            {children}
+        </nav>
+    )
+}
 
-const NavItems = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
-  const pathname = usePathname();
 
+const NavBrand = ({children, href}: NavLink) => {
   return (
-    <ul className={clsx(`nav-${type}`, { "flex flex-row items-center nav-gap": type === "topnav" })}>
-      {navMenu.map((menu) => {
-        return (
-          <li className="relative group" key={menu.name}>
-            <div className={clsx("flex justify-between items-center pr-4")}>
-              <Link
-                href={menu.path || "#"}
-                className={`${pathname === menu.path ? "nav-text-active" : "nav-text-standard"} nav-${type} block hover:opacity-80 transition-opacity nav-padding`}
-              >
-                {menu.name}
-              </Link>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
+    <Link href={href} className="flex items-center">{children}</Link>
+  )
+}
 
-const NavToggleButton = ({
-  children,
-  targetId,
-  className,
-}: {
-  children: React.ReactNode;
-  targetId: string;
-  className?: string;
-}) => {
+const NavList = ({children}: Navigation) => {
   return (
-    <button className={className} onClick={() => handleNavToggle(targetId)}>
-      {children}
-    </button>
-  );
-};
+    <ul className="flex items-center gap-0">{children}</ul>
+  )
+}
 
-const Sidebar = ({ navMenu, type = "sidenav" }: NavItemsAttr) => {
-  return (
-    <nav
-      className={clsx(
-        `relative nav-container nav-${type} w-full md:w-[320px] h-full z-20 left-0 overflow-auto`
-      )}
-    >
-      <ul>
-        {navMenu.map((menu, idx) => {
-          return (
-            <li className="relative group" key={menu.name + idx}>
-              <div className={clsx("flex justify-between items-center pr-4")}>
-                <Link
-                  href={menu.path || "#"}
-                  className={clsx(
-                    `block nav-text-standard nav-${type} hover:opacity-80 transition-opacity nav-padding`
-                  )}
-                >
-                  {menu.name}
-                </Link>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};
 
-const GlobalNav = ({
-  type = "sidebar",
-  navMenu,
-  brand = true,
-}: {
-  type?: "sidebar" | "topmenu" | "mobile";
-  navMenu: {
-    name: string;
-    path?: string;
-    subItems?: { name: string; path: string }[];
-    label?: boolean;
-  }[];
-  brand?: boolean;
-}) => {
-  const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
-  const [toggleMenu, setToggleMenu] = useState<boolean>(true);
+const NavItem = ({children, href}: NavLink) => {
   const pathname = usePathname();
-  const [openSubMenu, setOpenSubMenu] = useState<Record<string, boolean>>({});
-
-  // 윈도우 사이즈 추적
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize(window.innerWidth); // 윈도우 사이즈 업데이트
-    };
-
-    window.addEventListener("resize", handleResize); // 리사이즈 이벤트 리스너 추가
-
-    return () => window.removeEventListener("resize", handleResize); // 컴포넌트 언마운트 시 리스너 제거
-  }, [windowSize]);
+  const active = pathname === href;
 
-  // 초기 토글 값 설정
-  useEffect(() => {
-    if (window.innerWidth > 768) {
-    } else {
-      setToggleMenu(false);
-    }
-  }, []);
-
-  const toggleSubMenu = (menuName: string) => {
-    setOpenSubMenu((prev) => ({
-      ...prev,
-      [menuName]: !prev[menuName],
-    }));
-  };
+  return (
+    <Link href={href} className={`nav-item ${active ? "text-primary!" : ""}`}>{children}</Link>
+  )
+}
 
-  const navType = type === "sidebar" ? "sidenav" : "topnav";
 
-  return (
-    <nav
-      className={clsx(
-        `fixed top-0 md:relative w-full nav-container nav-${navType} z-20 left-0 ${toggleMenu ? "block" : "hidden"}`,
-        { [`h-full max-w-80 overflow-auto border-r nav-border`]: type == "sidebar" },
-        { [`h-auto flex flex-row items-center border-b nav-border nav-${navType}`]: type == "topmenu" }
-      )}
-    >
-      {/* brand */}
-      {brand ? (
-        <div className="brand">
-          <div className={`flex items-center justify-between`}>
-            <Link href={"/"}>
-              <Image
-                src={"/images/global/logo.png"}
-                alt="Logo"
-                width={180}
-                height={45}
-                draggable="false"
-              ></Image>
-            </Link>
-            <button
-              className={`fixed shadow-md rounded-full nav-bg nav-${navType} border nav-border w-12 h-12 top-6 left-6 cursor-pointer z-50`}
-              onClick={() => setToggleMenu(!toggleMenu)}
-            >
-              <span
-                className={`material-symbols-outlined nav-text-standard nav-${navType}`}
-                style={{ fontSize: "16px" }}
-              >
-                menu
-              </span>
-            </button>
-          </div>
-        </div>
-      ) : null}
-      {/* List */}
-      <ul
-        className={clsx("", {
-          "flex flex-row": type == "topmenu",
-        })}
-      >
-        {navMenu.map((menu, idx) => {
-          switch (true) {
-            case menu.label === true && type == "sidebar":
-              return (
-                <p
-                  key={menu.name + idx}
-                  className={`nav-text-sub nav-${navType} mt-2 mb-0 nav-padding`}
-                >
-                  {menu.name}
-                </p>
-              );
-            default:
-              return (
-                <li className="relative group" key={menu.name}>
-                  <div
-                    className={clsx("flex justify-between items-center pr-4")}
-                  >
-                    <Link
-                      href={menu.path || "#"}
-                      className={clsx(
-                        `block nav-text-standard nav-${navType} nav-padding`,
-                        {
-                          "nav-text-active":
-                            (menu.path && menu.path == pathname) ||
-                            menu.subItems?.some((sub) => sub.path === pathname),
-                        }
-                      )}
-                    >
-                      {menu.name}
-                    </Link>
-                    {menu.subItems && type == "sidebar" ? (
-                      <button
-                        className="cursor-pointer"
-                        onClick={() => toggleSubMenu(menu.name)}
-                      >
-                        <span
-                          className={clsx(
-                            `material-symbols-outlined nav-text-sub nav-${navType} transition-transform`,
-                            {
-                              "rotate-90": openSubMenu[menu.name],
-                            }
-                          )}
-                          style={{ fontSize: "16px" }}
-                        >
-                          keyboard_arrow_right
-                        </span>
-                      </button>
-                    ) : null}
-                  </div>
-                  {menu.subItems ? (
-                    <ul
-                      className={clsx(
-                        "block",
-                        {
-                          [`hidden absolute top-[42px] group-hover:block hover:block nav-bg nav-${navType} border nav-border`]:
-                            type == "topmenu",
-                        },
-                        {
-                          hidden: !openSubMenu[menu.name] && type == "sidebar",
-                        }
-                      )}
-                    >
-                      {menu.subItems.map((submenu) => {
-                        return (
-                          <li key={submenu.name}>
-                            <Link
-                              className={clsx(
-                                `block nav-text-standard nav-${navType} nav-padding`,
-                                {
-                                  "nav-text-active": submenu.path == pathname,
-                                },
-                                { "pl-12 ": type == "sidebar" }
-                              )}
-                              href={submenu.path}
-                            >
-                              {submenu.name}
-                            </Link>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  ) : null}
-                </li>
-              );
-          }
-        })}
-      </ul>
-    </nav>
-  );
-};
-export default Navigation;
-export { Sidebar, GlobalNav, NavToggleButton, NavItems };
+export {
+  Navigation,
+  NavBrand,
+  NavList,
+  NavItem
+}

package/app/templates/Navigation/navigation.css

@@ -1,69 +1,16 @@
+.nav-menu{
+    background-color: var(--bg-card);
+    border-bottom: 1px solid var(--border-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
 
-
-.nav-container.nav-topnav {
-    background-color: var(--bg-topnav);
-    color: var(--text-topnav-standard);
-    border-color: var(--border-topnav);
-}
-
-.nav-container.nav-sidenav {
-    background-color: var(--bg-sidenav);
-    color: var(--text-sidenav-standard);
-    border-color: var(--border-sidenav);
-}
-
-.nav-bg.nav-topnav {
-    background-color: var(--bg-topnav);
-}
-
-.nav-bg.nav-sidenav {
-    background-color: var(--bg-sidenav);
-}
-
-.nav-border.nav-topnav {
-    border-color: var(--border-topnav);
-}
-
-.nav-border.nav-sidenav {
-    border-color: var(--border-sidenav);
-}
-
-.nav-text-standard.nav-topnav {
-    color: var(--text-topnav-standard);
-}
-
-.nav-text-standard.nav-sidenav {
-    color: var(--text-sidenav-standard);
-}
-
-.nav-text-active.nav-topnav {
-    color: var(--text-topnav-active);
-}
-
-.nav-text-active.nav-sidenav {
-    color: var(--text-sidenav-active);
-}
-
-.nav-text-sub.nav-topnav {
-    color: var(--text-topnav-sub);
 }
 
-.nav-text-sub.nav-sidenav {
-    color: var(--text-sidenav-sub);
+.nav-item{
+    border-radius: var(--radius-common);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    color: var(--text-standard);
 }
 
-.nav-padding.nav-topnav {
-    padding: var(--spacing-topnav-y) var(--spacing-topnav-x);
-}
-
-.nav-padding.nav-sidenav {
-    padding: var(--spacing-sidenav-y) var(--spacing-sidenav-x);
-}
-
-.nav-gap.nav-topnav {
-    gap: var(--spacing-topnav-gap);
-}
-
-.nav-gap.nav-sidenav {
-    gap: var(--spacing-sidenav-gap);
-}
+.nav-item:hover{
+    background-color: var(--bg-hover);
+}

package/app/templates/Sidemenu/Sidemenu.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+// Navigation을 베이스 interface로 정의
+export interface Sidemenu {
+  children: React.ReactNode;
+  minWidth?: number
+}
+
+export interface NavLink {
+  children: React.ReactNode;
+  href: string;
+}
+
+
+const Sidemenu = ({ children, minWidth }: Sidemenu) => {
+  return (
+        <aside className={`nav-side flex flex-col overflow-auto h-full`} style={{minWidth: `${minWidth}px`}}>
+            {children}
+        </aside>
+    )
+}
+
+
+const NavBrand = ({children, href}: NavLink) => {
+  return (
+    <Link href={href} className="flex items-center">{children}</Link>
+  )
+}
+
+const NavList = ({children}: Sidemenu) => {
+  return (
+    <ul className="nav-list flex flex-col">{children}</ul>
+  )
+}
+
+
+const NavItem = ({children, href}: NavLink) => {
+  const pathname = usePathname();
+  const active = pathname === href;
+
+  return (
+    <Link href={href} className={`nav-item text-nowrap ${active ? "text-primary!" : ""}`}>{children}</Link>
+  )
+}
+
+
+export {
+  Sidemenu,
+  NavBrand,
+  NavList,
+  NavItem
+}

package/app/templates/Sidemenu/sidemenu.css

@@ -0,0 +1,4 @@
+.nav-side{
+    background-color: var(--bg-card);
+    border-right: 1px solid var(--border-standard);
+}