{"id":16367953,"url":"https://github.com/treetips/angular-material-appbar-sidenav-ngrx-example","last_synced_at":"2026-05-05T23:31:20.552Z","repository":{"id":150606561,"uuid":"129927832","full_name":"treetips/angular-material-appbar-sidenav-ngrx-example","owner":"treetips","description":"angular-material auto toggle sidenav with @ngrx/store example","archived":false,"fork":false,"pushed_at":"2018-04-17T15:45:24.000Z","size":88,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T15:28:28.196Z","etag":null,"topics":["angular","angular-material","angular5","animation","appbar","material-design","ngrx-store","responsive","sidenav","typescript","yarn"],"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/treetips.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":"2018-04-17T15:41:58.000Z","updated_at":"2019-04-10T18:50:42.000Z","dependencies_parsed_at":"2023-06-12T00:45:41.468Z","dependency_job_id":null,"html_url":"https://github.com/treetips/angular-material-appbar-sidenav-ngrx-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/treetips/angular-material-appbar-sidenav-ngrx-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treetips%2Fangular-material-appbar-sidenav-ngrx-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treetips%2Fangular-material-appbar-sidenav-ngrx-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treetips%2Fangular-material-appbar-sidenav-ngrx-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treetips%2Fangular-material-appbar-sidenav-ngrx-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/treetips","download_url":"https://codeload.github.com/treetips/angular-material-appbar-sidenav-ngrx-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treetips%2Fangular-material-appbar-sidenav-ngrx-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32672512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","angular-material","angular5","animation","appbar","material-design","ngrx-store","responsive","sidenav","typescript","yarn"],"created_at":"2024-10-11T02:51:16.757Z","updated_at":"2026-05-05T23:31:20.524Z","avatar_url":"https://github.com/treetips.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-material auto toggle sidenav example\n\n[https://material.angular.io/](angular-material)\n\nWith sidenav module of angular-material, it is the sample which changes the mode of the sidenavi from 'side' to 'over' automatically when screen size is changed.\n\nI manage the opening and shutting status of the sidenavi in store using @ngrx/store. Similarly, I manage the title on appbar in store. I can confirm the state of the store by Redux DevTools addon of Google Chrome.\n\nangular-materialのappbarとsidenavモジュールを使い、スクリーンサイズが変更されると自動的にサイドナビのモードをoverに変更するサンプルです。\n\nサイドナビの開閉ステータスは@ngrx/storeを使い、storeで管理しています。同様にappbar上のタイトルもstoreで管理しています。ストアの状態はGoogle ChromeのRedux DevToolsアドオンで確認する事ができます。\n\n## Features\n\n- yarn v1.3\n- angular v5.2.9\n- angular-material v5.2.4\n- @ngrx/store v5.2.0\n- @ngrx/store-devtools v5.2.0\n\n## Requirement\n\n- yarn or npm\n\n## Screenshot\n\n\u003cimg width=\"905\" alt=\"angular-material-appbar-sidenav-ngrx-example\" src=\"https://user-images.githubusercontent.com/12574048/38794574-853274d6-4190-11e8-8cd3-6d47c689720c.gif\"\u003e\n\n## Usage\n\n```bash\n# browse and install Google chrome addon\nhttps://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja\n# git clone\ngit clone https://github.com/treetips/angular-material-appbar-sidenav-ngrx-example.git\ncd angular-material-appbar-sidenav-ngrx-example\n# install node_modules\nyarn install\n# start\nyarn start\n# open dev tools and select redux tab\n# browse\nhttp://localhost:4200/\n```\n\n## License\n\n[MIT](http://b4b4r07.mit-license.org)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreetips%2Fangular-material-appbar-sidenav-ngrx-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftreetips%2Fangular-material-appbar-sidenav-ngrx-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreetips%2Fangular-material-appbar-sidenav-ngrx-example/lists"}