sidebar-skeleton-compostrap 2.0.10 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/sidebar.css CHANGED
@@ -1,88 +1,88 @@
1
- body {
2
- overflow-x: hidden;
3
- }
4
-
5
- .wrapper {
6
- min-height: 100vh;
7
- }
8
- .wrapper-navbar-used {
9
- min-height: calc(100vh - 3.5rem);
10
- }
11
- .wrapper-navbar-fixed {
12
- margin-top: 3.5rem;
13
- }
14
-
15
- .sidebar {
16
- margin-left: -14.375rem;
17
- transition: margin 0.15s ease-out;
18
- }
19
- @media (min-width: 768px) {
20
- .sidebar {
21
- margin-left: 0;
22
- }
23
- }
24
- .sidebar-toggle {
25
- margin-left: 0;
26
- }
27
- .sidebar-toggle-visible {
28
- margin-left: 0;
29
- }
30
- @media (min-width: 768px) {
31
- .sidebar-toggle-visible {
32
- margin-left: -14.375rem;
33
- }
34
- }
35
- .sidebar-rounded-top-right {
36
- border-top-right-radius: 0.375rem;
37
- }
38
-
39
- .sidebar-menu {
40
- width: 14.375rem;
41
- }
42
- .sidebar-menu-fixed {
43
- position: fixed;
44
- }
45
-
46
- .sidebar-bg-white {
47
- background-color: #fff;
48
- }
49
-
50
- .sidebar-bg-light {
51
- background-color: #f8f9fa;
52
- }
53
-
54
- .sidebar-bg-dark {
55
- background-color: #343a40;
56
- }
57
-
58
- .sidebar-bg-blue {
59
- background-color: #0d6efd;
60
- }
61
-
62
- .sidebar-bg-purple {
63
- background-color: #6f42c1;
64
- }
65
-
66
- .sidebar-bg-pink {
67
- background-color: #d63384;
68
- }
69
-
70
- .sidebar-bg-red {
71
- background-color: #dc3545;
72
- }
73
-
74
- .sidebar-bg-orange {
75
- background-color: #fd7e14;
76
- }
77
-
78
- .sidebar-bg-green {
79
- background-color: #198754;
80
- }
81
-
82
- .sidebar-bg-teal {
83
- background-color: #20c997;
84
- }
85
-
86
- .sidebar-bg-cyan {
87
- background-color: #0dcaf0;
1
+ body {
2
+ overflow-x: hidden;
3
+ }
4
+
5
+ .wrapper {
6
+ min-height: 100vh;
7
+ }
8
+ .wrapper-navbar-used {
9
+ min-height: calc(100vh - 3.5rem);
10
+ }
11
+ .wrapper-navbar-fixed {
12
+ margin-top: 3.5rem;
13
+ }
14
+
15
+ .sidebar {
16
+ margin-left: -14.375rem;
17
+ transition: margin 0.15s ease-out;
18
+ }
19
+ @media (min-width: 768px) {
20
+ .sidebar {
21
+ margin-left: 0;
22
+ }
23
+ }
24
+ .sidebar-toggle {
25
+ margin-left: 0;
26
+ }
27
+ .sidebar-toggle-visible {
28
+ margin-left: 0;
29
+ }
30
+ @media (min-width: 768px) {
31
+ .sidebar-toggle-visible {
32
+ margin-left: -14.375rem;
33
+ }
34
+ }
35
+ .sidebar-rounded-top-right {
36
+ border-top-right-radius: 0.375rem;
37
+ }
38
+
39
+ .sidebar-menu {
40
+ width: 14.375rem;
41
+ }
42
+ .sidebar-menu-fixed {
43
+ position: fixed;
44
+ }
45
+
46
+ .sidebar-bg-white {
47
+ background-color: #fff;
48
+ }
49
+
50
+ .sidebar-bg-light {
51
+ background-color: #f8f9fa;
52
+ }
53
+
54
+ .sidebar-bg-dark {
55
+ background-color: #343a40;
56
+ }
57
+
58
+ .sidebar-bg-blue {
59
+ background-color: #0d6efd;
60
+ }
61
+
62
+ .sidebar-bg-purple {
63
+ background-color: #6f42c1;
64
+ }
65
+
66
+ .sidebar-bg-pink {
67
+ background-color: #d63384;
68
+ }
69
+
70
+ .sidebar-bg-red {
71
+ background-color: #dc3545;
72
+ }
73
+
74
+ .sidebar-bg-orange {
75
+ background-color: #fd7e14;
76
+ }
77
+
78
+ .sidebar-bg-green {
79
+ background-color: #198754;
80
+ }
81
+
82
+ .sidebar-bg-teal {
83
+ background-color: #20c997;
84
+ }
85
+
86
+ .sidebar-bg-cyan {
87
+ background-color: #0dcaf0;
88
88
  }
package/dist/sidebar.js CHANGED
@@ -1,5 +1,5 @@
1
- document.addEventListener("DOMContentLoaded", () => {
2
- document.getElementById("sidebar").addEventListener("click", () => {
3
- document.getElementById("navigation").classList.toggle("sidebar-toggle");
4
- });
5
- });
1
+ document.addEventListener("DOMContentLoaded", () => {
2
+ document.getElementById("sidebar").addEventListener("click", () => {
3
+ document.getElementById("navigation").classList.toggle("sidebar-toggle");
4
+ });
5
+ });
package/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8
- <link rel="stylesheet" href="/dist/sidebar.css">
7
+ <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
8
+ <link rel="stylesheet" href="dist/sidebar.css">
9
9
  <title>Sidebar</title>
10
10
  </head>
11
11
 
@@ -28,7 +28,7 @@
28
28
 
29
29
  <div class="d-flex wrapper wrapper-navbar-used wrapper-navbar-fixed">
30
30
 
31
- <nav role="navigation" class="sidebar sidebar-bg-light" id="navigation">
31
+ <nav role="navigation" class="sidebar sidebar-bg-dark" id="navigation">
32
32
 
33
33
  <!-- sidebar -->
34
34
  <div class="sidebar-menu">
@@ -43,8 +43,8 @@
43
43
  </div>
44
44
  </div>
45
45
 
46
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
47
- <script type="module" src="/dist/sidebar.js"></script>
46
+ <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
47
+ <script src="dist/sidebar.js"></script>
48
48
 
49
49
  </body>
50
50
  </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sidebar-skeleton-compostrap",
3
- "version": "2.0.10",
4
- "description": "Simple and fast sidebar skeleton on Bootstrap",
3
+ "version": "2.0.13",
4
+ "description": "Simple and fast sidebar skeleton built on Bootstrap 5.",
5
5
  "license": "MIT",
6
6
  "keywords": [
7
7
  "sidebar",
@@ -10,9 +10,9 @@
10
10
  ],
11
11
  "main": "dist/sidebar.js",
12
12
  "style": "dist/sidebar.css",
13
- "sass": "scss/sidebar.scss",
13
+ "sass": "src/scss/sidebar.scss",
14
14
  "devDependencies": {
15
- "sass": "^1.70.0",
15
+ "sass": "^1.97.1",
16
16
  "vite": "^7.3.0"
17
17
  },
18
18
  "peerDependencies": {
package/readme.md CHANGED
@@ -1,19 +1,18 @@
1
1
  ## Sidebar Skeleton
2
2
  Simple and fast sidebar skeleton built on Bootstrap 5.
3
- Ideal for dashboards, admin panels, and any layout needing a responsive sidebar.
4
3
 
5
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/compostrap/sidebar-skeleton/blob/master/license.md)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/compostrap/sidebar-skeleton/blob/master/license)
6
5
  [![npm version](https://badge.fury.io/js/sidebar-skeleton-compostrap.svg)](https://badge.fury.io/js/sidebar-skeleton-compostrap)
7
6
  [![Build status](https://github.com/compostrap/sidebar-skeleton/actions/workflows/build.yml/badge.svg)](https://github.com/compostrap/sidebar-skeleton/actions/workflows/build.yml)
8
7
  [![CodeFactor](https://www.codefactor.io/repository/github/compostrap/sidebar-skeleton/badge)](https://www.codefactor.io/repository/github/compostrap/sidebar-skeleton)
9
8
 
10
9
  ## Installation
11
10
  ```bash
12
- npm install --save sidebar-skeleton-compostrap
11
+ npm install sidebar-skeleton-compostrap
13
12
  ```
14
13
 
15
14
  ## Built on
16
- - Bootstrap: https://getbootstrap.com
15
+ - Bootstrap 5x: https://getbootstrap.com
17
16
 
18
17
  ## Demo
19
18
  Live demo: https://compostrap.github.io/skeleton
@@ -21,45 +20,45 @@ HTML template code: https://raw.githubusercontent.com/compostrap/sidebar-skeleto
21
20
 
22
21
  ## Introduction
23
22
  Simple and fast sidebar skeleton is built on Bootstrap.
24
- You should be familiar with Bootstrap usage and have basic knowledge of Sass, npm, and optionally Grunt.
23
+ You should be familiar with Bootstrap usage and have basic knowledge of Sass, npm.
25
24
 
26
25
  ## Customize sidebar when navbar is used
27
26
  When using a navbar, extend the class called wrapper:
28
27
 
29
- Navbar | Class
30
- ------------ | ----------------------
31
- unused | wrapper
32
- Used | wrapper-navbar-used
33
- Used (fixed) | wrapper-navbar-fixed
28
+ | Navbar | Class |
29
+ |--------------|----------------------|
30
+ | unused | wrapper |
31
+ | Used | wrapper-navbar-used |
32
+ | Used (fixed) | wrapper-navbar-fixed |
34
33
 
35
34
  ## Other classes
36
35
 
37
- Description | Class
38
- ---------------------------- | ---------------------------
39
- Right top rounded in sidebar | sidebar-rounded-top-right
40
- Fixed menu in sidebar | sidebar-menu-fixed
36
+ | Description | Class |
37
+ |------------------------------|---------------------------|
38
+ | Right top rounded in sidebar | sidebar-rounded-top-right |
39
+ | Fixed menu in sidebar | sidebar-menu-fixed |
41
40
 
42
41
  ## Overview of sidebar background colors
43
- Colors match Bootstrap. Add more colors in themes/_theme.scss.
42
+ Colors match Bootstrap.
44
43
 
45
- | Color | Class
46
- | --------------------------------------------------------------- | -----------
47
- | ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) | sidebar-bg-white
48
- | ![#f8f9fa](https://placehold.co/15x15/f8f9fa/f8f9fa.png) | sidebar-bg-light
49
- | ![#212529](https://placehold.co/15x15/212529/212529.png) | sidebar-bg-dark
50
- | ![#007bff](https://placehold.co/15x15/007bff/007bff.png) | sidebar-bg-blue
51
- | ![#6f42c1](https://placehold.co/15x15/6f42c1/6f42c1.png) | sidebar-bg-purple
52
- | ![#e83e8c](https://placehold.co/15x15/e83e8c/e83e8c.png) | sidebar-bg-pink
53
- | ![#dc3545](https://placehold.co/15x15/dc3545/dc3545.png) | sidebar-bg-red
54
- | ![#fd7e14](https://placehold.co/15x15/fd7e14/fd7e14.png) | sidebar-bg-orange
55
- | ![#28a745](https://placehold.co/15x15/28a745/28a745.png) | sidebar-bg-green
56
- | ![#20c997](https://placehold.co/15x15/20c997/20c997.png) | sidebar-bg-teal
57
- | ![#17a2b8](https://placehold.co/15x15/17a2b8/17a2b8.png) | sidebar-bg-cyan
44
+ | Color | Class |
45
+ |----------------------------------------------------------|-------------------|
46
+ | ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) | sidebar-bg-white |
47
+ | ![#f8f9fa](https://placehold.co/15x15/f8f9fa/f8f9fa.png) | sidebar-bg-light |
48
+ | ![#212529](https://placehold.co/15x15/212529/212529.png) | sidebar-bg-dark |
49
+ | ![#007bff](https://placehold.co/15x15/007bff/007bff.png) | sidebar-bg-blue |
50
+ | ![#6f42c1](https://placehold.co/15x15/6f42c1/6f42c1.png) | sidebar-bg-purple |
51
+ | ![#e83e8c](https://placehold.co/15x15/e83e8c/e83e8c.png) | sidebar-bg-pink |
52
+ | ![#dc3545](https://placehold.co/15x15/dc3545/dc3545.png) | sidebar-bg-red |
53
+ | ![#fd7e14](https://placehold.co/15x15/fd7e14/fd7e14.png) | sidebar-bg-orange |
54
+ | ![#28a745](https://placehold.co/15x15/28a745/28a745.png) | sidebar-bg-green |
55
+ | ![#20c997](https://placehold.co/15x15/20c997/20c997.png) | sidebar-bg-teal |
56
+ | ![#17a2b8](https://placehold.co/15x15/17a2b8/17a2b8.png) | sidebar-bg-cyan |
58
57
 
59
58
  ## Sidebar menu toggle
60
59
  If you want your own toggle button visible at all resolutions, update the class in sidebar.js:
61
60
 
62
- Description | Class
63
- ------------------------ | ------------------------
64
- Visible in small devices | sidebar-toggle
65
- Visible all resolutions | sidebar-toggle-visible
61
+ | Description | Class |
62
+ |--------------------------|------------------------|
63
+ | Visible in small devices | sidebar-toggle |
64
+ | Visible all resolution | sidebar-toggle-visible |
@@ -3,9 +3,9 @@
3
3
  //
4
4
 
5
5
  @use "../utils/index" as utils;
6
- @import "../../../node_modules/bootstrap/scss/functions";
7
- @import "../../../node_modules/bootstrap/scss/variables";
8
- @import "../../../node_modules/bootstrap/scss/mixins";
6
+ @import "bootstrap/scss/functions";
7
+ @import "bootstrap/scss/variables";
8
+ @import "bootstrap/scss/mixins";
9
9
 
10
10
  .sidebar {
11
11
  margin-left: -(utils.$sm-width);
@@ -3,8 +3,8 @@
3
3
  //
4
4
 
5
5
  @use "sass:map";
6
- @import "../../../node_modules/bootstrap/scss/functions";
7
- @import "../../../node_modules/bootstrap/scss/variables";
6
+ @import "bootstrap/scss/functions";
7
+ @import "bootstrap/scss/variables";
8
8
 
9
9
  $theme-colors: (
10
10
  'bg-white': ('sidebar-bg': $white),
package/vite.build.js CHANGED
@@ -2,4 +2,4 @@
2
2
  import './src/scss/sidebar.scss';
3
3
 
4
4
  // JS → sidebar.min.js
5
- import './src/sidebar.js';
5
+ import './src/sidebar';
package/vite.config.js CHANGED
@@ -1,5 +1,5 @@
1
- import { defineConfig } from 'vite'
2
- import path from 'path'
1
+ import { defineConfig } from 'vite';
2
+ import path from 'path';
3
3
 
4
4
  export default defineConfig({
5
5
  base: '',
@@ -8,26 +8,31 @@ export default defineConfig({
8
8
  allow: ['.', 'dist']
9
9
  }
10
10
  },
11
+ css: {
12
+ preprocessorOptions: {
13
+ scss: {
14
+ silenceDeprecations: [
15
+ 'import',
16
+ 'if-function',
17
+ 'global-builtin',
18
+ 'color-functions'
19
+ ]
20
+ }
21
+ }
22
+ },
11
23
  build: {
12
24
  outDir: 'dist',
13
25
  emptyOutDir: true,
14
26
  lib: {
15
27
  entry: path.resolve(__dirname, 'vite.build.js'),
16
- formats: ['es'],
17
- fileName: () => 'sidebar.js',
28
+ formats: ['es']
18
29
  },
19
30
  cssMinify: false,
20
31
  rollupOptions: {
21
32
  output: {
22
33
  assetFileNames: 'sidebar.[ext]',
23
- },
24
- },
25
- css: {
26
- preprocessorOptions: {
27
- scss: {
28
- quietDeps: true
29
- },
30
- },
31
- },
32
- },
33
- })
34
+ entryFileNames: 'sidebar.js'
35
+ }
36
+ }
37
+ }
38
+ });
@@ -1,31 +0,0 @@
1
- name: Node.js Build
2
-
3
- on:
4
- push:
5
- branches: [ "master" ]
6
- pull_request:
7
- branches: [ "master" ]
8
-
9
- jobs:
10
- build:
11
- runs-on: ubuntu-latest
12
-
13
- strategy:
14
- matrix:
15
- node-version: [20.19, 22.x]
16
-
17
- steps:
18
- - name: Checkout repository
19
- uses: actions/checkout@v4
20
-
21
- - name: Setup Node.js
22
- uses: actions/setup-node@v4
23
- with:
24
- node-version: ${{ matrix.node-version }}
25
- cache: 'npm'
26
-
27
- - name: Install dependencies
28
- run: npm ci
29
-
30
- - name: Build project
31
- run: npm run build
@@ -1,69 +0,0 @@
1
- <?xml encoding="UTF-8"?>
2
-
3
- <!ELEMENT latte (tags,filters,variables,functions)>
4
- <!ATTLIST latte vendor #REQUIRED>
5
- <!ATTLIST latte version #REQUIRED>
6
-
7
- <!ELEMENT tags (tag)+>
8
-
9
- <!ELEMENT tag (arguments)?>
10
- <!ATTLIST tag name CDATA #REQUIRED>
11
- <!ATTLIST tag type (PAIR|UNPAIRED|UNPAIRED_ATTR|ATTR_ONLY|AUTO_EMPTY) #REQUIRED>
12
- <!ATTLIST tag allowFilters (true|false) #IMPLIED>
13
- <!ATTLIST tag arguments CDATA #IMPLIED>
14
- <!ATTLIST tag deprecatedMessage CDATA #IMPLIED>
15
- <!ATTLIST tag multiLine (true|false) #IMPLIED>
16
- <!ATTLIST tag description #IMPLIED>
17
- <!ATTLIST tag documentation #IMPLIED>
18
- <!ATTLIST tag documentationUrl #IMPLIED>
19
-
20
- <!ELEMENT arguments (argument)+>
21
-
22
- <!ELEMENT argument EMPTY>
23
- <!ATTLIST argument name #REQUIRED>
24
- <!ATTLIST argument types CDATA #REQUIRED>
25
- <!ATTLIST argument repeatable (true|false) #IMPLIED>
26
- <!ATTLIST argument required (true|false) #IMPLIED>
27
- <!ATTLIST argument type #IMPLIED>
28
-
29
- <!ELEMENT filters (filter)+>
30
-
31
- <!ELEMENT filter (filterArguments)?>
32
- <!ATTLIST filter name #REQUIRED>
33
- <!ATTLIST filter description CDATA #IMPLIED>
34
- <!ATTLIST filter inputType #IMPLIED>
35
- <!ATTLIST filter returnType #IMPLIED>
36
- <!ATTLIST filter documentation CDATA #IMPLIED>
37
- <!ATTLIST filter documentationUrl CDATA #IMPLIED>
38
-
39
- <!ELEMENT filterArguments (filterArgument)+>
40
-
41
- <!ELEMENT filterArgument EMPTY>
42
- <!ATTLIST filterArgument name #REQUIRED>
43
- <!ATTLIST filterArgument type #REQUIRED>
44
- <!ATTLIST filterArgument defaultValue #IMPLIED>
45
- <!ATTLIST filterArgument description #IMPLIED>
46
- <!ATTLIST filterArgument repeatable (true|false) #IMPLIED>
47
-
48
- <!ELEMENT variables (variable)+>
49
-
50
- <!ELEMENT variable EMPTY>
51
- <!ATTLIST variable name #REQUIRED>
52
- <!ATTLIST variable type CDATA #REQUIRED>
53
-
54
- <!ELEMENT functions (function)+>
55
-
56
- <!ELEMENT function (functionArguments)?>
57
- <!ATTLIST function name #REQUIRED>
58
- <!ATTLIST function returnType #IMPLIED>
59
- <!ATTLIST function documentation CDATA #IMPLIED>
60
- <!ATTLIST function documentationUrl CDATA #IMPLIED>
61
- <!ATTLIST function deprecatedMessage CDATA #IMPLIED>
62
-
63
- <!ELEMENT functionArguments (functionArgument)+>
64
-
65
- <!ELEMENT functionArgument EMPTY>
66
- <!ATTLIST functionArgument name #REQUIRED>
67
- <!ATTLIST functionArgument type #REQUIRED>
68
- <!ATTLIST functionArgument defaultValue #IMPLIED>
69
- <!ATTLIST functionArgument description #IMPLIED>