@startupjs-ui/sidebar 0.1.12 → 0.1.16

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/CHANGELOG.md +16 -0
  2. package/README.mdx +15 -3
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
7
+
8
+ **Note:** Version bump only for package @startupjs-ui/sidebar
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
15
+
16
+ **Note:** Version bump only for package @startupjs-ui/sidebar
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
7
23
 
8
24
  **Note:** Version bump only for package @startupjs-ui/sidebar
package/README.mdx CHANGED
@@ -12,7 +12,7 @@ import './index.mdx.cssx.styl'
12
12
 
13
13
  # Sidebar
14
14
 
15
- Sidebar is typically used for nagivation. It initially not visible on the screen.
15
+ A collapsible side panel typically used for navigation. It slides in from the left or right edge of its container and can be toggled open or closed via a two-way bound `$open` model.
16
16
 
17
17
  ```jsx
18
18
  import { Sidebar } from 'startupjs-ui'
@@ -20,6 +20,8 @@ import { Sidebar } from 'startupjs-ui'
20
20
 
21
21
  ## Simple example
22
22
 
23
+ Use the `$open` prop to bind the sidebar's open state to an observable model, `width` to set the panel width, and `renderContent` to supply the sidebar's inner content. The main page content is passed as `children`.
24
+
23
25
  ```jsx example
24
26
  const media = useMedia()
25
27
  const $open = $()
@@ -43,7 +45,7 @@ return (
43
45
 
44
46
  ## Position
45
47
 
46
- The `position` property specifies the side of the window from which the sidebar will show. Possible values of `position` property are `left` (default) and `right`.
48
+ The `position` prop controls which side the sidebar appears on. Possible values are `'left'` (default) and `'right'`.
47
49
 
48
50
  ```jsx example noscroll
49
51
  const media = useMedia()
@@ -91,7 +93,7 @@ return (
91
93
 
92
94
  ## Lazy rendering
93
95
 
94
- By default the sidebar content are not destroyed when it is closed. To change this behavior pass `lazy=true`.
96
+ By default the sidebar content stays mounted even when the panel is closed. Set `lazy` to unmount the sidebar content when it is closed and only render it when opened. This can improve performance if the sidebar contains heavy content.
95
97
 
96
98
  ```jsx example
97
99
  const media = useMedia()
@@ -117,6 +119,8 @@ return (
117
119
 
118
120
  ## Complex example
119
121
 
122
+ A more realistic layout combining a navigation menu inside the sidebar with main page content.
123
+
120
124
  ```jsx example noscroll
121
125
  const media = useMedia()
122
126
  const $open = $()
@@ -157,6 +161,14 @@ return (
157
161
  )
158
162
  ```
159
163
 
164
+ ## Additional props
165
+
166
+ - `style` -- custom styles applied to the root view
167
+ - `sidebarStyle` -- custom styles applied to the sidebar panel container
168
+ - `contentStyle` -- custom styles applied to the main content area
169
+ - `width` -- sidebar width in density-independent pixels (default `264`)
170
+ - `disabled` -- when `true`, forces the sidebar to stay closed regardless of the `$open` value (default `false`)
171
+
160
172
  ## Sandbox
161
173
 
162
174
  <Sandbox Component={Sidebar}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startupjs-ui/sidebar",
3
- "version": "0.1.12",
3
+ "version": "0.1.16",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -9,12 +9,12 @@
9
9
  "type": "module",
10
10
  "dependencies": {
11
11
  "@startupjs-ui/core": "^0.1.11",
12
- "@startupjs-ui/div": "^0.1.12"
12
+ "@startupjs-ui/div": "^0.1.16"
13
13
  },
14
14
  "peerDependencies": {
15
15
  "react": "*",
16
16
  "react-native": "*",
17
17
  "startupjs": "*"
18
18
  },
19
- "gitHead": "c0b4606437077bb6d170e2c0b16b674801c304fe"
19
+ "gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
20
20
  }