{"id":19656353,"url":"https://github.com/daggerok/simple-toolbar-angular-example","last_synced_at":"2026-05-06T06:38:17.314Z","repository":{"id":151042011,"uuid":"233919596","full_name":"daggerok/simple-toolbar-angular-example","owner":"daggerok","description":"Learn how to easy and quick design and implement simple toolbar with Angular","archived":false,"fork":false,"pushed_at":"2023-10-11T00:41:27.000Z","size":521,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T00:42:28.481Z","etag":null,"topics":["angular","css","ng","scss"],"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/daggerok.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":"2020-01-14T19:31:28.000Z","updated_at":"2020-01-14T20:14:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc7a32d0-4690-41d0-b207-fe9b397cf4ff","html_url":"https://github.com/daggerok/simple-toolbar-angular-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fsimple-toolbar-angular-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fsimple-toolbar-angular-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fsimple-toolbar-angular-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fsimple-toolbar-angular-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daggerok","download_url":"https://codeload.github.com/daggerok/simple-toolbar-angular-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240964704,"owners_count":19885794,"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":["angular","css","ng","scss"],"created_at":"2024-11-11T15:27:32.600Z","updated_at":"2025-11-08T03:02:06.545Z","avatar_url":"https://github.com/daggerok.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularToolbar\nLearn how to easy and quick design and implement simple toolbar with Angular\n\n## site routes and components pages\n\nlet's create 3 components for needed pages: Home, Services and Contacts:\n\n```bash\nng g c components/home\nng g c components/services\nng g c components/contacts\n```\n\nand configure routes in `app-routing.module.ts` file:\n\n```typescript\n// skipped before...\nimport { HomeComponent } from './components/home/home.component';\nimport { ServicesComponent } from './components/services/services.component';\nimport { ContactsComponent } from './components/contacts/contacts.component';\n\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'services', component: ServicesComponent },\n  { path: 'contacts', component: ContactsComponent },\n];\n// skipped after...\n```\n\n## html structure\n\nmain `app.component.html` structure should looks like so:\n\n```html\n\u003cheader id=\"header\"\u003e\n  \u003cdiv id=\"banner\"\u003eMyAweApp\u003c/div\u003e\n\n  \u003cdiv class=\"spacer\"\u003e\u003c/div\u003e\n\n  \u003cul id=\"menu\"\u003e\n    \u003cli\u003e\u003ca href=\"#\" routerLink=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#\" routerLink=\"/services\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#\" routerLink=\"/contacts\"\u003eContacts\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/header\u003e\n\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n## styles\n\nglobal styles in `styles.scss` file, just doing basic reset css and setting up font we need:\n\n```css\n* {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: \"Roboto\", sans-serif, Arial;\n}\n```\n\nfinally, our `app.component.scss` scoped styles should be as follows:\n\n```scss\n$primaryBgColor: rgb(173, 16, 215);\n$activeLinkBgColor: darken($primaryBgColor, 5%);\n$primaryColor: #fff5d7;\n\nheader#header {\n  display: flex;\n  background-color: $primaryBgColor;\n  color: $primaryColor;\n\n  #banner {\n    padding: 1em;\n  }\n\n  .spacer {\n    flex: 1;\n  }\n\n  ul#menu {\n    display: flex;\n\n    li {\n      padding: 1em;\n      list-style: none;\n\n      a {\n        text-decoration: none;\n        color: $primaryColor;\n      }\n\n      \u0026:hover {\n        background-color: $activeLinkBgColor;\n      }\n    }\n  }\n}\n\n@media (width: 414px) {\n  ul#menu {\n    padding-right: 1em;\n  }\n}\n```\n\n## results\n\nMobile:\n\n![Mobile](mobile.png)\n\nDesktop:\n\n![Tablets](desktop.png)\n\n\u003c!--\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.22.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fsimple-toolbar-angular-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaggerok%2Fsimple-toolbar-angular-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fsimple-toolbar-angular-example/lists"}