@bigtablet/design-system 1.7.2 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/next.css +4 -4
  2. package/dist/next.js +47 -21
  3. package/package.json +2 -2
package/dist/next.css CHANGED
@@ -15,13 +15,13 @@
15
15
  border-bottom: 1px solid #e5e5e5;
16
16
  }
17
17
  .sidebar_brand_link {
18
- display: block;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ align-items: center;
19
22
  width: 100%;
20
23
  }
21
24
  .sidebar_brand_img {
22
- display: block;
23
- width: 100%;
24
- height: auto;
25
25
  object-fit: contain;
26
26
  }
27
27
  .sidebar_nav {
package/dist/next.js CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import Link from 'next/link';
5
5
  import Image from 'next/image';
6
6
  import { ChevronDown } from 'lucide-react';
7
- import { jsxs, jsx } from 'react/jsx-runtime';
7
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
 
9
9
  // src/ui/navigation/sidebar/index.tsx
10
10
  var Sidebar = ({
@@ -22,6 +22,11 @@ var Sidebar = ({
22
22
  return match === "exact" ? activePath === href : activePath.startsWith(href);
23
23
  };
24
24
  const [openGroups, setOpenGroups] = React.useState([]);
25
+ const [isOpen, setIsOpen] = React.useState(true);
26
+ const handleToggleSidebar = (value) => {
27
+ setIsOpen(value);
28
+ localStorage.setItem("isOpen", JSON.stringify(value));
29
+ };
25
30
  React.useEffect(() => {
26
31
  if (!activePath) return;
27
32
  const autoOpenIds = items.filter(
@@ -37,35 +42,47 @@ var Sidebar = ({
37
42
  );
38
43
  };
39
44
  const rootClassName = ["sidebar", className ?? ""].filter(Boolean).join(" ");
40
- return /* @__PURE__ */ jsxs(
45
+ return /* @__PURE__ */ jsx(
41
46
  "aside",
42
47
  {
43
48
  className: rootClassName,
44
- style: { width, ...style },
49
+ style: { width: isOpen ? `${width}px` : "56px", ...style },
45
50
  "aria-label": "\uC0AC\uC774\uB4DC \uB0B4\uBE44\uAC8C\uC774\uC158",
46
- children: [
47
- /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsx(
51
+ children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
52
+ /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(
48
53
  Link,
49
54
  {
50
55
  href: brandHref,
51
56
  className: "sidebar_brand_link",
52
57
  "aria-label": "Bigtablet \uD648\uC73C\uB85C",
53
- children: /* @__PURE__ */ jsx(
54
- Image,
55
- {
56
- src: "/images/logo/bigtablet.png",
57
- alt: "Bigtablet",
58
- width: 200,
59
- height: 44,
60
- priority: true,
61
- className: "sidebar_brand_img"
62
- }
63
- )
58
+ children: [
59
+ /* @__PURE__ */ jsx(
60
+ Image,
61
+ {
62
+ src: "/images/logo/bigtablet.png",
63
+ alt: "Bigtablet",
64
+ width: 96,
65
+ height: 30,
66
+ priority: true,
67
+ className: "sidebar_brand_img"
68
+ }
69
+ ),
70
+ /* @__PURE__ */ jsx(
71
+ Image,
72
+ {
73
+ src: "/images/sidebar/arrow-close.svg",
74
+ alt: "ArrowClose",
75
+ width: 24,
76
+ height: 24,
77
+ onClick: () => handleToggleSidebar(false)
78
+ }
79
+ )
80
+ ]
64
81
  }
65
82
  ) }),
66
83
  /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
67
84
  if (item.type === "group") {
68
- const isOpen = openGroups.includes(item.id);
85
+ const isOpen2 = openGroups.includes(item.id);
69
86
  return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
70
87
  /* @__PURE__ */ jsxs(
71
88
  "button",
@@ -73,7 +90,7 @@ var Sidebar = ({
73
90
  type: "button",
74
91
  className: [
75
92
  "sidebar_item",
76
- isOpen && "is_open"
93
+ isOpen2 && "is_open"
77
94
  ].filter(Boolean).join(" "),
78
95
  onClick: () => toggleGroup(item.id),
79
96
  children: [
@@ -84,7 +101,7 @@ var Sidebar = ({
84
101
  {
85
102
  className: [
86
103
  "sidebar_chevron",
87
- isOpen && "is_open"
104
+ isOpen2 && "is_open"
88
105
  ].filter(Boolean).join(" "),
89
106
  children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
90
107
  }
@@ -92,7 +109,7 @@ var Sidebar = ({
92
109
  ]
93
110
  }
94
111
  ),
95
- isOpen && /* @__PURE__ */ jsx("div", { className: "sidebar_sub", children: item.children.map((child) => {
112
+ isOpen2 && /* @__PURE__ */ jsx("div", { className: "sidebar_sub", children: item.children.map((child) => {
96
113
  const active2 = isActive(child.href);
97
114
  return /* @__PURE__ */ jsx(
98
115
  Link,
@@ -137,7 +154,16 @@ var Sidebar = ({
137
154
  item.href
138
155
  );
139
156
  }) })
140
- ]
157
+ ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
158
+ Image,
159
+ {
160
+ src: "/images/sidebar/menu.svg",
161
+ alt: "menu",
162
+ width: 24,
163
+ height: 24,
164
+ onClick: () => handleToggleSidebar(true)
165
+ }
166
+ ) })
141
167
  }
142
168
  );
143
169
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigtablet/design-system",
3
- "version": "1.7.2",
3
+ "version": "1.8.0",
4
4
  "description": "Bigtablet Design System UI Components",
5
5
  "type": "module",
6
6
  "types": "dist/index.d.ts",
@@ -73,7 +73,7 @@
73
73
  "conventional-changelog-conventionalcommits": "^9.1.0",
74
74
  "esbuild-sass-plugin": "^3",
75
75
  "lucide-react": "^0.552.0",
76
- "next": "16.0.9",
76
+ "next": "16.0.10",
77
77
  "react": "19.2.0",
78
78
  "react-dom": "19.2.0",
79
79
  "react-toastify": "^11.0.5",