{"id":18894932,"url":"https://github.com/davidde/sidebars","last_synced_at":"2025-04-15T00:32:20.401Z","repository":{"id":42233665,"uuid":"224938580","full_name":"davidde/sidebars","owner":"davidde","description":"Minimal implementation of responsive sidebars","archived":false,"fork":false,"pushed_at":"2023-03-03T10:12:34.000Z","size":3626,"stargazers_count":71,"open_issues_count":17,"forks_count":26,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T13:05:58.072Z","etag":null,"topics":["gatsby","react","responsive-design","sidebar"],"latest_commit_sha":null,"homepage":"https://davidde.github.io/sidebars/","language":"JavaScript","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/davidde.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":"2019-11-30T00:21:49.000Z","updated_at":"2024-11-07T06:15:07.000Z","dependencies_parsed_at":"2024-11-08T08:29:33.493Z","dependency_job_id":"c6f9de7d-4905-4480-b1d5-2686e79a72c6","html_url":"https://github.com/davidde/sidebars","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/davidde%2Fsidebars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidde%2Fsidebars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidde%2Fsidebars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidde%2Fsidebars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidde","download_url":"https://codeload.github.com/davidde/sidebars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248984505,"owners_count":21193763,"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":["gatsby","react","responsive-design","sidebar"],"created_at":"2024-11-08T08:25:35.986Z","updated_at":"2025-04-15T00:32:15.392Z","avatar_url":"https://github.com/davidde.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive sidebars\nThis project is somewhat of a research experiment\ninto the most convenient way of implementing responsive sidebars.\n\n## Priorities\n* Simple design, easy to understand.\n* Responsive design:\n    - In landscape mode the sidebars should push the main content aside.\n    - In portrait mode they should cover the main content.\n* The sidebar trigger should *not* move when clicked;\n  this is annoying to the user.\n* The sidebar should be 'ready' when it slides into view,\n  and not rearrange its content while opening.  \n  (This is visually distracting, but a very common implementation;  \n  e.g. variable-width sidebars with `width: 0` when closed)\n\n## Design\nThe code is deliberately kept minimal to not distract from the\nsidebar mechanics.  \nThe main version uses **flexbox**, but there are other branches\nexploring CSS grid and absolute positioning.\n\n**3 flex items** are used for their adaptive features:\nthe sidebars **`#left`** and **`#right`**, and the main content **`#main`**.  \nThis allows pushing the main content aside when the landscape sidebars open\n(by transitioning the `#left` and `#right` widths).\nHowever, since we want the sidebars to be fixed-width, so they do not\nrearrange their content while opening, the actual sidebars are not these\nvariable-width flex items, but child divs with fixed widths.\n\nAs a result, the sidebars make use of **2 separate transitions**:\n- One to push the main content aside when the sidebars open in landscape mode,  \n  by **transitioning the `#left` and `#right` flex items' width** from 0 to the\n  sidebar width.\n- Another to slide the (portrait and landscape) fixed-width sidebar child divs\n  in and out of view,  \n  by **transitioning their `transform: translateX(-100%)` property**.\n  \n## Implementations\nFor a more mature implementation, see [gatsby-theme-simpwa](https://github.com/davidde/gatsby-theme-simpwa)\nand its starter [gatsby-starter-simpwa](https://github.com/davidde/gatsby-starter-simpwa).  \nYou can see them both deployed [here](https://davidde.github.io/gatsby-starter-simpwa/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidde%2Fsidebars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidde%2Fsidebars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidde%2Fsidebars/lists"}