{"id":13401251,"url":"https://github.com/azouaoui-med/pro-sidebar-template","last_synced_at":"2025-05-14T18:05:18.943Z","repository":{"id":23876256,"uuid":"95911231","full_name":"azouaoui-med/pro-sidebar-template","owner":"azouaoui-med","description":"Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript","archived":false,"fork":false,"pushed_at":"2025-02-18T01:10:57.000Z","size":1039,"stargazers_count":990,"open_issues_count":1,"forks_count":459,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-13T12:46:14.972Z","etag":null,"topics":["css","html","javascript","layout","layout-template","menu","responsive","scss","sidebar","sidebar-template","submenu","webpack"],"latest_commit_sha":null,"homepage":"https://azouaoui-med.github.io/pro-sidebar-template","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azouaoui-med.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-06-30T17:46:22.000Z","updated_at":"2025-04-11T03:09:01.000Z","dependencies_parsed_at":"2025-01-17T04:03:23.797Z","dependency_job_id":"a7f2f45a-5fe9-447a-81ee-8afc6a6e1acb","html_url":"https://github.com/azouaoui-med/pro-sidebar-template","commit_stats":{"total_commits":137,"total_committers":4,"mean_commits":34.25,"dds":"0.051094890510948954","last_synced_commit":"9cf019692b69bfd833baff3f60bf20f3a856fe2e"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Fpro-sidebar-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Fpro-sidebar-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Fpro-sidebar-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azouaoui-med%2Fpro-sidebar-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azouaoui-med","download_url":"https://codeload.github.com/azouaoui-med/pro-sidebar-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"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":["css","html","javascript","layout","layout-template","menu","responsive","scss","sidebar","sidebar-template","submenu","webpack"],"created_at":"2024-07-30T19:01:00.402Z","updated_at":"2025-05-14T18:05:13.928Z","avatar_url":"https://github.com/azouaoui-med.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Pro sidebar template\n\nResponsive layout with advanced sidebar menu built with SCSS and vanilla Javascript\n\n## Demo\n\n[See it live](https://azouaoui-med.github.io/pro-sidebar-template)\n\n## Screenshot\n\n![Pro Sidebar](https://user-images.githubusercontent.com/25878302/215290325-e5c6043b-4411-404c-83b8-dcc227df70ad.jpg)\n\n## Installation\n\n```\n# clone the repo\n$ git clone https://github.com/azouaoui-med/pro-sidebar-template.git my-project\n\n# go into app's directory\n$ cd my-project\n\n# install app's dependencies\n$ yarn install\n\n```\n\n## Usage\n\n```\n# serve with hot reload at localhost:8080\n$ yarn start\n\n# build app for production\n$ yarn build\n\n```\n\n## Documentation\n\n### Layout\n\nThe layout for this template is based on [css pro layout](https://github.com/azouaoui-med/css-pro-layout) package, please refer to the [docs](https://azouaoui-med.github.io/css-pro-layout/) for more information\n\n### Sidebar\n\nResponsive navigation element for building vertical menu items\n\n**Sidebar Image**\n\nAdding background image requires adding `.has-bg-image` class to sidebar component, and the image needs to be inside `.image-wrapper` component\n\n```html\n\u003caside id=\"sidebar\" class=\"sidebar break-point-lg has-bg-image\"\u003e\n  \u003cdiv class=\"image-wrapper\"\u003e\n    \u003cimg src=\"assets/images/sidebar-bg.jpg\" alt=\"sidebar background\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"sidebar-layout\"\u003e\n    \u003c!-- Content here --\u003e\n  \u003c/div\u003e\n\u003c/aside\u003e\n```\n\n### Sidebar Layout\n\nSidebar comes with layout support for better organization of the inner structure\n\n```html\n\u003caside id=\"sidebar\" class=\"sidebar break-point-lg\"\u003e\n  \u003cdiv class=\"sidebar-layout\"\u003e\n    \u003cdiv class=\"sidebar-header\"\u003e\n      \u003c!-- Header content here --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sidebar-content\"\u003e\n      \u003c!-- Content here --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sidebar-footer\"\u003e\n      \u003c!-- Footer content here --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/aside\u003e\n```\n\nMore on the sidebar [here](https://azouaoui-med.github.io/css-pro-layout/docs/reference/sidebar)\n\n### Menu\n\nWrapper component that groups all menu items\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003c!-- Content here --\u003e\n\u003c/nav\u003e\n```\n\n**Open current submenu**\n\nUse `.open-current-submenu` to enable opening only one submenu component at a time\n\n```html\n\u003cnav class=\"menu open-current-submenu\"\u003e\n  \u003c!-- Content here --\u003e\n\u003c/nav\u003e\n```\n\n**Icon shape**\n\nA set of classes are provided to restyle menu icons\n\n- `.icon-shape-square`\n- `.icon-shape-rounded`\n- `.icon-shape-circle`\n\n```html\n\u003cnav class=\"menu icon-shape-circle\"\u003e\n  \u003c!-- Content here --\u003e\n\u003c/nav\u003e\n```\n\n### Menu Item\n\nBuilding menu item requires having `.menu-item` class in the wrapper and `.menu-title` for the text\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"menu-item\"\u003e\n      \u003ca href=\"#\"\u003e\n        \u003cspan class=\"menu-title\"\u003emenu text\u003c/span\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n    \u003c!-- More menu items --\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n**Menu Icon**\n\nUse `.menu-icon` to add an icon to menu items\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"menu-item\"\u003e\n      \u003ca href=\"#\"\u003e\n        \u003cspan class=\"menu-icon\"\u003e\n          \u003ci class=\"ri-service-fill\"\u003e\u003c/i\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"menu-title\"\u003emenu text\u003c/span\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n    \u003c!-- More menu items --\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n**Prefix \u0026 Suffix**\n\nMenu item also supports having prefix and suffix components\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"menu-item\"\u003e\n      \u003ca href=\"#\"\u003e\n        \u003cspan class=\"menu-icon\"\u003e\n          \u003ci class=\"ri-service-fill\"\u003e\u003c/i\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"menu-prefix\"\u003eprefix\u003c/span\u003e\n        \u003cspan class=\"menu-title\"\u003emenu text\u003c/span\u003e\n        \u003cspan class=\"menu-suffix\"\u003esuffix\u003c/span\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n    \u003c!-- More menu items --\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n### Sub Menu\n\nAdd `.sub-menu` class to menu item and create a wrapper component with `sub-menu-list` class to group sub menu items\n\n\u003e Its possible to have unlimited nesting menu items\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"menu-item sub-menu\"\u003e\n      \u003ca href=\"#\"\u003e\n        \u003cspan class=\"menu-title\"\u003emenu text\u003c/span\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"sub-menu-list\"\u003e\n        \u003cli class=\"menu-item\"\u003e\n          \u003ca href=\"#\"\u003e\n            \u003cspan class=\"menu-title\"\u003esub menu text\u003c/span\u003e\n          \u003c/a\u003e\n        \u003c/li\u003e\n        \u003c!-- More sub menu items --\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003c!-- More menu items --\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n**Open default**\n\nUse `.open` class to have sub menu expanded by default\n\n```html\n\u003cnav class=\"menu\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"menu-item sub-menu open\"\u003e\n      \u003ca href=\"#\"\u003e\n        \u003cspan class=\"menu-title\"\u003emenu text\u003c/span\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"sub-menu-list\"\u003e\n        \u003cli class=\"menu-item\"\u003e\n          \u003ca href=\"#\"\u003e\n            \u003cspan class=\"menu-title\"\u003esub menu text\u003c/span\u003e\n          \u003c/a\u003e\n        \u003c/li\u003e\n        \u003c!-- More sub menu items --\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e\n    \u003c!-- More menu items --\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n### Customization\n\nUpdate SCSS variables in `src/styles/_variables.scss` to customize the template\n\n```scss\n$text-color: #b3b8d4;\n$secondary-text-color: #dee2ec;\n$bg-color: #0c1e35;\n$secondary-bg-color: #0b1a2c;\n$border-color: rgba(#535d7d, 0.3);\n$sidebar-header-height: 64px;\n$sidebar-footer-height: 64px;\n```\n\n## License\n\nThis code is released under the [MIT](https://github.com/azouaoui-med/pro-sidebar-template/blob/gh-pages/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazouaoui-med%2Fpro-sidebar-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazouaoui-med%2Fpro-sidebar-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazouaoui-med%2Fpro-sidebar-template/lists"}