├── .eslintrc.cjs
├── .github
└── FUNDING.yml
├── .gitignore
├── .npmrc
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── playwright.config.js
├── pnpm-lock.yaml
├── postcss.config.cjs
├── src
├── app.css
├── app.d.ts
├── app.html
├── global.d.ts
├── lib
│ ├── Aside.svelte
│ ├── Dropdown.svelte
│ ├── Nav.svelte
│ ├── Navbar.svelte
│ ├── OutsideClick.svelte
│ ├── Responsive.svelte
│ ├── Side.svelte
│ ├── Sidebar.svelte
│ ├── SidebarList.svelte
│ ├── TopMenu.svelte
│ ├── click_outside.js
│ ├── components
│ │ └── Hamburger.svelte
│ ├── index.ts
│ ├── inert.min.js
│ ├── sidebarStore.ts
│ └── types.ts
└── routes
│ ├── __layout.svelte
│ ├── fixed-menu.svelte
│ ├── flowbite-svelte-sidebar
│ ├── __layout.svelte
│ └── index.svelte
│ ├── index.svelte
│ ├── inert.svelte
│ ├── menus.ts
│ ├── multi-custom-style.svelte
│ ├── multi-default.svelte
│ ├── props.svelte
│ ├── props
│ ├── Aside.json
│ ├── Dropdown.json
│ ├── Hamburger.json
│ ├── Nav.json
│ ├── Navbar.json
│ ├── Responsive.json
│ ├── Side.json
│ ├── Sidebar.json
│ ├── SidebarList.json
│ └── TopMenu.json
│ ├── responsive-no-transition
│ ├── __layout.svelte
│ ├── top-fix-2.svelte
│ ├── top-fix-3.svelte
│ └── top-fix.svelte
│ ├── responsive-transition
│ ├── blur.svelte
│ ├── fade.svelte
│ ├── fly-x.svelte
│ ├── fly-y.svelte
│ └── slide.svelte
│ ├── responsive
│ ├── __layout.svelte
│ ├── top-fix-2.svelte
│ ├── top-fix-3.svelte
│ └── top-fix.svelte
│ ├── scroll-sidebar.svelte
│ ├── sidebar-custom-style.svelte
│ ├── sidebar-topmenu.svelte
│ ├── three-columns
│ ├── __layout.svelte
│ └── index.svelte
│ ├── topmenu.svelte
│ ├── transitions
│ ├── blur.svelte
│ ├── fade.svelte
│ ├── fly-x.svelte
│ ├── fly-y.svelte
│ └── slide.svelte
│ └── utils
│ ├── Table.svelte
│ └── TableDefaultRow.svelte
├── static
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── favicon.png
├── images
│ ├── multiple-menu.png
│ ├── single-menu.png
│ └── svelte-sidebar-logo.png
└── site.webmanifest
├── svelte.config.js
├── tailwind.config.cjs
├── tests
└── test.js
└── tsconfig.json
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: '@typescript-eslint/parser',
4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
5 | plugins: ['svelte3', '@typescript-eslint'],
6 | ignorePatterns: ['*.cjs'],
7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
8 | settings: {
9 | 'svelte3/typescript': () => require('typescript')
10 | },
11 | parserOptions: {
12 | sourceType: 'module',
13 | ecmaVersion: 2020
14 | },
15 | env: {
16 | browser: true,
17 | es2017: true,
18 | node: true
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: codewithshin
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | .vercel
10 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100
6 | }
7 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 | ### [0.9.12](https://github.com/shinokada/svelte-sidebar/compare/v0.9.11...v0.9.12) (2022-10-07)
6 |
7 |
8 | ### Bug Fixes
9 |
10 | * remove aria-controls=mobile-menu-2 ([1d8b58d](https://github.com/shinokada/svelte-sidebar/commit/1d8b58d2b6fbe8ba7c88cc23161d076e9869c5ca))
11 |
12 | ### [0.9.11](https://github.com/shinokada/svelte-sidebar/compare/v0.9.10...v0.9.11) (2022-08-30)
13 |
14 | ### [0.9.10](https://github.com/shinokada/svelte-sidebar/compare/v0.9.9...v0.9.10) (2022-08-30)
15 |
16 | ### [0.9.9](https://github.com/shinokada/svelte-sidebar/compare/v0.9.8...v0.9.9) (2022-08-30)
17 |
18 |
19 | ### Features
20 |
21 | * add 3 columns ([90bd47f](https://github.com/shinokada/svelte-sidebar/commit/90bd47f75140025991be5197f8b6791503a22711))
22 |
23 |
24 | ### Bug Fixes
25 |
26 | * add engines node version >=16.0.0 ([8c63be8](https://github.com/shinokada/svelte-sidebar/commit/8c63be8d8fadbc30055438d409f7a92796fbf399))
27 | * update 3-columns page ([9410d5d](https://github.com/shinokada/svelte-sidebar/commit/9410d5d33e4d348e907e6d9378bcff3321193973))
28 |
29 | ### [0.9.8](https://github.com/shinokada/svelte-sidebar/compare/v0.9.7...v0.9.8) (2022-05-19)
30 |
31 |
32 | ### Bug Fixes
33 |
34 | * update creatporps and props page ([642371b](https://github.com/shinokada/svelte-sidebar/commit/642371b3c6232a022450d22978601e64fe351be1))
35 |
36 | ### [0.9.7](https://github.com/shinokada/svelte-sidebar/compare/v0.9.6...v0.9.7) (2022-05-19)
37 |
38 | ### Bug Fixes
39 |
40 | - add title to all pages ([9f36c49](https://github.com/shinokada/svelte-sidebar/commit/9f36c49710e54f53a08f7e262a480c7ce76d23c3))
41 | - update creatporps and props page ([e529389](https://github.com/shinokada/svelte-sidebar/commit/e529389e23c185bb7c3133e957d0312429915629))
42 | - update description ([2ea0efa](https://github.com/shinokada/svelte-sidebar/commit/2ea0efa5affa1450f3310948bccf78c61b1ecfe0))
43 |
44 | ### [0.9.6](https://github.com/shinokada/svelte-sidebar/compare/v0.9.5...v0.9.6) (2022-05-16)
45 |
46 | ### Bug Fixes
47 |
48 | - add topDiv to Side TopMenu in the else statement ([1d9453a](https://github.com/shinokada/svelte-sidebar/commit/1d9453af5254f3b6de8c9cf4c96f16de82111aaa))
49 |
50 | ### [0.9.5](https://github.com/shinokada/svelte-sidebar/compare/v0.9.4...v0.9.5) (2022-05-16)
51 |
52 | ### Bug Fixes
53 |
54 | - add topDiv to Side TopMenu ([f5c3de2](https://github.com/shinokada/svelte-sidebar/commit/f5c3de28fab184bb2005fd61e8d8abaf8d6ddfd4))
55 |
56 | ### [0.9.4](https://github.com/shinokada/svelte-sidebar/compare/v0.9.3...v0.9.4) (2022-05-16)
57 |
58 | ### Bug Fixes
59 |
60 | - add topDiv to Side ([3078251](https://github.com/shinokada/svelte-sidebar/commit/30782514464c873d01cc738b56d007dcc1c0f320))
61 |
62 | ### [0.9.3](https://github.com/shinokada/svelte-sidebar/compare/v0.9.2...v0.9.3) (2022-05-16)
63 |
64 | ### Bug Fixes
65 |
66 | - add pl-9 to flowbite-svelte-sidebar \_\_layout ([8fdca6c](https://github.com/shinokada/svelte-sidebar/commit/8fdca6c005db1f8a0f1d637e467934a2d74a2bc4))
67 | - add topDiv to TopMenu ([c2fba33](https://github.com/shinokada/svelte-sidebar/commit/c2fba339a332a9f1bc8c5bb4e5c6d74ebe596450))
68 | - update flowbite-svelte to 0.15.35 ([5491263](https://github.com/shinokada/svelte-sidebar/commit/5491263ee67bdcfa897e7081d799f6b105607a93))
69 |
70 | ### [0.9.2](https://github.com/shinokada/svelte-sidebar/compare/v0.9.1...v0.9.2) (2022-05-15)
71 |
72 | ### Bug Fixes
73 |
74 | - add 'main': 'index.js', to package.json ([55e2a80](https://github.com/shinokada/svelte-sidebar/commit/55e2a800b2afcada91faef8fa4ca13c8441ffb08))
75 |
76 | ### [0.9.1](https://github.com/shinokada/svelte-sidebar/compare/v0.9.0...v0.9.1) (2022-05-15)
77 |
78 | ### Bug Fixes
79 |
80 | - add class to tailwind.config.cjs and flowbite-svelte-sidebar test ([a046497](https://github.com/shinokada/svelte-sidebar/commit/a046497ad6373742974b9ad648559e3e9556607b))
81 |
82 | ## [0.9.0](https://github.com/shinokada/svelte-sidebar/compare/v0.8.11...v0.9.0) (2022-05-15)
83 |
84 | ### Features
85 |
86 | - add flowbite-svelte sidebar ([f4692f7](https://github.com/shinokada/svelte-sidebar/commit/f4692f7a8394437fdb13417bf8cc61405d3fa4dc))
87 |
88 | ### [0.8.11](https://github.com/shinokada/svelte-sidebar/compare/v0.8.10...v0.8.11) (2022-05-14)
89 |
90 | ### Bug Fixes
91 |
92 | - add lg:hidden to hamburger menu ([cf16dc6](https://github.com/shinokada/svelte-sidebar/commit/cf16dc67979a367c590a887f60a578a5010ecfe4))
93 |
94 | ### [0.8.10](https://github.com/shinokada/svelte-sidebar/compare/v0.8.9...v0.8.10) (2022-05-14)
95 |
96 | ### [0.8.9](https://github.com/shinokada/svelte-sidebar/compare/v0.8.8...v0.8.9) (2022-05-14)
97 |
98 | ### [0.8.8](https://github.com/shinokada/svelte-sidebar/compare/v0.8.7...v0.8.8) (2022-05-14)
99 |
100 | ### [0.8.7](https://github.com/shinokada/svelte-sidebar/compare/v0.8.6...v0.8.7) (2022-05-13)
101 |
102 | ### Bug Fixes
103 |
104 | - add : string to exported props ([8f38866](https://github.com/shinokada/svelte-sidebar/commit/8f38866f5d9dbf23f237ae88f9b419351a630a03))
105 |
106 | ### [0.8.6](https://github.com/shinokada/svelte-sidebar/compare/v0.8.5...v0.8.6) (2022-05-09)
107 |
108 | ### Bug Fixes
109 |
110 | - name change from store to sidebarStore.ts ([3929ff1](https://github.com/shinokada/svelte-sidebar/commit/3929ff12f69721a845e9f18d7cc4ec0b5510fb33))
111 |
112 | ### [0.8.5](https://github.com/shinokada/svelte-sidebar/compare/v0.8.4...v0.8.5) (2022-05-09)
113 |
114 | ### Bug Fixes
115 |
116 | - add OutsideClick to index ([6e59988](https://github.com/shinokada/svelte-sidebar/commit/6e599882e2d396a840a4895005352d1ceb2c1514))
117 |
118 | ### [0.8.4](https://github.com/shinokada/svelte-sidebar/compare/v0.8.3...v0.8.4) (2022-05-09)
119 |
120 | ### [0.8.3](https://github.com/shinokada/svelte-sidebar/compare/v0.8.2...v0.8.3) (2022-05-09)
121 |
122 | ### [0.8.2](https://github.com/shinokada/svelte-sidebar/compare/v0.8.1...v0.8.2) (2022-05-09)
123 |
124 | ### [0.8.1](https://github.com/shinokada/svelte-sidebar/compare/v0.8.0...v0.8.1) (2022-05-08)
125 |
126 | ## [0.8.0](https://github.com/shinokada/svelte-sidebar/compare/v0.7.6...v0.8.0) (2022-05-08)
127 |
128 | ### Features
129 |
130 | - add OutsideClick component ([be8af15](https://github.com/shinokada/svelte-sidebar/commit/be8af1575ad0c900d941e1bbe9dc300fa9901e38))
131 |
132 | ### Bug Fixes
133 |
134 | - update topMenu ([ee8e158](https://github.com/shinokada/svelte-sidebar/commit/ee8e158e3b2f18cc82aa3f761c1b9e2e0f9ae314))
135 |
136 | ### [0.7.6](https://github.com/shinokada/svelte-sidebar/compare/v0.7.5...v0.7.6) (2022-05-07)
137 |
138 | ### Bug Fixes
139 |
140 | - remove sidebarStayOpen from Responsive ([471b12e](https://github.com/shinokada/svelte-sidebar/commit/471b12eabb26f103e00923a8afeb5fc0cb6f6bc6))
141 |
142 | ### [0.7.5](https://github.com/shinokada/svelte-sidebar/compare/v0.7.4...v0.7.5) (2022-05-07)
143 |
144 | ### Bug Fixes
145 |
146 | - update TopMenu and Dropdown component ([6be7bee](https://github.com/shinokada/svelte-sidebar/commit/6be7bee643798b199dc78d93c33cfde0250824a8))
147 |
148 | ### [0.7.4](https://github.com/shinokada/svelte-sidebar/compare/v0.7.3...v0.7.4) (2022-05-07)
149 |
150 | ### Bug Fixes
151 |
152 | - add activeChildLi to TopMenu ([eaaf5b9](https://github.com/shinokada/svelte-sidebar/commit/eaaf5b9b31c89b5906daa35b13fb5a26be23566f))
153 |
154 | ### [0.7.3](https://github.com/shinokada/svelte-sidebar/compare/v0.7.2...v0.7.3) (2022-05-07)
155 |
156 | ### Bug Fixes
157 |
158 | - remove id from Dropdown ([61d39ed](https://github.com/shinokada/svelte-sidebar/commit/61d39ed8286b4667dd5665416ae1dea066f0020e))
159 |
160 | ### [0.7.2](https://github.com/shinokada/svelte-sidebar/compare/v0.7.1...v0.7.2) (2022-05-07)
161 |
162 | ### [0.7.1](https://github.com/shinokada/svelte-sidebar/compare/v0.7.0...v0.7.1) (2022-05-07)
163 |
164 | ## [0.7.0](https://github.com/shinokada/svelte-sidebar/compare/v0.6.9...v0.7.0) (2022-05-07)
165 |
166 | ### Features
167 |
168 | - add svelte transitions ([4863e57](https://github.com/shinokada/svelte-sidebar/commit/4863e57ded45b9be635e33d8a24181a93572d8ef))
169 |
170 | ### Bug Fixes
171 |
172 | - add slide, blur, fly, fade transitions ([2568000](https://github.com/shinokada/svelte-sidebar/commit/2568000a21b0092ed00dcf747e1f878e126381ea))
173 |
174 | ### [0.6.9](https://github.com/shinokada/svelte-sidebar/compare/v0.6.8...v0.6.9) (2022-05-06)
175 |
176 | ### Bug Fixes
177 |
178 | - add type to string ([1288b80](https://github.com/shinokada/svelte-sidebar/commit/1288b8043c18708f6054fe455f4a4df21cade6c8))
179 |
180 | ### [0.6.8](https://github.com/shinokada/svelte-sidebar/compare/v0.6.7...v0.6.8) (2022-05-06)
181 |
182 | ### [0.6.7](https://github.com/shinokada/svelte-sidebar/compare/v0.6.6...v0.6.7) (2022-05-06)
183 |
184 | ### Bug Fixes
185 |
186 | - name change to svelte-sidebar-menu ([5a205d3](https://github.com/shinokada/svelte-sidebar/commit/5a205d3ae7e18f1ba2c7be2ff559160b7008aab1))
187 |
188 | ### [0.6.6](https://github.com/shinokada/svelte-sidebar/compare/v0.6.5...v0.6.6) (2022-05-06)
189 |
190 | ### [0.6.5](https://github.com/shinokada/svelte-sidebar/compare/v0.6.4...v0.6.5) (2022-05-06)
191 |
192 | ### Bug Fixes
193 |
194 | - add transition to Sidebar ([5272c2e](https://github.com/shinokada/svelte-sidebar/commit/5272c2e55816761b6f326ffc2e1710f382c335c9))
195 |
196 | ### [0.6.4](https://github.com/shinokada/svelte-sidebar/compare/v0.6.3...v0.6.4) (2022-05-06)
197 |
198 | ### Bug Fixes
199 |
200 | - put back css transition to Aside and add bg-white to layouts ([98f171b](https://github.com/shinokada/svelte-sidebar/commit/98f171b70eeec374de185e24bb15e544b58e4753))
201 |
202 | ### [0.6.3](https://github.com/shinokada/svelte-sidebar/compare/v0.6.2...v0.6.3) (2022-05-05)
203 |
204 | ### Bug Fixes
205 |
206 | - add >=breakpoint to Responsive component ([744dcd0](https://github.com/shinokada/svelte-sidebar/commit/744dcd009f1c7e0b09058342199d895022a97638))
207 |
208 | ### [0.6.2](https://github.com/shinokada/svelte-sidebar/compare/v0.6.1...v0.6.2) (2022-05-04)
209 |
210 | ### [0.6.1](https://github.com/shinokada/svelte-sidebar/compare/v0.6.0...v0.6.1) (2022-05-04)
211 |
212 | ### Bug Fixes
213 |
214 | - update menu url by adding / at the beginning ([06de1d0](https://github.com/shinokada/svelte-sidebar/commit/06de1d041c335721342e0ca9591146b270d9e9e6))
215 |
216 | ## [0.6.0](https://github.com/shinokada/svelte-sidebar/compare/v0.5.7...v0.6.0) (2022-05-04)
217 |
218 | ### Features
219 |
220 | - add Responsive component and dir/pages ([264bd5a](https://github.com/shinokada/svelte-sidebar/commit/264bd5a8c410f6852c2e3dc9ab622f0c170cda77))
221 |
222 | ### [0.5.7](https://github.com/shinokada/svelte-sidebar/compare/v0.5.6...v0.5.7) (2022-05-03)
223 |
224 | ### Features
225 |
226 | - add store.subscribe for sidebarStatus and ariaHidden ([0f2d5dd](https://github.com/shinokada/svelte-sidebar/commit/0f2d5dd688a4f21d136e0d6bd36af808a7b1c716))
227 |
228 | ### [0.5.6](https://github.com/shinokada/svelte-sidebar/compare/v0.5.5...v0.5.6) (2022-05-03)
229 |
230 | ### Bug Fixes
231 |
232 | - remove ts from store ([c791bdb](https://github.com/shinokada/svelte-sidebar/commit/c791bdbf0b68fc92f8cf2ce052769b573d53d278))
233 |
234 | ### [0.5.5](https://github.com/shinokada/svelte-sidebar/compare/v0.5.4...v0.5.5) (2022-05-03)
235 |
236 | ### Bug Fixes
237 |
238 | - add ts to store ([1862af2](https://github.com/shinokada/svelte-sidebar/commit/1862af249e092a93aa0ff9707b2a52f2e504ee0a))
239 |
240 | ### [0.5.4](https://github.com/shinokada/svelte-sidebar/compare/v0.5.3...v0.5.4) (2022-05-03)
241 |
242 | ### Bug Fixes
243 |
244 | - remove transition ([243e2e9](https://github.com/shinokada/svelte-sidebar/commit/243e2e956ccbf85b15a31fdc8980bac3c060427f))
245 |
246 | ### [0.5.3](https://github.com/shinokada/svelte-sidebar/compare/v0.5.2...v0.5.3) (2022-05-03)
247 |
248 | ### [0.5.2](https://github.com/shinokada/svelte-sidebar/compare/v0.5.1...v0.5.2) (2022-05-03)
249 |
250 | ### Features
251 |
252 | - add responsive with fixed top menu ([fdef5b9](https://github.com/shinokada/svelte-sidebar/commit/fdef5b9c119e5a7bcbd4cc38daadc0d5dd1fe3d1))
253 |
254 | ### Bug Fixes
255 |
256 | - add inert.min.js to Hamburger component ([a8c5a15](https://github.com/shinokada/svelte-sidebar/commit/a8c5a15bf131630887cc7a8978c2751ec5c95868))
257 |
258 | ### [0.5.1](https://github.com/shinokada/svelte-sidebar/compare/v0.5.0...v0.5.1) (2022-05-02)
259 |
260 | ### Features
261 |
262 | - add responsive and its page ([97e1ac9](https://github.com/shinokada/svelte-sidebar/commit/97e1ac970b647caddf5311cf3711a9da32c9a8d6))
263 |
264 | ## [0.5.0](https://github.com/shinokada/svelte-sidebar/compare/v0.4.9...v0.5.0) (2022-05-02)
265 |
266 | ### [0.4.9](https://github.com/shinokada/svelte-sidebar/compare/v0.4.8...v0.4.9) (2022-04-19)
267 |
268 | ### Bug Fixes
269 |
270 | - add inset-0 to backdrop ([c0e0000](https://github.com/shinokada/svelte-sidebar/commit/c0e0000fcb8f85c183a19cc7a8969a4b0a0fb853))
271 |
272 | ### [0.4.8](https://github.com/shinokada/svelte-sidebar/compare/v0.4.7...v0.4.8) (2022-04-16)
273 |
274 | ### Bug Fixes
275 |
276 | - add logoClass to logo img ([a5dd44a](https://github.com/shinokada/svelte-sidebar/commit/a5dd44a6bba8cff836c2c1262104f7a72032108f))
277 |
278 | ### [0.4.7](https://github.com/shinokada/svelte-sidebar/compare/v0.4.4...v0.4.7) (2022-04-11)
279 |
280 | ### Bug Fixes
281 |
282 | - add if statement to add fixed full window so that clicking it close the sidebar ([1aef821](https://github.com/shinokada/svelte-sidebar/commit/1aef82157ee400bc771934ea37e7444d91ffe148))
283 | - add if statement to add fixed full window so that clicking it close the sidebar ([a3acc21](https://github.com/shinokada/svelte-sidebar/commit/a3acc21d678ac18aa9186780216250872368bb4d))
284 | - removed div ([b30373e](https://github.com/shinokada/svelte-sidebar/commit/b30373eaf1cf80fea1634bcf1bf4a8ca102b812c))
285 | - revert Hamburger component due to not able to click any thing ([b1c5fc6](https://github.com/shinokada/svelte-sidebar/commit/b1c5fc699b6e8ad15f6ac76eb09d1c06e404a4b6))
286 |
287 | ### [0.4.6](https://github.com/shinokada/svelte-sidebar/compare/v0.4.4...v0.4.6) (2022-04-11)
288 |
289 | ### Bug Fixes
290 |
291 | - removed div ([b30373e](https://github.com/shinokada/svelte-sidebar/commit/b30373eaf1cf80fea1634bcf1bf4a8ca102b812c))
292 | - revert Hamburger component due to not able to click any thing ([b1c5fc6](https://github.com/shinokada/svelte-sidebar/commit/b1c5fc699b6e8ad15f6ac76eb09d1c06e404a4b6))
293 |
294 | ### [0.4.4](https://github.com/shinokada/svelte-sidebar/compare/v0.4.1...v0.4.4) (2022-04-11)
295 |
296 | ### Features
297 |
298 | - add closing sidebar by clicking anywhere ([68a8e7e](https://github.com/shinokada/svelte-sidebar/commit/68a8e7eece984f58d55ab9d4a2f211779194cfda))
299 | - add logo and alt ([23f2d83](https://github.com/shinokada/svelte-sidebar/commit/23f2d8388a17011bdbf6401f816c45e0f3c6b5dd))
300 |
301 | ### Bug Fixes
302 |
303 | - version 0.4.2 ([0175f91](https://github.com/shinokada/svelte-sidebar/commit/0175f914f7fe9834b6ec984947cc4610aa66fa94))
304 |
305 | ### [0.4.1](https://github.com/shinokada/svelte-sidebar/compare/v0.4.0...v0.4.1) (2022-03-15)
306 |
307 | ### Bug Fixes
308 |
309 | - index.js for export ([eb3b67c](https://github.com/shinokada/svelte-sidebar/commit/eb3b67c60b912bccfe8120b614ac678c94e0c92d))
310 |
311 | ## [0.4.0](https://github.com/shinokada/svelte-sidebar/compare/v0.2.7...v0.4.0) (2022-03-15)
312 |
313 | ### ⚠ BREAKING CHANGES
314 |
315 | - link to href
316 |
317 | ### Features
318 |
319 | - add topmenu to sidebar default page. ([03a53f4](https://github.com/shinokada/svelte-sidebar/commit/03a53f43826aadd8594b9e9ceb470bad54166794))
320 |
321 | ### Bug Fixes
322 |
323 | - add h-screen to asideClass ([11babd5](https://github.com/shinokada/svelte-sidebar/commit/11babd51a7cc893fdb8c9ccfcc61c4feb66c10ea))
324 | - add headerClass to Sidebar component ([c1360ef](https://github.com/shinokada/svelte-sidebar/commit/c1360ef6fa13dab5c3ed1cf7a9b135b85cb0ff47))
325 | - add sidebar-topmenu to menu ([891cd0b](https://github.com/shinokada/svelte-sidebar/commit/891cd0b184461be995746b94e50a16fd97c957d3))
326 | - add typescript to SidebarList component ([f48d20a](https://github.com/shinokada/svelte-sidebar/commit/f48d20aedf4a5b0743b30cf302c2dba83fe3d942))
327 | - sidebar and add typescript ([5188b26](https://github.com/shinokada/svelte-sidebar/commit/5188b2610b4abf59fd4262047361b1b91e69859a))
328 | - update demo site ([e6b3247](https://github.com/shinokada/svelte-sidebar/commit/e6b324759a5ec085a6d6e0d6c72ee2a8c8d22fcc))
329 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Shinichi Okada
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Svelte-Sidebar-Menu
2 |
3 | [](https://www.npmjs.com/package/svelte-sidebar-menu)
4 | [](https://www.npmjs.com/package/svelte-sidebar-menu)
5 | [](https://github.com/shinokada/svelte-sidebar/releases)
6 | [](https://github.com/shinokada/svelte-sidebar/blob/main/LICENSE)
7 |
8 | ## Installation
9 |
10 | ```sh
11 | npm i -D svelte-sidebar-menu@latest
12 | ```
13 |
14 | ## Demo
15 |
16 | [Svelte-Sidebar-Menu](https://svelte-sidebar.vercel.app/)
17 |
18 | ## Features
19 |
20 | - [Responsive](https://svelte-sidebar.vercel.app/responsive/top-fix)
21 | - Click outside to close the sidebar.
22 | - [Flowbite-Svelte sidebar integration](https://flowbite-svelte.com/sidebars)
23 | - [Inert](https://svelte-sidebar.vercel.app/inert)
24 | - Svelte trainstions, [fly-x](https://svelte-sidebar.vercel.app/transitions/fly-x), [fly-y](https://svelte-sidebar.vercel.app/transitions/fly-y), [fade](https://svelte-sidebar.vercel.app/transitions/fade),[slide](https://svelte-sidebar.vercel.app/transitions/slide), and [blur](https://svelte-sidebar.vercel.app/responsive-transition/blur).
25 | - [No transition](https://svelte-sidebar.vercel.app/responsive-no-transition/top-fix)
26 | - [Sidebar style](https://svelte-sidebar.vercel.app/sidebar-custom-style)
27 | - [Sidebar style 2](https://svelte-sidebar.vercel.app/multi-custom-style)
28 | - [Top menu](https://svelte-sidebar.vercel.app/sidebar-topmenu)
29 | - [Fixed top menu](https://svelte-sidebar.vercel.app/fixed-menu)
30 | - [Scroll sidebar](https://svelte-sidebar.vercel.app/scroll-sidebar)
31 |
32 | ## Inert
33 |
34 | [HTMLElement.inert](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert) makes the browser to ignore user input events for the element. For example, when a user press a tab key, it cycles down links and input fields.
35 |
36 | Test [Svelte-Sidebar demo](https://svelte-sidebar.vercel.app/inert) by pressing the tab keyboard when the sidebar closed and opened. When the sidebar is closed, the tab ignores the sidebar links and when it is open the tab goes throught the menu links.
37 |
38 | ## Responsive Top Menu Fixed
39 |
40 | [Repo](https://github.com/shinokada/svelte-sidebar/tree/main/src/routes/responsive)
41 |
42 | [The demo](https://svelte-sidebar.vercel.app/responsive/top-fix) set the breaking point at 1024. When the window is greater than 1024px, the sidebar is kept open. When the winddow is less than 1024px, the sidebar is open by the bars at top-left.
43 |
44 | To make the sidebar responsive, add the following to all files:
45 |
46 | ## Responsive no transition
47 |
48 | [Repo](https://github.com/shinokada/svelte-sidebar/tree/main/src/routes/responsive-no-transition)
49 |
50 | ## Flowbite-Svelte Sidebar
51 |
52 | - [Demo](https://svelte-sidebar.vercel.app/flowbite-svelte-sidebar)
53 | - [Repo](https://github.com/shinokada/svelte-sidebar/tree/main/src/routes/flowbite-svelte-sidebar)
54 |
55 | ## Transition
56 |
57 | [Repo](https://github.com/shinokada/svelte-sidebar/tree/main/src/routes/transitions)
58 |
59 | ## Top menu fixed
60 |
61 | [Repo](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/fixed-menu.svelte)
62 |
63 | ## Inert
64 |
65 | [Repo](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/inert.svelte)
66 |
67 | ## Custome style
68 |
69 | - [Repo 1](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/multi-custom-style.svelte)
70 | - [Repo 2](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/sidebar-custom-style.svelte)
71 |
72 | ## Scroll
73 |
74 | [Repo](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/scroll-sidebar.svelte)
75 |
76 | ## Top menu (not fixed)
77 |
78 | [Repo](https://github.com/shinokada/svelte-sidebar/blob/main/src/routes/topmenu.svelte)
79 |
80 | ## Article
81 |
82 | [A Svelte Sidebar Menu Component Implemented with Tailwind CSS](https://medium.com/mkdir-awesome/a-svelte-sidebar-menu-component-implemented-with-tailwind-css-c039b23010e)
83 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-sidebar-menu",
3 | "version": "0.9.12",
4 | "description": "A sidebar package for Svelte",
5 | "main": "index.js",
6 | "author": {
7 | "name": "Shinichi Okada",
8 | "email": "connect@codewithshin.com",
9 | "url": "https://blog.codewithshin.com"
10 | },
11 | "bugs": "https://github.com/shinokada/svelte-sidebar/issues",
12 | "homepage": "https://svelte-sidebar.vercel.app/",
13 | "license": "MIT",
14 | "scripts": {
15 | "dev": "svelte-kit dev",
16 | "build": "svelte-kit build",
17 | "package": "svelte-kit package",
18 | "preview": "svelte-kit preview",
19 | "prepare": "svelte-kit sync",
20 | "test": "playwright test",
21 | "check": "svelte-check --tsconfig ./tsconfig.json",
22 | "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
23 | "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
24 | "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
25 | "gen:props": "node ./node_modules/createprops/createprops.js"
26 | },
27 | "devDependencies": {
28 | "@playwright/test": "^1.19.1",
29 | "@sveltejs/adapter-auto": "next",
30 | "@sveltejs/kit": "next",
31 | "@typescript-eslint/eslint-plugin": "^5.10.1",
32 | "@typescript-eslint/parser": "^5.10.1",
33 | "autoprefixer": "^10.4.2",
34 | "createprops": "^0.4.4",
35 | "eslint": "^7.32.0",
36 | "eslint-config-prettier": "^8.3.0",
37 | "eslint-plugin-svelte3": "^3.2.1",
38 | "flowbite-svelte": "^0.16.10",
39 | "postcss": "^8.4.5",
40 | "postcss-load-config": "^3.1.1",
41 | "prettier": "^2.5.1",
42 | "prettier-plugin-svelte": "^2.5.0",
43 | "svelte": "^3.48.0",
44 | "svelte-check": "^2.2.6",
45 | "svelte-heros": "^2.2.3",
46 | "svelte-preprocess": "^4.10.1",
47 | "svelte2tsx": "^0.5.5",
48 | "tailwindcss": "^3.0.12",
49 | "tslib": "^2.3.1",
50 | "typescript": "~4.6.2"
51 | },
52 | "type": "module",
53 | "keywords": [
54 | "svelte",
55 | "sveltekit",
56 | "sidebar"
57 | ],
58 | "repository": {
59 | "type": "git",
60 | "url": "https://github.com/shinokada/svelte-sidebar"
61 | },
62 | "engines": {
63 | "npm": ">=7.0.0",
64 | "node": ">=16.0.0"
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/playwright.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('@playwright/test').PlaywrightTestConfig} */
2 | const config = {
3 | fullyParallel: true,
4 | webServer: {
5 | command: 'npm run build && npm run preview',
6 | port: 3000
7 | }
8 | };
9 |
10 | export default config;
11 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | const tailwindcss = require('tailwindcss');
2 | const autoprefixer = require('autoprefixer');
3 |
4 | const config = {
5 | plugins: [
6 | //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
7 | tailwindcss(),
8 | //But others, like autoprefixer, need to run after,
9 | autoprefixer
10 | ]
11 | };
12 |
13 | module.exports = config;
14 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | /* Write your global styles here, in PostCSS syntax */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | #hamburgerBtn {
7 | position: absolute;
8 | top: 6px;
9 | left: 0px;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
1 | /// %sveltekit.body%
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///
26 | {/if}
27 |
28 | handleDropdown()} class={dropdownLi}
29 | >{name}
30 |
42 |
43 |
49 |
50 | {#each child as { href, name, rel, id }}
51 |
52 | {name}
53 |
54 | {/each}
55 |
56 |
58 |
--------------------------------------------------------------------------------
/src/lib/Nav.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
--------------------------------------------------------------------------------
/src/lib/Navbar.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
29 |
--------------------------------------------------------------------------------
/src/lib/OutsideClick.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
17 |
--------------------------------------------------------------------------------
/src/lib/Responsive.svelte:
--------------------------------------------------------------------------------
1 |
30 |
31 |
74 |
75 |
86 |
99 |
100 |
103 |
105 | {:else}
106 |
107 |
118 |
131 |
132 |
135 |
136 |
65 |
76 |
78 | {#if transitionType}
79 | {#if sidebarStatus}
80 |
94 | {/if}
95 | {:else}
96 |
111 | {/if}
112 |
113 |
114 |
135 |
--------------------------------------------------------------------------------
/src/lib/SidebarList.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 | {#if $sidebarStayOpen === true}
17 |
20 | {:else}
21 |
24 | {/if}
25 |
--------------------------------------------------------------------------------
/src/lib/TopMenu.svelte:
--------------------------------------------------------------------------------
1 |
37 |
38 |
80 |
--------------------------------------------------------------------------------
/src/lib/click_outside.js:
--------------------------------------------------------------------------------
1 | // https://svelte.dev/tutorial/actions
2 |
3 | export function clickOutside(node) {
4 | const handleClick = (event) => {
5 | if (!node.contains(event.target)) {
6 | node.dispatchEvent(new CustomEvent('outclick'));
7 | }
8 | };
9 |
10 | document.addEventListener('click', handleClick, true);
11 |
12 | return {
13 | destroy() {
14 | document.removeEventListener('click', handleClick, true);
15 | }
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/src/lib/components/Hamburger.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
22 |
23 |
27 |
28 |
29 |
61 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Aside } from './Aside.svelte';
2 | export { default as Nav } from './Nav.svelte';
3 | export { default as Navbar } from './Navbar.svelte';
4 | export { default as Responsive } from './Responsive.svelte';
5 | export { default as Sidebar } from './Sidebar.svelte';
6 | export { default as SidebarList } from './SidebarList.svelte';
7 | export { default as TopMenu } from './TopMenu.svelte';
8 | export { default as Side } from './Side.svelte';
9 | export { clickOutside } from './click_outside.js';
10 | export { default as OutsideClick } from './OutsideClick.svelte';
11 |
12 | export { sidebarIsInert, sidebarOpen, sidebarStayOpen } from './sidebarStore';
13 |
--------------------------------------------------------------------------------
/src/lib/inert.min.js:
--------------------------------------------------------------------------------
1 | !(function (e, t) {
2 | 'object' == typeof exports && 'undefined' != typeof module
3 | ? t()
4 | : 'function' == typeof define && define.amd
5 | ? define('inert', t)
6 | : t();
7 | })(0, function () {
8 | 'use strict';
9 | var u = (function () {
10 | function i(e, t) {
11 | for (var n = 0; n < t.length; n++) {
12 | var i = t[n];
13 | (i.enumerable = i.enumerable || !1),
14 | (i.configurable = !0),
15 | 'value' in i && (i.writable = !0),
16 | Object.defineProperty(e, i.key, i);
17 | }
18 | }
19 | return function (e, t, n) {
20 | return t && i(e.prototype, t), n && i(e, n), e;
21 | };
22 | })();
23 | function h(e, t) {
24 | if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function');
25 | }
26 | !(function () {
27 | if ('undefined' != typeof window) {
28 | var o = Array.prototype.slice,
29 | r = Element.prototype.matches || Element.prototype.msMatchesSelector,
30 | i = [
31 | 'a[href]',
32 | 'area[href]',
33 | 'input:not([disabled])',
34 | 'select:not([disabled])',
35 | 'textarea:not([disabled])',
36 | 'button:not([disabled])',
37 | 'details',
38 | 'summary',
39 | 'iframe',
40 | 'object',
41 | 'embed',
42 | '[contenteditable]'
43 | ].join(','),
44 | s = (function () {
45 | function n(e, t) {
46 | h(this, n),
47 | (this._inertManager = t),
48 | (this._rootElement = e),
49 | (this._managedNodes = new Set()),
50 | this._rootElement.hasAttribute('aria-hidden')
51 | ? (this._savedAriaHidden = this._rootElement.getAttribute('aria-hidden'))
52 | : (this._savedAriaHidden = null),
53 | this._rootElement.setAttribute('aria-hidden', 'true'),
54 | this._makeSubtreeUnfocusable(this._rootElement),
55 | (this._observer = new MutationObserver(this._onMutation.bind(this))),
56 | this._observer.observe(this._rootElement, {
57 | attributes: !0,
58 | childList: !0,
59 | subtree: !0
60 | });
61 | }
62 | return (
63 | u(n, [
64 | {
65 | key: 'destructor',
66 | value: function () {
67 | this._observer.disconnect(),
68 | this._rootElement &&
69 | (null !== this._savedAriaHidden
70 | ? this._rootElement.setAttribute('aria-hidden', this._savedAriaHidden)
71 | : this._rootElement.removeAttribute('aria-hidden')),
72 | this._managedNodes.forEach(function (e) {
73 | this._unmanageNode(e.node);
74 | }, this),
75 | (this._observer = null),
76 | (this._rootElement = null),
77 | (this._managedNodes = null),
78 | (this._inertManager = null);
79 | }
80 | },
81 | {
82 | key: '_makeSubtreeUnfocusable',
83 | value: function (e) {
84 | var t = this;
85 | l(e, function (e) {
86 | return t._visitNode(e);
87 | });
88 | var n = document.activeElement;
89 | if (!document.body.contains(e)) {
90 | for (var i = e, o = void 0; i; ) {
91 | if (i.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
92 | o = i;
93 | break;
94 | }
95 | i = i.parentNode;
96 | }
97 | o && (n = o.activeElement);
98 | }
99 | e.contains(n) &&
100 | (n.blur(), n === document.activeElement && document.body.focus());
101 | }
102 | },
103 | {
104 | key: '_visitNode',
105 | value: function (e) {
106 | if (e.nodeType === Node.ELEMENT_NODE) {
107 | var t = e;
108 | t !== this._rootElement && t.hasAttribute('inert') && this._adoptInertRoot(t),
109 | (r.call(t, i) || t.hasAttribute('tabindex')) && this._manageNode(t);
110 | }
111 | }
112 | },
113 | {
114 | key: '_manageNode',
115 | value: function (e) {
116 | var t = this._inertManager.register(e, this);
117 | this._managedNodes.add(t);
118 | }
119 | },
120 | {
121 | key: '_unmanageNode',
122 | value: function (e) {
123 | var t = this._inertManager.deregister(e, this);
124 | t && this._managedNodes.delete(t);
125 | }
126 | },
127 | {
128 | key: '_unmanageSubtree',
129 | value: function (e) {
130 | var t = this;
131 | l(e, function (e) {
132 | return t._unmanageNode(e);
133 | });
134 | }
135 | },
136 | {
137 | key: '_adoptInertRoot',
138 | value: function (e) {
139 | var t = this._inertManager.getInertRoot(e);
140 | t ||
141 | (this._inertManager.setInert(e, !0), (t = this._inertManager.getInertRoot(e))),
142 | t.managedNodes.forEach(function (e) {
143 | this._manageNode(e.node);
144 | }, this);
145 | }
146 | },
147 | {
148 | key: '_onMutation',
149 | value: function (e, t) {
150 | e.forEach(function (e) {
151 | var t = e.target;
152 | if ('childList' === e.type)
153 | o.call(e.addedNodes).forEach(function (e) {
154 | this._makeSubtreeUnfocusable(e);
155 | }, this),
156 | o.call(e.removedNodes).forEach(function (e) {
157 | this._unmanageSubtree(e);
158 | }, this);
159 | else if ('attributes' === e.type)
160 | if ('tabindex' === e.attributeName) this._manageNode(t);
161 | else if (
162 | t !== this._rootElement &&
163 | 'inert' === e.attributeName &&
164 | t.hasAttribute('inert')
165 | ) {
166 | this._adoptInertRoot(t);
167 | var n = this._inertManager.getInertRoot(t);
168 | this._managedNodes.forEach(function (e) {
169 | t.contains(e.node) && n._manageNode(e.node);
170 | });
171 | }
172 | }, this);
173 | }
174 | },
175 | {
176 | key: 'managedNodes',
177 | get: function () {
178 | return new Set(this._managedNodes);
179 | }
180 | },
181 | {
182 | key: 'hasSavedAriaHidden',
183 | get: function () {
184 | return null !== this._savedAriaHidden;
185 | }
186 | },
187 | {
188 | key: 'savedAriaHidden',
189 | set: function (e) {
190 | this._savedAriaHidden = e;
191 | },
192 | get: function () {
193 | return this._savedAriaHidden;
194 | }
195 | }
196 | ]),
197 | n
198 | );
199 | })(),
200 | a = (function () {
201 | function n(e, t) {
202 | h(this, n),
203 | (this._node = e),
204 | (this._overrodeFocusMethod = !1),
205 | (this._inertRoots = new Set([t])),
206 | (this._savedTabIndex = null),
207 | (this._destroyed = !1),
208 | this.ensureUntabbable();
209 | }
210 | return (
211 | u(n, [
212 | {
213 | key: 'destructor',
214 | value: function () {
215 | if (
216 | (this._throwIfDestroyed(),
217 | this._node && this._node.nodeType === Node.ELEMENT_NODE)
218 | ) {
219 | var e = this._node;
220 | null !== this._savedTabIndex
221 | ? e.setAttribute('tabindex', this._savedTabIndex)
222 | : e.removeAttribute('tabindex'),
223 | this._overrodeFocusMethod && delete e.focus;
224 | }
225 | (this._node = null), (this._inertRoots = null), (this._destroyed = !0);
226 | }
227 | },
228 | {
229 | key: '_throwIfDestroyed',
230 | value: function () {
231 | if (this.destroyed) throw new Error('Trying to access destroyed InertNode');
232 | }
233 | },
234 | {
235 | key: 'ensureUntabbable',
236 | value: function () {
237 | if (this.node.nodeType === Node.ELEMENT_NODE) {
238 | var e = this.node;
239 | if (r.call(e, i)) {
240 | if (-1 === e.tabIndex && this.hasSavedTabIndex) return;
241 | e.hasAttribute('tabindex') && (this._savedTabIndex = e.tabIndex),
242 | e.setAttribute('tabindex', '-1'),
243 | e.nodeType === Node.ELEMENT_NODE &&
244 | ((e.focus = function () {}), (this._overrodeFocusMethod = !0));
245 | } else
246 | e.hasAttribute('tabindex') &&
247 | ((this._savedTabIndex = e.tabIndex), e.removeAttribute('tabindex'));
248 | }
249 | }
250 | },
251 | {
252 | key: 'addInertRoot',
253 | value: function (e) {
254 | this._throwIfDestroyed(), this._inertRoots.add(e);
255 | }
256 | },
257 | {
258 | key: 'removeInertRoot',
259 | value: function (e) {
260 | this._throwIfDestroyed(),
261 | this._inertRoots.delete(e),
262 | 0 === this._inertRoots.size && this.destructor();
263 | }
264 | },
265 | {
266 | key: 'destroyed',
267 | get: function () {
268 | return this._destroyed;
269 | }
270 | },
271 | {
272 | key: 'hasSavedTabIndex',
273 | get: function () {
274 | return null !== this._savedTabIndex;
275 | }
276 | },
277 | {
278 | key: 'node',
279 | get: function () {
280 | return this._throwIfDestroyed(), this._node;
281 | }
282 | },
283 | {
284 | key: 'savedTabIndex',
285 | set: function (e) {
286 | this._throwIfDestroyed(), (this._savedTabIndex = e);
287 | },
288 | get: function () {
289 | return this._throwIfDestroyed(), this._savedTabIndex;
290 | }
291 | }
292 | ]),
293 | n
294 | );
295 | })(),
296 | e = (function () {
297 | function t(e) {
298 | if ((h(this, t), !e))
299 | throw new Error('Missing required argument; InertManager needs to wrap a document.');
300 | (this._document = e),
301 | (this._managedNodes = new Map()),
302 | (this._inertRoots = new Map()),
303 | (this._observer = new MutationObserver(this._watchForInert.bind(this))),
304 | d(e.head || e.body || e.documentElement),
305 | 'loading' === e.readyState
306 | ? e.addEventListener('DOMContentLoaded', this._onDocumentLoaded.bind(this))
307 | : this._onDocumentLoaded();
308 | }
309 | return (
310 | u(t, [
311 | {
312 | key: 'setInert',
313 | value: function (e, t) {
314 | if (t) {
315 | if (this._inertRoots.has(e)) return;
316 | var n = new s(e, this);
317 | if (
318 | (e.setAttribute('inert', ''),
319 | this._inertRoots.set(e, n),
320 | !this._document.body.contains(e))
321 | )
322 | for (var i = e.parentNode; i; ) 11 === i.nodeType && d(i), (i = i.parentNode);
323 | } else {
324 | if (!this._inertRoots.has(e)) return;
325 | this._inertRoots.get(e).destructor(),
326 | this._inertRoots.delete(e),
327 | e.removeAttribute('inert');
328 | }
329 | }
330 | },
331 | {
332 | key: 'getInertRoot',
333 | value: function (e) {
334 | return this._inertRoots.get(e);
335 | }
336 | },
337 | {
338 | key: 'register',
339 | value: function (e, t) {
340 | var n = this._managedNodes.get(e);
341 | return (
342 | void 0 !== n ? n.addInertRoot(t) : (n = new a(e, t)),
343 | this._managedNodes.set(e, n),
344 | n
345 | );
346 | }
347 | },
348 | {
349 | key: 'deregister',
350 | value: function (e, t) {
351 | var n = this._managedNodes.get(e);
352 | return n
353 | ? (n.removeInertRoot(t), n.destroyed && this._managedNodes.delete(e), n)
354 | : null;
355 | }
356 | },
357 | {
358 | key: '_onDocumentLoaded',
359 | value: function () {
360 | o.call(this._document.querySelectorAll('[inert]')).forEach(function (e) {
361 | this.setInert(e, !0);
362 | }, this),
363 | this._observer.observe(this._document.body || this._document.documentElement, {
364 | attributes: !0,
365 | subtree: !0,
366 | childList: !0
367 | });
368 | }
369 | },
370 | {
371 | key: '_watchForInert',
372 | value: function (e, t) {
373 | var i = this;
374 | e.forEach(function (e) {
375 | switch (e.type) {
376 | case 'childList':
377 | o.call(e.addedNodes).forEach(function (e) {
378 | if (e.nodeType === Node.ELEMENT_NODE) {
379 | var t = o.call(e.querySelectorAll('[inert]'));
380 | r.call(e, '[inert]') && t.unshift(e),
381 | t.forEach(function (e) {
382 | this.setInert(e, !0);
383 | }, i);
384 | }
385 | }, i);
386 | break;
387 | case 'attributes':
388 | if ('inert' !== e.attributeName) return;
389 | var t = e.target,
390 | n = t.hasAttribute('inert');
391 | i.setInert(t, n);
392 | }
393 | }, this);
394 | }
395 | }
396 | ]),
397 | t
398 | );
399 | })();
400 | if (!Element.prototype.hasOwnProperty('inert')) {
401 | var t = new e(document);
402 | Object.defineProperty(Element.prototype, 'inert', {
403 | enumerable: !0,
404 | get: function () {
405 | return this.hasAttribute('inert');
406 | },
407 | set: function (e) {
408 | t.setInert(this, e);
409 | }
410 | });
411 | }
412 | }
413 | function l(e, t, n) {
414 | if (e.nodeType == Node.ELEMENT_NODE) {
415 | var i = e;
416 | t && t(i);
417 | var o = i.shadowRoot;
418 | if (o) return void l(o, t, o);
419 | if ('content' == i.localName) {
420 | for (
421 | var r = i, s = r.getDistributedNodes ? r.getDistributedNodes() : [], a = 0;
422 | a < s.length;
423 | a++
424 | )
425 | l(s[a], t, n);
426 | return;
427 | }
428 | if ('slot' == i.localName) {
429 | for (
430 | var d = i, u = d.assignedNodes ? d.assignedNodes({ flatten: !0 }) : [], h = 0;
431 | h < u.length;
432 | h++
433 | )
434 | l(u[h], t, n);
435 | return;
436 | }
437 | }
438 | for (var c = e.firstChild; null != c; ) l(c, t, n), (c = c.nextSibling);
439 | }
440 | function d(e) {
441 | if (!e.querySelector('style#inert-style, link#inert-style')) {
442 | var t = document.createElement('style');
443 | t.setAttribute('id', 'inert-style'),
444 | (t.textContent =
445 | '\n[inert] {\n pointer-events: none;\n cursor: default;\n}\n\n[inert], [inert] * {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n'),
446 | e.appendChild(t);
447 | }
448 | }
449 | })();
450 | });
451 |
--------------------------------------------------------------------------------
/src/lib/sidebarStore.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | // used to toggle the visibility of the sidebar
4 | export const sidebarOpen = writable(false);
5 |
6 | // when the sidebar is closed, it adds inert to the sidebar otherwise it adds null
7 | export const sidebarIsInert = writable(true);
8 |
9 | // Responsive component set to true when the screen is more than 1024px
10 | // then it hide the hamburger menu
11 | export const sidebarStayOpen = writable(false);
12 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface MenuType {
2 | href: string;
3 | name: string;
4 | rel?: string;
5 | child?: MenuType[];
6 | }
7 |
8 | export interface TopMenuType {
9 | id?: string;
10 | href?: string;
11 | name: string;
12 | rel?: string;
13 | child?: TopMenuType[];
14 | }
15 |
16 | export interface TransitionParamTypes {
17 | amount?: number;
18 | delay?: number;
19 | duration?: number;
20 | easing?: (t: number) => number;
21 | opacity?: number;
22 | x?: number;
23 | y?: number;
24 | }
25 |
26 | export type TransitionTypes =
27 | | 'fade'
28 | | 'fly'
29 | | 'slide'
30 | | 'blur'
31 | | 'in:fly'
32 | | 'out:fly'
33 | | 'in:slide'
34 | | 'out:slide'
35 | | 'in:fade'
36 | | 'out:fade'
37 | | 'in:blur'
38 | | 'out:blur'
39 | | undefined;
40 |
--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
26 |
27 |
36 |
38 |
39 |
40 | {#each menuList as { href, name, rel }}
41 |
44 |
45 |
46 |
49 |
50 | {title}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 | {lorem}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 | {lorem}
69 |
70 |
71 | {lorem}
72 |
73 |
74 |
75 |
76 | Svelte-Sidebar-Menu Fixed Top Menu Example
77 |
78 |
--------------------------------------------------------------------------------
/src/routes/flowbite-svelte-sidebar/__layout.svelte:
--------------------------------------------------------------------------------
1 |
235 |
236 |
251 |
252 |
254 |
255 |
256 |
258 |
259 |
260 | Svelte-Sidebar-Menu with Flowbite-Svelte Sidebar Component
261 |
263 |
--------------------------------------------------------------------------------
/src/routes/flowbite-svelte-sidebar/index.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | {title}
8 |
9 |
10 | {lorem}
11 |
12 |
13 | {lorem}
14 |
15 |
16 | {lorem}
17 |
18 |
19 | {lorem}
20 |
21 |
22 | {lorem}
23 |
24 |
25 | {lorem}
26 |
27 |
28 | {lorem}
29 |
30 |
--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
50 |
51 | {#each mainMenuList as { href, name, rel }}
52 |
55 |
56 |
57 |
58 |
59 | {siteName}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 | {lorem}
69 |
70 |
71 | {lorem}
72 |
73 |
74 | {lorem}
75 |
76 |
77 | {lorem}
78 |
79 |
80 | {lorem}
81 |
82 |
83 | {lorem}
84 |
85 |
86 | {lorem}
87 |
88 |
89 |
90 |
91 | Svelte-Sidebar-Menu Examples
92 |
93 |
--------------------------------------------------------------------------------
/src/routes/inert.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
16 |
17 |
18 | {title}
19 |
20 | Svelte-Sidebar uses inert polyfill. Press a tab without opening the sidebar. This will go
21 | through the link without the sidebar. When you open the side bar then it will go through the
22 | sidebar menu link.
23 |
24 |
27 |
28 |
29 | Link 2
30 |
38 |
39 |
Inert paragraph
40 |
54 |
55 | {lorem}
56 |
57 |
59 | {lorem}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 | {lorem}
69 |
70 |
71 | {lorem}
72 |
73 |
74 | {lorem}
75 |
76 |
77 | {lorem}
78 |
79 |
80 | {lorem}
81 |
82 |
83 |
84 |
85 | Svelte-Sidebar-Menu Inert Example
86 |
87 |
88 |
102 |
--------------------------------------------------------------------------------
/src/routes/menus.ts:
--------------------------------------------------------------------------------
1 | import type { MenuType, TopMenuType } from '$lib/types';
2 |
3 | export const mainMenuList: MenuType[] = [
4 | { href: '/responsive/top-fix', rel: 'external', name: 'Responsive' },
5 | { href: '/responsive-no-transition/top-fix', rel: 'external', name: 'Responsive No Transition' },
6 | { href: '/transitions/blur', rel: 'external', name: 'Transitions' },
7 | { href: '/topmenu', rel: 'external', name: 'Other menus' },
8 | { href: '/flowbite-svelte-sidebar', rel: 'external', name: 'Flowbite-Svelte Sidebar' },
9 | { href: '/props', rel: 'external', name: 'Props' },
10 | { href: 'https://www.npmjs.com/package/svelte-sidebar-menu', name: 'NPM' },
11 | { href: 'https://github.com/shinokada/svelte-sidebar', name: 'GitHub' }
12 | ];
13 |
14 | export const topMenuList: MenuType[] = [
15 | { href: '/responsive/top-fix', rel: 'external', name: 'Responsive' },
16 | { href: '/responsive-no-transition/top-fix', rel: 'external', name: 'Responsive No Transition' },
17 | { href: '/transitions/blur', rel: 'external', name: 'Transitions' },
18 | { href: '/three-columns', rel: 'external', name: '3 Columns' },
19 | { href: '/topmenu', rel: 'external', name: 'Other menus' }
20 | ];
21 |
22 | export const menuListResponsive: MenuType[] = [
23 | { href: '/responsive/top-fix', name: 'Responsive Top Fixed' },
24 | { href: '/responsive/top-fix-2', name: 'Responsive Top Fixed 2' },
25 | { href: '/responsive/top-fix-3', name: 'Responsive Top Fixed 3' }
26 | ];
27 |
28 | export const menuListResponsiveTransition: MenuType[] = [
29 | { href: '/responsive-transition/blur', name: 'Responsive Blur' },
30 | { href: '/responsive-transition/fade', name: 'Responsive Fade' },
31 | { href: '/responsive-transition/fly-x', name: 'Responsive Fly-x' },
32 | { href: '/responsive-transition/fly-y', name: 'Responsive Fly-y' },
33 | { href: '/responsive-transition/slide', name: 'Responsive Slide' }
34 | ];
35 |
36 | export const menuListResponsiveNoTransition: MenuType[] = [
37 | { href: '/responsive-no-transition/top-fix', name: 'Responsive No Transition' },
38 | { href: '/responsive-no-transition/top-fix-2', name: 'Responsive No Transition 2' },
39 | { href: '/responsive-no-transition/top-fix-3', name: 'Responsive No Transition 3' }
40 | ];
41 |
42 | export const menuListTransition: MenuType[] = [
43 | { href: '/transitions/slide', name: 'Slide' },
44 | { href: '/transitions/fade', name: 'Fade' },
45 | { href: '/transitions/fly-x', name: 'Fly X' },
46 | { href: '/transitions/fly-y', name: 'Fly Y' },
47 | { href: '/transitions/blur', name: 'Blur' }
48 | ];
49 |
50 | export const menuList: MenuType[] = [
51 | { href: '/fixed-menu', rel: 'external', name: 'Fixed Top Menu' },
52 | { href: '/inert', rel: 'external', name: 'Inert' },
53 | { href: '/multi-custom-style', rel: 'external', name: 'Multiple-menu Custom Style' },
54 | { href: '/multi-default', rel: 'external', name: 'Multiple-menu Default' },
55 | { href: '/scroll-sidebar', rel: 'external', name: 'Scroll Sidebar' },
56 | { href: '/sidebar-custom-style', rel: 'external', name: 'Sidebar Custom Style' },
57 | { href: '/topmenu', rel: 'external', name: 'Non-fixed Top Menu' }
58 | ];
59 |
60 | export const allMenuList: MenuType[] = [
61 | { href: '/', name: 'Sidebar Default' },
62 | { href: '/responsive/top-fix', name: 'Responsive Top Fixed' },
63 | { href: '/responsive/top-fix-2', name: 'Responsive Top Fixed 2' },
64 | { href: '/responsive/top-fix-3', name: 'Responsive Top Fixed 3' },
65 | { href: '/responsive-transition/blur', name: 'Responsive blur' },
66 | { href: '/responsive-transition/fade', name: 'Responsive fade' },
67 | { href: '/responsive-transition/fly-x', name: 'Responsive fly-x' },
68 | { href: '/responsive-transition/fly-y', name: 'Responsive fly-y' },
69 | { href: '/responsive-transition/slide', name: 'Responsive slide' },
70 | { href: '/transitions/slide', name: 'Slide' },
71 | { href: '/transitions/fade', name: 'Fade' },
72 | { href: '/transitions/fly-x', name: 'Fly X' },
73 | { href: '/transitions/fly-y', name: 'Fly Y' },
74 | { href: '/transitions/blur', name: 'Blur' },
75 | { href: '/responsive-no-transition/top-fix', name: 'Responsive No Transition' },
76 | { href: '/responsive-no-transition/top-fix-2', name: 'Responsive No Transition 2' },
77 | { href: '/responsive-no-transition/top-fix-3', name: 'Responsive No Transition 3' },
78 | { href: '/fixed-menu', name: 'Fixed Top Menu' },
79 | { href: '/inert', name: 'Inert' },
80 | { href: '/multi-custom-style', name: 'Multiple-menu Custom Style' },
81 | { href: '/multi-default', name: 'Multiple-menu Default' },
82 | { href: '/scroll-sidebar', name: 'Scroll Sidebar' },
83 | { href: '/sidebar-custom-style', name: 'Sidebar Custom Style' },
84 | { href: '/topmenu', name: 'Top Menu' }
85 | ];
86 |
87 | export const topMenus: TopMenuType[] = [
88 | {
89 | id: '1',
90 | name: 'Responsive',
91 | child: [
92 | {
93 | id: '2',
94 | name: 'Responsive Top Fixed',
95 | href: '/responsive/top-fix'
96 | },
97 | {
98 | id: '3',
99 | name: 'Responsive Top Fixed 2',
100 | href: '/responsive/top-fix-2'
101 | },
102 | {
103 | id: '4',
104 | name: 'Responsive Top Fixed 3',
105 | href: '/responsive/top-fix-3'
106 | }
107 | ]
108 | },
109 | {
110 | id: '11',
111 | name: 'No Transition',
112 | child: [
113 | {
114 | id: '12',
115 | name: 'Responsive Top Fixed 1',
116 | href: '/responsive-no-transition/top-fix'
117 | },
118 | {
119 | id: '13',
120 | name: 'Responsive Top Fixed 2',
121 | href: '/responsive-no-transition/top-fix-2'
122 | },
123 | {
124 | id: '14',
125 | name: 'Responsive Top Fixed 3',
126 | href: '/responsive-no-transition/top-fix-3'
127 | }
128 | ]
129 | },
130 | {
131 | id: '21',
132 | name: 'Responsive Transition',
133 | child: [
134 | {
135 | id: '22',
136 | name: 'Blur Transition',
137 | href: '/responsive-transition/blur'
138 | },
139 | {
140 | id: '23',
141 | name: 'Fade Transition',
142 | href: '/responsive-transition/fade'
143 | },
144 | {
145 | id: '24',
146 | name: 'Fly X Transition',
147 | href: '/responsive-transition/fly-x'
148 | },
149 | {
150 | id: '25',
151 | name: 'Fly Y Transition',
152 | href: '/responsive-transition/fly-y'
153 | },
154 | {
155 | id: '26',
156 | name: 'Slide Transition',
157 | href: '/responsive-transition/slide'
158 | }
159 | ]
160 | },
161 | {
162 | id: '31',
163 | name: 'Others',
164 | child: [
165 | {
166 | id: '32',
167 | name: 'Fixed Top Menu',
168 | href: '/fixed-menu'
169 | },
170 | {
171 | id: '33',
172 | name: 'Inert',
173 | href: '/inert'
174 | },
175 | {
176 | id: '34',
177 | name: 'Multiple-menu Custom Style',
178 | href: '/multi-custom-style'
179 | },
180 | {
181 | id: '35',
182 | name: 'Multiple-menu Default',
183 | href: '/multi-default'
184 | },
185 | {
186 | id: '36',
187 | name: 'Scroll Sidebar',
188 | href: '/scroll-sidebar'
189 | },
190 | {
191 | id: '37',
192 | name: 'Sidebar Custom Style',
193 | href: '/sidebar-custom-style'
194 | },
195 | {
196 | id: '38',
197 | name: 'Sidebar Top Menu',
198 | href: '/sidebar-topmenu'
199 | },
200 | {
201 | id: '39',
202 | name: 'Top Menu',
203 | href: '/topmenu'
204 | }
205 | ]
206 | }
207 | ];
208 |
209 | export const lorem = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta distinctio
210 | autem aperiam hic quis animi magnam alias voluptas voluptatibus doloremque
211 | nisi sapiente tempore quidem, exercitationem pariatur natus a dignissimos
212 | consequuntur. Ea soluta voluptate voluptates dolore vel dolorum doloribus
213 | aut pariatur. Itaque, quam molestiae adipisci vel libero aspernatur, ea quae
214 | voluptatibus, ullam dignissimos iusto doloremque voluptatem saepe iste
215 | expedita perferendis quasi! Atque necessitatibus vel distinctio, voluptatum
216 | culpa tempora error quas illo eum impedit. Necessitatibus vitae eos tenetur,
217 | ipsa, modi odio architecto rerum ipsum incidunt eligendi asperiores.
218 | Deserunt saepe dolor neque dolorum! Animi eveniet cupiditate cum sint, quam,
219 | praesentium illum optio ipsum neque deserunt magni, sed vitae minima eius
220 | quis laudantium quisquam accusamus sapiente necessitatibus et quidem! Ipsum
221 | inventore nemo nam deserunt. Beatae deleniti quod aspernatur labore natus
222 | iusto odit, quaerat modi culpa repudiandae, voluptatum eum, recusandae
223 | voluptas corrupti cum soluta quos facere a in animi laudantium vel esse
224 | veniam quibusdam? Quis.
225 |
226 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta distinctio
227 | autem aperiam hic quis animi magnam alias voluptas voluptatibus doloremque
228 | ipsa, iusto odit, quaerat modi culpa repudiandae, voluptatum eum, recusandae
229 | voluptas corrupti cum soluta quos facere a in animi laudantium vel esse
230 | veniam quibusdam? Quis.`;
231 |
--------------------------------------------------------------------------------
/src/routes/multi-custom-style.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
28 |
29 | {#each menuList as { href, name }}
30 |
33 |
34 | Menu 2
35 | {#each menuList as { href, name }}
36 |
39 |
40 |
41 |
44 |
45 | {title}
46 |
47 |
48 | {lorem}
49 |
50 |
51 | {lorem}
52 |
53 |
54 | {lorem}
55 |
56 |
57 | {lorem}
58 |
59 |
60 | {lorem}
61 |
62 |
63 | {lorem}
64 |
65 |
66 | {lorem}
67 |
68 |
69 | {lorem}
70 |
71 |
72 |
73 |
74 | Svelte-Sidebar-Menu Multi-custom Style Example
75 |
76 |
--------------------------------------------------------------------------------
/src/routes/multi-default.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
12 |
13 | {#each menuList as { href, name, rel }}
14 |
17 |
18 | Menu 2
19 | {#each menuList as { href, name, rel }}
20 |
23 |
24 |
25 |
28 |
29 | {title}
30 |
31 |
32 | {lorem}
33 |
34 |
35 | {lorem}
36 |
37 |
38 | {lorem}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 | {lorem}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 | {lorem}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 |
69 |
70 | Svelte-Sidebar-Menu Multi-Menu Default Example
71 |
72 |
--------------------------------------------------------------------------------
/src/routes/props.svelte:
--------------------------------------------------------------------------------
1 |
62 |
63 |
64 |
76 |
77 | {#each mainMenuList as { href, name, rel }}
78 |
81 |
82 |
83 |
84 | Props
85 | The component has the following props, type, and default values.
86 |
87 | Aside
88 |
89 |
92 |
93 | Dropdown
94 |
95 |
98 |
99 | Hamburger
100 |
101 |
104 |
105 | Nav
106 |
107 |
110 |
111 | Navbar
112 |
113 |
116 |
117 | Side
118 |
119 |
122 |
123 | Sidebar
124 |
125 |
128 |
129 | Sidebar
130 |
131 |
134 |
135 | TopMenu
136 |
137 |
140 |
141 |
142 |
143 | Svelte-Sidebar-Menu Props
144 |
145 |
146 |
154 |
--------------------------------------------------------------------------------
/src/routes/props/Aside.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | ["transitionParams", "TransitionParamTypes ", "{}"],
4 | ["transitionType", "TransitionTypes ", "'fly'"],
5 | [" asideClass ", "string", " 'absolute w-auto h-screen bg-gray-200 border-r-2 shadow-lg'"]
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/src/routes/props/Dropdown.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | [" name ", "string", " ''"],
4 | [" child", " TopMenuType[] | undefined", ""],
5 | [
6 | " activeDropdownDiv ",
7 | "string",
8 | " 'z-10 w-44 text-lg list-none bg-white rounded divide-y divide-gray-100 shadow'"
9 | ],
10 | [" activeChildLi ", "string", " 'block py-2 px-4 text-base text-gray-700 hover:bg-gray-100'"],
11 | [
12 | " dropdownLi ",
13 | "string",
14 | " 'flex justify-between items-center py-2 pr-4 pl-3 w-full text-base font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto'"
15 | ]
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/src/routes/props/Hamburger.json:
--------------------------------------------------------------------------------
1 | { "props": [[" hamburgerClass ", "string", " ''"]] }
2 |
--------------------------------------------------------------------------------
/src/routes/props/Nav.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | ["navClass", "string ", "'py-8 px-4 text-lg'"],
4 | ["navDivClass", "string ", "'pb-8'"]
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/routes/props/Navbar.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | ["alt", "string ", "''"],
4 | [
5 | "hamburgerClass",
6 | "string ",
7 | "'text-gray-500 hover:text-gray-700 cursor-pointer mr-4 border-none focus:outline-none'"
8 | ],
9 | ["headerClass", "string ", "'bg-gray-200 pt-4 px-10 items-center text-gray-600'"],
10 | ["logo", "string ", "''"],
11 | ["logoClass", "string ", "''"],
12 | ["navClass", "string ", "'flex relative'"],
13 | ["siteClass", "string ", "'w-1/4 h-12 text-lg pt-1 pl-12'"],
14 | ["siteName", "string ", "'Demo'"],
15 | [
16 | "spanClass",
17 | "string ",
18 | "'pl-2 self-center text-lg font-semibold text-gray-900 whitespace-nowrap'"
19 | ]
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/props/Responsive.json:
--------------------------------------------------------------------------------
1 | { "props": [["breakPoint", "number ", "1024"]] }
2 |
--------------------------------------------------------------------------------
/src/routes/props/Side.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | ["alt", "string ", "''"],
4 | [
5 | "hamburgerClass",
6 | "string ",
7 | "'text-gray-500 hover:text-gray-700 cursor-pointer mr-4 border-none focus:outline-none lg:hidden'"
8 | ],
9 | ["headerClass", "string ", "'bg-gray-200 pt-4 px-10 items-center text-gray-600'"],
10 | ["logo", "string ", "''"],
11 | ["logoClass", "string ", "''"],
12 | ["navClass", "string ", "'flex relative'"],
13 | ["siteClass", "string ", "'w-1/4 h-12 text-lg pt-1 pl-12'"],
14 | ["siteName", "string ", "'Demo'"],
15 | [
16 | "spanClass",
17 | "string ",
18 | "'pl-2 self-center text-lg font-semibold text-gray-900 whitespace-nowrap'"
19 | ],
20 | ["topDiv", "string ", "'w-full md:block md:w-auto'"],
21 | [
22 | "buttonClass",
23 | "string ",
24 | "'inline-flex items-center text-base text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200'"
25 | ],
26 | [
27 | "childLi",
28 | "string ",
29 | "'block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 text-base'"
30 | ],
31 | ["topMenuDiv", "string ", "'container flex flex-wrap justify-end mx-auto'"],
32 | [" topMenus", " TopMenuType[]", ""],
33 | [
34 | "topul",
35 | "string ",
36 | "'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-md md:font-medium pt-1 bg-white'"
37 | ],
38 | [
39 | "topli",
40 | "string ",
41 | "'block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0'"
42 | ],
43 | [
44 | "activeDropdownDiv",
45 | "string ",
46 | "'z-10 w-44 text-lg list-none bg-white rounded divide-y divide-gray-100 shadow'"
47 | ],
48 | ["activeChildLi", "string ", "'block py-2 px-4 text-base text-gray-700 hover:bg-gray-100'"],
49 | [
50 | "dropdownLi",
51 | "string ",
52 | "'flex justify-between items-center py-2 pr-4 pl-3 w-full text-base font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto'"
53 | ],
54 | [
55 | "asideClass",
56 | "string ",
57 | "'absolute w-auto border-r-2 shadow-lg z-50 bg-white h-screen overflow-scroll'"
58 | ],
59 | ["transitionParams", "TransitionParamTypes ", "{}"],
60 | ["transitionType", "TransitionTypes ", "'fly'"],
61 | ["sideWrapperClass", "string ", "'fixed z-50 top-0 left-0 w-full'"]
62 | ]
63 | }
64 |
--------------------------------------------------------------------------------
/src/routes/props/Sidebar.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | [" lists", " MenuType[]", ""],
4 | ["alt", "string ", "''"],
5 | ["hamburgerClass", "string ", "''"],
6 | ["headerClass", "string ", "'bg-gray-200 pt-4 px-10 items-center text-gray-600'"],
7 | ["logo", "string ", "''"],
8 | ["logoClass", "string ", "''"],
9 | ["navBarClass", "string ", "'flex relative'"],
10 | ["siteName", "string ", "'Demo'"],
11 | ["siteClass", "string ", "'w-1/4 h-12 text-lg pt-1 pl-12'"],
12 | [
13 | "spanClass",
14 | "string ",
15 | "'pl-2 self-center text-lg font-semibold text-gray-900 whitespace-nowrap'"
16 | ],
17 | ["navClass", "string ", "'py-8 px-4 text-lg'"],
18 | ["asideClass", "string ", "'absolute w-auto h-screen bg-white border-r-2 shadow-lg z-50'"],
19 | ["navDivClass", "string ", "'pb-10'"],
20 | ["sideBarListClass", "string ", "'border-b border-gray-400 mb-2 px-4'"],
21 | ["transitionParams", "TransitionParamTypes ", "{}"],
22 | ["transitionType", "TransitionTypes ", "'fly'"]
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/src/routes/props/SidebarList.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | [" href", " string", ""],
4 | [" name", " string", ""],
5 | ["rel", "string ", "null"],
6 | ["sideBarListClass", "string ", "'border-b border-gray-400 mb-2 px-4'"]
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/props/TopMenu.json:
--------------------------------------------------------------------------------
1 | {
2 | "props": [
3 | ["topDiv", "string ", "'w-full md:block md:w-auto'"],
4 | [
5 | "buttonClass",
6 | "string ",
7 | "'inline-flex items-center text-base text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200'"
8 | ],
9 | [
10 | "childLi",
11 | "string ",
12 | "'block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 text-base'"
13 | ],
14 | ["topMenuDiv", "string ", "'container flex flex-wrap justify-end mx-auto'"],
15 | [" topMenus", " TopMenuType[]", ""],
16 | [
17 | "topul",
18 | "string ",
19 | "'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-md md:font-medium pt-1 bg-gray-200'"
20 | ],
21 | [
22 | "topli",
23 | "string ",
24 | "'block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0'"
25 | ],
26 | [
27 | "activeDropdownDiv",
28 | "string ",
29 | "'z-10 w-44 text-lg list-none bg-white rounded divide-y divide-gray-100 shadow'"
30 | ],
31 | ["activeChildLi", "string ", "'block py-2 px-4 text-base text-gray-700 hover:bg-gray-100'"],
32 | [
33 | "dropdownLi",
34 | "string ",
35 | "'flex justify-between items-center py-2 pr-4 pl-3 w-full text-base font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto'"
36 | ]
37 | ]
38 | }
39 |
--------------------------------------------------------------------------------
/src/routes/responsive-no-transition/__layout.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
42 |
43 | {#each menuListResponsiveNoTransition as { href, name, rel }}
44 |
47 |
48 |
49 |
51 |
52 |
53 | Svelte-Sidebar-Menu Responsive Examples
54 |
55 |
--------------------------------------------------------------------------------
/src/routes/responsive-no-transition/top-fix-2.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/responsive-no-transition/top-fix-3.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/responsive-no-transition/top-fix.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/responsive-transition/blur.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
24 |
25 |
27 |
28 |
29 | {#each menuListResponsiveTransition as { href, name, rel }}
30 |
33 |
34 |
36 |
37 | {title}
38 |
39 |
40 | {lorem}
41 |
42 |
43 | {lorem}
44 |
45 |
46 | {lorem}
47 |
48 |
49 | {lorem}
50 |
51 |
52 | {lorem}
53 |
54 |
55 | {lorem}
56 |
57 |
58 |
59 |
60 | Svelte-Sidebar-Menu Blur Example
61 |
62 |
--------------------------------------------------------------------------------
/src/routes/responsive-transition/fade.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
24 |
25 |
27 |
28 |
29 | {#each menuListResponsiveTransition as { href, name, rel }}
30 |
33 |
34 |
36 |
37 | {title}
38 |
39 |
40 | {lorem}
41 |
42 |
43 | {lorem}
44 |
45 |
46 | {lorem}
47 |
48 |
49 | {lorem}
50 |
51 |
52 | {lorem}
53 |
54 |
55 | {lorem}
56 |
57 |
58 |
59 |
60 | Svelte-Sidebar-Menu Fade Example
61 |
62 |
--------------------------------------------------------------------------------
/src/routes/responsive-transition/fly-x.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
25 |
26 |
28 |
29 |
30 | {#each menuListResponsiveTransition as { href, name, rel }}
31 |
34 |
35 |
37 |
38 | {title}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 | {lorem}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 |
60 |
61 | Svelte-Sidebar-Menu Fly-x Example
62 |
63 |
--------------------------------------------------------------------------------
/src/routes/responsive-transition/fly-y.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
25 |
26 |
28 |
29 |
30 | {#each menuListResponsiveTransition as { href, name, rel }}
31 |
34 |
35 |
37 |
38 | {title}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 | {lorem}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 |
60 |
61 | Svelte-Sidebar-Menu Fly-y Example
62 |
63 |
--------------------------------------------------------------------------------
/src/routes/responsive-transition/slide.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
25 |
26 |
28 |
29 |
30 | {#each menuListResponsiveTransition as { href, name, rel }}
31 |
34 |
35 |
37 |
38 | {title}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 | {lorem}
51 |
52 |
53 | {lorem}
54 |
55 |
56 |
57 |
58 | Svelte-Sidebar-Menu Slide Example
59 |
60 |
--------------------------------------------------------------------------------
/src/routes/responsive/__layout.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 |
47 |
48 | {#each menuListResponsive as { href, name, rel }}
49 |
52 |
53 |
54 |
56 |
57 |
58 | Svelte-Sidebar-Menu Responsive Examples
59 |
60 |
--------------------------------------------------------------------------------
/src/routes/responsive/top-fix-2.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/responsive/top-fix-3.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/responsive/top-fix.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | {title}
10 |
11 |
12 | {lorem}
13 |
14 |
15 | {lorem}
16 |
17 |
18 | {lorem}
19 |
20 |
21 | {lorem}
22 |
23 |
24 | {lorem}
25 |
26 |
27 | {lorem}
28 |
29 |
30 | {lorem}
31 |
32 |
--------------------------------------------------------------------------------
/src/routes/scroll-sidebar.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 | Side Menu
16 | {#each menuList as { href, name, rel }}
17 |
20 |
21 | Long Side Menu
22 | {#each allMenuList as { href, name, rel }}
23 |
26 |
27 | Long Side Menu
28 | {#each allMenuList as { href, name, rel }}
29 |
32 |
33 |
34 |
37 |
38 | {title}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 | {lorem}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 | {lorem}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 | {lorem}
69 |
70 |
71 | {lorem}
72 |
73 |
74 | {lorem}
75 |
76 |
77 |
78 |
79 | Svelte-Sidebar-Menu Scroll Sidebar Example
80 |
81 |
--------------------------------------------------------------------------------
/src/routes/sidebar-custom-style.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
22 |
23 |
24 |
25 | {title}
26 |
27 |
28 | {lorem}
29 |
30 |
31 | {lorem}
32 |
33 |
34 | {lorem}
35 |
36 |
37 | {lorem}
38 |
39 |
40 | {lorem}
41 |
42 |
43 | {lorem}
44 |
45 |
46 | {lorem}
47 |
48 |
49 | {lorem}
50 |
51 |
52 |
53 |
54 | Svelte-Sidebar-Menu Custom Stype Example
55 |
56 |
--------------------------------------------------------------------------------
/src/routes/sidebar-topmenu.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 |
16 | {title}
17 |
18 |
19 | {lorem}
20 |
21 |
22 | {lorem}
23 |
24 |
25 | {lorem}
26 |
27 |
28 | {lorem}
29 |
30 |
31 | {lorem}
32 |
33 |
34 | {lorem}
35 |
36 |
37 | {lorem}
38 |
39 |
40 | {lorem}
41 |
42 |
43 |
44 |
45 | Svelte-Sidebar-Menu Top Menu Example
46 |
47 |
--------------------------------------------------------------------------------
/src/routes/three-columns/__layout.svelte:
--------------------------------------------------------------------------------
1 |
237 |
238 |
240 |
241 |
256 |
257 |
259 |
260 |
261 |
262 |
263 |
265 |
266 | Right side menu
267 |
268 | Test 1
269 | Test 2
270 | Test 3
271 | Test 4
272 | Test 5
273 |
274 |
275 |
276 |
279 | Svelte-Sidebar-Menu with Flowbite-Svelte Sidebar Component
280 |
282 |
--------------------------------------------------------------------------------
/src/routes/three-columns/index.svelte:
--------------------------------------------------------------------------------
1 | Three Column Layout
2 |
3 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius odit cum nihil explicabo commodi
4 | obcaecati officia voluptates, eos exercitationem, id labore sequi ex iusto quas amet dicta sint
5 | tempora assumenda. Dolorum, quam. Fugit facilis nobis, suscipit aut non officia, sed accusantium
6 | est recusandae amet nihil quisquam exercitationem sit! Repellat maxime tempore veritatis animi
7 | vero, reprehenderit et similique facere quaerat harum! Dolorem deleniti a vel ducimus eius sit
8 | necessitatibus hic officiis tempore optio impedit dicta deserunt repudiandae quidem blanditiis
9 | perspiciatis voluptate, illum dolorum molestias. Vitae voluptatum recusandae voluptate, quibusdam
10 | perspiciatis architecto. Voluptatibus libero qui cumque ipsa officia exercitationem debitis,
11 | explicabo ipsam eaque dolorum nam modi, odit ea at numquam beatae deleniti quis, eius pariatur.
12 | Accusamus, reprehenderit in laboriosam voluptate cum aut! Maxime, fugiat numquam consequuntur
13 | ratione neque qui deserunt facilis nisi doloremque aspernatur similique. Tenetur accusamus non hic
14 | pariatur iste reprehenderit cum quibusdam incidunt facere aut. Ipsum quas aut corrupti nemo.
15 |
16 |
17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptates dolor, porro illo
18 | laborum non, reiciendis veniam libero explicabo consequatur necessitatibus? Quisquam accusantium
19 | pariatur nobis iure assumenda laboriosam sequi culpa? Cumque est dignissimos impedit animi eos
20 | molestiae dolor architecto officiis cupiditate sequi asperiores, a incidunt rerum ipsam omnis?
21 | Ipsa harum quae iure eaque eum a unde dolore sapiente sunt ad. Ipsa non numquam harum perferendis
22 | saepe asperiores, temporibus quaerat? Deleniti eum atque totam aperiam porro vitae quaerat iusto!
23 | Eum hic magnam neque culpa animi quaerat incidunt labore debitis quasi maiores? Doloribus quam
24 | ipsa earum tenetur expedita atque error est vitae. Culpa harum incidunt at officiis quibusdam,
25 | nostrum veritatis in quia, quam, voluptates dolorum laboriosam reiciendis odit deserunt? Repellat,
26 | nemo excepturi. Harum quas officia, cum corporis sit rerum modi commodi beatae maiores natus nulla
27 | doloremque optio repellendus dolor laboriosam. Exercitationem, tenetur laboriosam? Facere mollitia
28 | quisquam deleniti perspiciatis distinctio aspernatur dolorum necessitatibus?
29 |
30 |
31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium aut aliquid excepturi illo
32 | sapiente iste commodi labore facere optio ut at ipsa autem, nulla beatae. Dolores vel optio
33 | laudantium beatae! Libero quo, tempora nulla numquam aperiam quam quisquam reiciendis pariatur
34 | dicta voluptatem, saepe iure commodi quia, officiis amet fuga odio fugit sequi vero fugiat rem
35 | perferendis. Maxime adipisci odit tempora? Aspernatur mollitia accusantium distinctio cupiditate
36 | fugit voluptates neque placeat, quidem sed eius voluptatibus inventore atque similique ipsum hic
37 | dolorem, minus dignissimos enim laborum doloribus? Nostrum ullam dolor necessitatibus porro magni.
38 | Beatae, quas sint blanditiis praesentium facilis placeat amet enim dolorem sed necessitatibus,
39 | facere, ab modi incidunt vel quo nulla culpa distinctio ipsa obcaecati. Sed, officia praesentium
40 | sit saepe rem in. Exercitationem animi perferendis repellat eius sit dicta magnam, assumenda ea
41 | qui corporis itaque impedit voluptatibus nam facilis veniam, ut iusto pariatur cupiditate magni
42 | est soluta at odit. Dolorem, labore? Temporibus.
43 |
44 |
45 |
46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, hic nostrum facere veniam eos
47 | laboriosam vero voluptas quisquam incidunt velit veritatis consectetur iste, consequatur vitae
48 | nulla modi, labore alias quidem. Porro, nesciunt eveniet! Aut error explicabo a veritatis
49 | doloremque consequuntur possimus, sint et voluptate quam cupiditate. Maiores, velit dolorum in
50 | cupiditate dolore quod ipsum iusto ea amet illo architecto magnam. Debitis eligendi modi numquam
51 | explicabo quia in, optio ipsam placeat repudiandae minus, praesentium distinctio? Magni animi
52 | accusantium, architecto, tempore tenetur distinctio ea expedita, explicabo sit quisquam ab nisi.
53 | Dignissimos, doloribus. Hic fuga ad enim perferendis dolores asperiores quos quam aspernatur,
54 | maiores tempore cupiditate corporis, optio beatae vel commodi laudantium, suscipit distinctio
55 | debitis magni dolorum officiis saepe harum? Soluta, illum animi? Facere consequatur voluptate, rem
56 | perspiciatis repellendus modi libero illo nobis aliquid sit blanditiis minima, debitis laborum
57 | nemo dolorum ullam. Voluptatem earum ipsa blanditiis corporis a, optio porro tempora numquam
58 | nihil? Impedit consequatur soluta culpa quisquam exercitationem eum placeat tenetur ad, quia vero,
59 | nihil incidunt, voluptas sit magnam. Nihil aperiam illum ratione vero error ducimus id et aliquam
60 | odit, aliquid magnam? Esse commodi pariatur perferendis fugit illum necessitatibus quisquam.
61 | Temporibus reiciendis perferendis veritatis repudiandae suscipit, nesciunt ipsa sit, eaque non
62 | assumenda in. Reiciendis quisquam aliquid repellat delectus fugit ratione dolore ex! Ut suscipit
63 | ratione ea libero nisi aut? Veritatis blanditiis ex nam, porro voluptas, sapiente aut nihil sint
64 | doloremque hic nisi iste doloribus incidunt ipsum ducimus molestias quis ipsam esse totam.
65 | Voluptates, dolore sunt voluptatem id dolor distinctio culpa eum asperiores. Error necessitatibus
66 | sint quaerat non accusantium quos consectetur eius, nemo dolorum rem maiores culpa ad dolorem
67 | mollitia distinctio saepe doloribus? Consequuntur, aliquam. Optio voluptas veniam repellendus at
68 | blanditiis aut voluptate! Doloremque soluta facilis, deleniti optio libero minus aut facere beatae
69 | veniam iusto sit eligendi non provident rem officiis, molestias itaque.
70 |
71 |
72 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, hic nostrum facere veniam eos
73 | laboriosam vero voluptas quisquam incidunt velit veritatis consectetur iste, consequatur vitae
74 | nulla modi, labore alias quidem. Porro, nesciunt eveniet! Aut error explicabo a veritatis
75 | doloremque consequuntur possimus, sint et voluptate quam cupiditate. Maiores, velit dolorum in
76 | cupiditate dolore quod ipsum iusto ea amet illo architecto magnam. Debitis eligendi modi numquam
77 | explicabo quia in, optio ipsam placeat repudiandae minus, praesentium distinctio? Magni animi
78 | accusantium, architecto, tempore tenetur distinctio ea expedita, explicabo sit quisquam ab nisi.
79 | Dignissimos, doloribus. Hic fuga ad enim perferendis dolores asperiores quos quam aspernatur,
80 | maiores tempore cupiditate corporis, optio beatae vel commodi laudantium, suscipit distinctio
81 | debitis magni dolorum officiis saepe harum? Soluta, illum animi? Facere consequatur voluptate, rem
82 | perspiciatis repellendus modi libero illo nobis aliquid sit blanditiis minima, debitis laborum
83 | nemo dolorum ullam. Voluptatem earum ipsa blanditiis corporis a, optio porro tempora numquam
84 | nihil? Impedit consequatur soluta culpa quisquam exercitationem eum placeat tenetur ad, quia vero,
85 | nihil incidunt, voluptas sit magnam. Nihil aperiam illum ratione vero error ducimus id et aliquam
86 | odit, aliquid magnam? Esse commodi pariatur perferendis fugit illum necessitatibus quisquam.
87 | Temporibus reiciendis perferendis veritatis repudiandae suscipit, nesciunt ipsa sit, eaque non
88 | assumenda in. Reiciendis quisquam aliquid repellat delectus fugit ratione dolore ex! Ut suscipit
89 | ratione ea libero nisi aut? Veritatis blanditiis ex nam, porro voluptas, sapiente aut nihil sint
90 | doloremque hic nisi iste doloribus incidunt ipsum ducimus molestias quis ipsam esse totam.
91 | Voluptates, dolore sunt voluptatem id dolor distinctio culpa eum asperiores. Error necessitatibus
92 | sint quaerat non accusantium quos consectetur eius, nemo dolorum rem maiores culpa ad dolorem
93 | mollitia distinctio saepe doloribus? Consequuntur, aliquam. Optio voluptas veniam repellendus at
94 | blanditiis aut voluptate! Doloremque soluta facilis, deleniti optio libero minus aut facere beatae
95 | veniam iusto sit eligendi non provident rem officiis, molestias itaque.
96 |
97 |
98 |
99 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, hic nostrum facere veniam eos
100 | laboriosam vero voluptas quisquam incidunt velit veritatis consectetur iste, consequatur vitae
101 | nulla modi, labore alias quidem. Porro, nesciunt eveniet! Aut error explicabo a veritatis
102 | doloremque consequuntur possimus, sint et voluptate quam cupiditate. Maiores, velit dolorum in
103 | cupiditate dolore quod ipsum iusto ea amet illo architecto magnam. Debitis eligendi modi numquam
104 | explicabo quia in, optio ipsam placeat repudiandae minus, praesentium distinctio? Magni animi
105 | accusantium, architecto, tempore tenetur distinctio ea expedita, explicabo sit quisquam ab nisi.
106 | Dignissimos, doloribus. Hic fuga ad enim perferendis dolores asperiores quos quam aspernatur,
107 | maiores tempore cupiditate corporis, optio beatae vel commodi laudantium, suscipit distinctio
108 | debitis magni dolorum officiis saepe harum? Soluta, illum animi? Facere consequatur voluptate, rem
109 | perspiciatis repellendus modi libero illo nobis aliquid sit blanditiis minima, debitis laborum
110 | nemo dolorum ullam. Voluptatem earum ipsa blanditiis corporis a, optio porro tempora numquam
111 | nihil? Impedit consequatur soluta culpa quisquam exercitationem eum placeat tenetur ad, quia vero,
112 | nihil incidunt, voluptas sit magnam. Nihil aperiam illum ratione vero error ducimus id et aliquam
113 | odit, aliquid magnam? Esse commodi pariatur perferendis fugit illum necessitatibus quisquam.
114 | Temporibus reiciendis perferendis veritatis repudiandae suscipit, nesciunt ipsa sit, eaque non
115 | assumenda in. Reiciendis quisquam aliquid repellat delectus fugit ratione dolore ex! Ut suscipit
116 | ratione ea libero nisi aut? Veritatis blanditiis ex nam, porro voluptas, sapiente aut nihil sint
117 | doloremque hic nisi iste doloribus incidunt ipsum ducimus molestias quis ipsam esse totam.
118 | Voluptates, dolore sunt voluptatem id dolor distinctio culpa eum asperiores. Error necessitatibus
119 | sint quaerat non accusantium quos consectetur eius, nemo dolorum rem maiores culpa ad dolorem
120 | mollitia distinctio saepe doloribus? Consequuntur, aliquam. Optio voluptas veniam repellendus at
121 | blanditiis aut voluptate! Doloremque soluta facilis, deleniti optio libero minus aut facere beatae
122 | veniam iusto sit eligendi non provident rem officiis, molestias itaque.
123 |
124 |
125 |
126 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, hic nostrum facere veniam eos
127 | laboriosam vero voluptas quisquam incidunt velit veritatis consectetur iste, consequatur vitae
128 | nulla modi, labore alias quidem. Porro, nesciunt eveniet! Aut error explicabo a veritatis
129 | doloremque consequuntur possimus, sint et voluptate quam cupiditate. Maiores, velit dolorum in
130 | cupiditate dolore quod ipsum iusto ea amet illo architecto magnam. Debitis eligendi modi numquam
131 | explicabo quia in, optio ipsam placeat repudiandae minus, praesentium distinctio? Magni animi
132 | accusantium, architecto, tempore tenetur distinctio ea expedita, explicabo sit quisquam ab nisi.
133 | Dignissimos, doloribus. Hic fuga ad enim perferendis dolores asperiores quos quam aspernatur,
134 | maiores tempore cupiditate corporis, optio beatae vel commodi laudantium, suscipit distinctio
135 | debitis magni dolorum officiis saepe harum? Soluta, illum animi? Facere consequatur voluptate, rem
136 | perspiciatis repellendus modi libero illo nobis aliquid sit blanditiis minima, debitis laborum
137 | nemo dolorum ullam. Voluptatem earum ipsa blanditiis corporis a, optio porro tempora numquam
138 | nihil? Impedit consequatur soluta culpa quisquam exercitationem eum placeat tenetur ad, quia vero,
139 | nihil incidunt, voluptas sit magnam. Nihil aperiam illum ratione vero error ducimus id et aliquam
140 | odit, aliquid magnam? Esse commodi pariatur perferendis fugit illum necessitatibus quisquam.
141 | Temporibus reiciendis perferendis veritatis repudiandae suscipit, nesciunt ipsa sit, eaque non
142 | assumenda in. Reiciendis quisquam aliquid repellat delectus fugit ratione dolore ex! Ut suscipit
143 | ratione ea libero nisi aut? Veritatis blanditiis ex nam, porro voluptas, sapiente aut nihil sint
144 | doloremque hic nisi iste doloribus incidunt ipsum ducimus molestias quis ipsam esse totam.
145 | Voluptates, dolore sunt voluptatem id dolor distinctio culpa eum asperiores. Error necessitatibus
146 | sint quaerat non accusantium quos consectetur eius, nemo dolorum rem maiores culpa ad dolorem
147 | mollitia distinctio saepe doloribus? Consequuntur, aliquam. Optio voluptas veniam repellendus at
148 | blanditiis aut voluptate! Doloremque soluta facilis, deleniti optio libero minus aut facere beatae
149 | veniam iusto sit eligendi non provident rem officiis, molestias itaque.
150 |
151 |
--------------------------------------------------------------------------------
/src/routes/topmenu.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
27 |
36 |
38 |
39 |
40 | {#each menuList as { href, name, rel }}
41 |
44 |
45 |
46 |
49 |
50 | {title}
51 |
52 |
53 | {lorem}
54 |
55 |
56 | {lorem}
57 |
58 |
59 | {lorem}
60 |
61 |
62 | {lorem}
63 |
64 |
65 | {lorem}
66 |
67 |
68 | {lorem}
69 |
70 |
71 | {lorem}
72 |
73 |
74 | {lorem}
75 |
76 |
77 |
78 |
79 | Svelte-Sidebar-Menu Top Menu Example
80 |
81 |
--------------------------------------------------------------------------------
/src/routes/transitions/blur.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
30 |
31 |
32 | {title}
33 |
34 |
35 | {lorem}
36 |
37 |
38 | {lorem}
39 |
40 |
41 | {lorem}
42 |
43 |
44 | {lorem}
45 |
46 |
47 | {lorem}
48 |
49 |
50 |
51 |
52 | Svelte-Sidebar-Menu Blur Example
53 |
54 |
--------------------------------------------------------------------------------
/src/routes/transitions/fade.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
30 |
31 |
32 |
33 | {title}
34 |
35 |
36 | {lorem}
37 |
38 |
39 | {lorem}
40 |
41 |
42 | {lorem}
43 |
44 |
45 | {lorem}
46 |
47 |
48 | {lorem}
49 |
50 |
51 |
52 |
53 | Svelte-Sidebar-Menu Fade Example
54 |
55 |
--------------------------------------------------------------------------------
/src/routes/transitions/fly-x.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
30 |
31 |
32 |
33 | {title}
34 |
35 |
36 | {lorem}
37 |
38 |
39 | {lorem}
40 |
41 |
42 | {lorem}
43 |
44 |
45 | {lorem}
46 |
47 |
48 | {lorem}
49 |
50 |
51 |
52 |
53 | Svelte-Sidebar-Menu Fly-x Example
54 |
55 |
--------------------------------------------------------------------------------
/src/routes/transitions/fly-y.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
30 |
31 |
32 |
33 | {title}
34 |
35 |
36 | {lorem}
37 |
38 |
39 | {lorem}
40 |
41 |
42 | {lorem}
43 |
44 |
45 | {lorem}
46 |
47 |
48 | {lorem}
49 |
50 |
51 |
52 |
53 | Svelte-Sidebar-Menu Fly-y Example
54 |
55 |
--------------------------------------------------------------------------------
/src/routes/transitions/slide.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
30 |
31 |
32 |
33 | {title}
34 |
35 |
36 | {lorem}
37 |
38 |
39 | {lorem}
40 |
41 |
42 | {lorem}
43 |
44 |
45 | {lorem}
46 |
47 |
48 | {lorem}
49 |
50 |
51 |
52 |
53 | Svelte-Sidebar-Menu Slide Example
54 |
55 |
--------------------------------------------------------------------------------
/src/routes/utils/Table.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
13 | {#each header as column}
14 |
15 | {column}
16 |
17 | {/each}
18 |
19 |
20 |
21 |
23 |
24 |
24 | {#each item as cell, j}
25 | {#if j === 0}
26 |
30 | {#if html}
31 | {@html cell}
32 | {:else}
33 | {cell}
34 | {/if}
35 |
36 | {:else}
37 |
38 | {#if html}
39 | {@html cell}
40 | {:else}
41 | {cell}
42 | {/if}
43 |
44 | {/if}
45 | {/each}
46 |
47 | {:else}
48 |
49 | {#each item as cell, j}
50 | {#if j === 0}
51 |
55 | {#if html}
56 | {@html cell}
57 | {:else}
58 | {cell}
59 | {/if}
60 |
61 | {:else}
62 |
63 | {#if html}
64 | {@html cell}
65 | {:else}
66 | {cell}
67 | {/if}
68 |
69 | {/if}
70 | {/each}
71 |
72 | {/if}
73 | {/each}
74 |
--------------------------------------------------------------------------------
/static/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/android-chrome-192x192.png
--------------------------------------------------------------------------------
/static/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/android-chrome-512x512.png
--------------------------------------------------------------------------------
/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/apple-touch-icon.png
--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/favicon-16x16.png
--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/favicon-32x32.png
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/favicon.ico
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/favicon.png
--------------------------------------------------------------------------------
/static/images/multiple-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/images/multiple-menu.png
--------------------------------------------------------------------------------
/static/images/single-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/images/single-menu.png
--------------------------------------------------------------------------------
/static/images/svelte-sidebar-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/svelte-sidebar/cd6f53100c2dc5fc7263395bcefac4e4460b3627/static/images/svelte-sidebar-logo.png
--------------------------------------------------------------------------------
/static/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Svelte Sidebar",
3 | "short_name": "Svelte Sidebar",
4 | "icons": [
5 | { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
6 | { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
7 | ],
8 | "theme_color": "#ffffff",
9 | "background_color": "#ffffff",
10 | "display": "standalone"
11 | }
12 |
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import preprocess from 'svelte-preprocess';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://github.com/sveltejs/svelte-preprocess
7 | // for more information about preprocessors
8 | preprocess: [
9 | preprocess({
10 | postcss: true
11 | })
12 | ],
13 |
14 | kit: {
15 | adapter: adapter()
16 | }
17 | };
18 |
19 | export default config;
20 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const config = {
2 | content: ['./src/**/*.{html,js,svelte,ts}'],
3 |
4 | theme: {
5 | extend: {}
6 | },
7 |
8 | plugins: [],
9 | darkMode: 'class'
10 | };
11 |
12 | module.exports = config;
13 |
--------------------------------------------------------------------------------
/tests/test.js:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | test('index page has expected h1', async ({ page }) => {
4 | await page.goto('/');
5 | expect(await page.textContent('h1')).toBe('Svelte-Sidebar');
6 | });
7 |
8 | // Responsive
9 | test('Responsive top-fix page has expected h1', async ({ page }) => {
10 | await page.goto('/responsive/top-fix');
11 | expect(await page.textContent('h1')).toBe('Responsive with top menu fixed');
12 | });
13 |
14 | test('Responsive top-fix 2 page has expected h1', async ({ page }) => {
15 | await page.goto('/responsive/top-fix-2');
16 | expect(await page.textContent('h1')).toBe('Responsive with top menu fixed 2');
17 | });
18 |
19 | test('Responsive top-fix 3 page has expected h1', async ({ page }) => {
20 | await page.goto('/responsive/top-fix-3');
21 | expect(await page.textContent('h1')).toBe('Responsive with top menu fixed 3');
22 | });
23 |
24 | // Responsive no transition
25 | test('Responsive No Transition page has expected h1', async ({ page }) => {
26 | await page.goto('/responsive-no-transition/top-fix');
27 | expect(await page.textContent('h1')).toBe('Responsive No Transition');
28 | });
29 |
30 | test('Responsive No Transition 2 page has expected h1', async ({ page }) => {
31 | await page.goto('/responsive-no-transition/top-fix-2');
32 | expect(await page.textContent('h1')).toBe('Responsive No Transition 2');
33 | });
34 |
35 | test('Responsive No Transition 3 page has expected h1', async ({ page }) => {
36 | await page.goto('/responsive-no-transition/top-fix-3');
37 | expect(await page.textContent('h1')).toBe('Responsive No Transition 3');
38 | });
39 |
40 | // Transisions
41 | test('Blur Demo page has expected h1', async ({ page }) => {
42 | await page.goto('/transitions/blur');
43 | expect(await page.textContent('h1')).toBe('Blur Demo');
44 | });
45 |
46 | test('Fade Demo page has expected h1', async ({ page }) => {
47 | await page.goto('/transitions/fade');
48 | expect(await page.textContent('h1')).toBe('Fade Demo');
49 | });
50 |
51 | test('Fly-x Demo page has expected h1', async ({ page }) => {
52 | await page.goto('/transitions/fly-x');
53 | expect(await page.textContent('h1')).toBe('Fly-x Demo');
54 | });
55 |
56 | test('Fly-y Demo page has expected h1', async ({ page }) => {
57 | await page.goto('/transitions/fly-y');
58 | expect(await page.textContent('h1')).toBe('Fly-y Demo');
59 | });
60 |
61 | test('Slide Demo page has expected h1', async ({ page }) => {
62 | await page.goto('/transitions/slide');
63 | expect(await page.textContent('h1')).toBe('Slide Demo');
64 | });
65 |
66 | // other menus
67 | test('Fixed top menu page has expected h1', async ({ page }) => {
68 | await page.goto('/fixed-menu');
69 | expect(await page.textContent('h1')).toBe('Fixed Top Menu Demo');
70 | });
71 |
72 | test('Inert page has expected h1', async ({ page }) => {
73 | await page.goto('/inert');
74 | expect(await page.textContent('h1')).toBe('Inert Demo');
75 | });
76 |
77 | test('Custom Styled Multi-menu Sidebar page has expected h1', async ({ page }) => {
78 | await page.goto('/multi-custom-style');
79 | expect(await page.textContent('h1')).toBe('Custom Styled Multi-menu Sidebar');
80 | });
81 |
82 | test('Multi-menu Sidebar page has expected h1', async ({ page }) => {
83 | await page.goto('/multi-default');
84 | expect(await page.textContent('h1')).toBe('Multi-menu Sidebar');
85 | });
86 |
87 | test('Scroll sidebar page has expected h1', async ({ page }) => {
88 | await page.goto('/scroll-sidebar');
89 | expect(await page.textContent('h1')).toBe('Scroll Sidebar Demo');
90 | });
91 |
92 | test('Custom Style page has expected h1', async ({ page }) => {
93 | await page.goto('/sidebar-custom-style');
94 | expect(await page.textContent('h1')).toBe('Custom Style');
95 | });
96 |
97 | test('Top menu page has expected h1', async ({ page }) => {
98 | await page.goto('/topmenu');
99 | expect(await page.textContent('h1')).toBe('Top Menu');
100 | });
101 |
102 | // Flowbite-svelte sidebar page
103 | test('Flowbite-Svelte Sidebar page has expected h1', async ({ page }) => {
104 | await page.goto('/flowbite-svelte-sidebar');
105 | expect(await page.textContent('h1')).toBe('Flowbite Svelte Sidebar');
106 | });
107 |
108 | // Props page
109 | test('Props page has expected h1', async ({ page }) => {
110 | await page.goto('/props');
111 | expect(await page.textContent('h1')).toBe('Props');
112 | });
113 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "resolveJsonModule": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------