Skip to content

Collapsible Left Sidebar Improvements #551

@jondricek

Description

@jondricek

Summary

Make the left sidebar on desktop both resizable (drag the separator) and collapsible to a compact icon-only column (maybe 60px) so the main content fluidly expands to fill the freed horizontal space.

The mobile overlay/top-collapsed behavior should remain unchanged as it already collapses the sidebar content at the top of each page.

Things to do

  • A visible toggle control collapses/expands the sidebar; toggle exposes aria-expanded and aria-controls.
  • When collapsed on desktop the sidebar reduces to a compact icon-only column (≈60px) and the main content immediately fills the freed width.
  • A resizer handle between sidebar and content allows horizontal drag resizing; enforce min/max width (e.g., 200px–520px) and persist the last width. This is already partially completed, but does not have min/max width set anywhere yet.
  • Persist collapsed state and last width across page navigations (suggested localStorage keys: "sidebarCollapsed" and "sidebarWidth").

Files to review / reference:

  • Template: attack-theme/templates/general/sidebar-template.html
  • Layout template: attack-theme/templates/general/two-column.html
  • Stylesheet: attack-theme/static/style-attack.css (built from SCSS files in attack-style/ project)
  • Existing resizer script reference: /theme/scripts/resizer.js (as used in attack-theme/templates/general/two-column.html)
  • Suggested new script: /theme/scripts/sidebar.js

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions