{"id":26183183,"url":"https://github.com/andrewalderson/angular-material-sidenav-resize","last_synced_at":"2026-04-25T11:36:42.809Z","repository":{"id":60232515,"uuid":"440638388","full_name":"andrewalderson/angular-material-sidenav-resize","owner":"andrewalderson","description":"A sample of how to make the Angular Material Sidenav resizable with animations","archived":false,"fork":false,"pushed_at":"2023-10-27T21:16:22.000Z","size":562,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T10:02:00.957Z","etag":null,"topics":["angular","animation","material"],"latest_commit_sha":null,"homepage":"https://andrewalderson.github.io/angular-material-sidenav-resize","language":"TypeScript","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/andrewalderson.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,"zenodo":null}},"created_at":"2021-12-21T20:09:48.000Z","updated_at":"2022-12-06T20:42:56.000Z","dependencies_parsed_at":"2025-06-01T00:06:32.368Z","dependency_job_id":"421cc108-6545-4c99-93b4-c0db9052fb38","html_url":"https://github.com/andrewalderson/angular-material-sidenav-resize","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andrewalderson/angular-material-sidenav-resize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalderson%2Fangular-material-sidenav-resize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalderson%2Fangular-material-sidenav-resize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalderson%2Fangular-material-sidenav-resize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalderson%2Fangular-material-sidenav-resize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewalderson","download_url":"https://codeload.github.com/andrewalderson/angular-material-sidenav-resize/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewalderson%2Fangular-material-sidenav-resize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32261117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"last_error":"SSL_read: 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","animation","material"],"created_at":"2025-03-11T22:36:01.144Z","updated_at":"2026-04-25T11:36:37.799Z","avatar_url":"https://github.com/andrewalderson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Material Sidenav Resize\n\n[Demo](https://andrewalderson.github.io/angular-material-sidenav-resize)\n\nThis is a sample of how to add an animation when changing the width of the Material Sidenav or Drawer components.\nCurrently this functionality is not supported. The 'autosize' functionality of the container component only\nsupports resizing without an animation. The problem with the current implementation \nis that class added to the container ('mat-drawer-transition') to handle the animations interferes with proper \nadjustment of the container margins and causes the updating of the margins to lag behind the updating of the \nwith of the drawer.\n\nThis sample uses a directive that handles removing the 'mat-drawer-transition' class\nafter the animations are completed. It also adds a directive that encapsulates\nobserving the resize of the drawer and updating the containers content margins.\nIt also uses an internal 'viewport' component that encapsulates the animations\nfor resizing the width of the drawer. We are not actually resizing the drawer but this internal component.\nThe drawer is set to be the width of this internal 'viewport'.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewalderson%2Fangular-material-sidenav-resize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewalderson%2Fangular-material-sidenav-resize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewalderson%2Fangular-material-sidenav-resize/lists"}