{"id":20358270,"url":"https://github.com/node-projects/web-component-sidebar","last_synced_at":"2025-03-04T17:48:31.440Z","repository":{"id":117522531,"uuid":"602028041","full_name":"node-projects/web-component-sidebar","owner":"node-projects","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-05T08:05:21.000Z","size":4077,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-24T14:50:14.041Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-projects.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-15T10:49:36.000Z","updated_at":"2023-03-03T10:28:48.000Z","dependencies_parsed_at":"2024-11-14T23:27:59.963Z","dependency_job_id":"45006348-661e-4ce4-821f-5df58754a4a2","html_url":"https://github.com/node-projects/web-component-sidebar","commit_stats":null,"previous_names":["lschirmbrand/web-component-sidebar"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fweb-component-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fweb-component-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fweb-component-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fweb-component-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-projects","download_url":"https://codeload.github.com/node-projects/web-component-sidebar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241895356,"owners_count":20038512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T23:26:12.538Z","updated_at":"2025-03-04T17:48:31.402Z","avatar_url":"https://github.com/node-projects.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Component Sidebar\n## What?\n\nThis 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.\n\n## How?\n\nUse the sidebar by importing the web-component and adding it to the HTML DOM like this:\n\n```html\n\u003cscript  type=\"module\"\u003e\n\timport  \"./node_modules/web-component-sidebar/dist/sidebar-menu.js\";\n\u003c/script\u003e\n\u003cstyle\u003e\n\t#sidebar {\n\t\t/* --main-bg-color: #21333D;\n\t\t--main-font-color: #fff;*/\n\t\t--hover-bg-color: red;\n\t\t/* --selected-font-color: #fff;\n\t\t--submenu-border-color: #2E4A5A;\n\t\t--icon-bg-color: transparent;\n\t\t--sidebar-cell-height: 80px;\n\t\t--sidebar-icon-height: 60px; */\n\t\t/* --sidebar-cell-minwidth: 550px; */\n\t\t/*--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n\t\t--font-size: 1.1rem; */\n\t}\n\u003c/style\u003e\n\u003csidebar-menu  id=\"sidebar\"  \n\timages-root=\"../../../assets\"  \n\tmenu-items='\n\t\t[\n\t\t   {\n\t\t       \"id\": \"what-ever-you-set\",\n\t\t       \"displayName\": \"Sidebaritem\",\n\t\t       \"icon\": \"Sidebarlogo.svg\",\n\t\t       \"children\": [\n\t\t           {\n\t\t               \"id\": \"RBG1\",\n\t\t               \"displayName\": \"Sub-Sidebaritem\",\n\t\t               \"children\": [\n\t\t                   {\n\t\t                       \"id\": \"what-ever-you-set\",\n\t\t                       \"displayName\": \"Sub-Sidebaritem\"\n\t\t                   },\n\t\t                   {\n\t\t                       \"id\": \"what-ever-you-set\",\n\t\t                       \"displayName\": \"Sub-Sidebaritem\"\n\t\t                   },\n\t\t                   {\n\t\t                       \"id\": \"what-ever-you-set\",\n\t\t                       \"displayName\": \"Sub-Sidebaritem\",\n\t\t                       \"children\": [\n\t\t                           {\n\t\t                               \"id\": \"what-ever-you-set\",\n\t\t                               \"displayName\": \"Sub-Sub-Sidebaritem\"\n\t\t                           },\n\t\t                           {\n\t\t                               \"id\": \"what-ever-you-set\",\n\t\t                               \"displayName\": \"Sub-Sub-Sidebaritem\"\n\t\t                           }\n\t\t                       ]\n\t\t                   }\n\t\t               ]\n\t\t           }\n\t\t       ]\n\t\t   }\n\t\t]'\u003e\u003c/sidebar-menu\u003e\n```\n\nYou 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.\n\n## Styling\nThe component has a default style, which can be overwritten by setting the css variables, like seen in the code-snippet above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fweb-component-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-projects%2Fweb-component-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fweb-component-sidebar/lists"}