https://github.com/node-projects/web-component-sidebar
https://github.com/node-projects/web-component-sidebar
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/node-projects/web-component-sidebar
- Owner: node-projects
- Created: 2023-02-15T10:49:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-05T08:05:21.000Z (almost 2 years ago)
- Last Synced: 2025-02-24T14:50:14.041Z (3 months ago)
- Language: TypeScript
- Size: 3.89 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Component Sidebar
## What?
This is supposed to be a generic, multipurpose sidebar, that is going to be highly adaptable. At the moment, the sidebar is working and useable, but there will be lots of changes and improvements to come.
## How?
Use the sidebar by importing the web-component and adding it to the HTML DOM like this:
```html
import "./node_modules/web-component-sidebar/dist/sidebar-menu.js";
#sidebar {
/* --main-bg-color: #21333D;
--main-font-color: #fff;*/
--hover-bg-color: red;
/* --selected-font-color: #fff;
--submenu-border-color: #2E4A5A;
--icon-bg-color: transparent;
--sidebar-cell-height: 80px;
--sidebar-icon-height: 60px; */
/* --sidebar-cell-minwidth: 550px; */
/*--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-size: 1.1rem; */
}
```
You can pass the sidebar structure via json into the element. The icon property contains the relative path to the images folder. The base path can be set via the **images-root** property.
## Styling
The component has a default style, which can be overwritten by setting the css variables, like seen in the code-snippet above.