Persistent off-canvas-overlay

Poorchop commented 6 years ago

I'm having trouble replicating the off-canvas-sidebar behavior found in the documents. When I shrink the window width to under 960px, everything works as expected. I click the button to reveal the sidebar and then expand the window back to over 960px, but the off-canvas-overlay doesn't disappear.

Expected behavior:

shrink window width to under 960px
reveal hidden sidebar
expand window to over 960px
left sidebar should appear normally alongside main content area
shrink window width back to under 960px
sidebar and off-canvas-overlay still visible until off-canvas-overlay is clicked

This is how the sidebar in the documentation behaves.

Here is my html:

<!DOCTYPE html>
<html>
  <head>
    <title>Spectre.css Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/spectre.css">
    <link rel="stylesheet" href="css/spectre-exp.css">
    <link rel="stylesheet" href="css/spectre-icons.css">
  </head>

  <body>

    <div class="off-canvas off-canvas-sidebar-show">
      <!-- off-screen toggle button -->
      <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-left">
        <i class="icon icon-menu"></i>
      </a>

      <!-- off-screen left sidebar -->
      <div id="sidebar-left" class="off-canvas-sidebar">
        <span>Sidebar</span>
      </div>

      <a class="off-canvas-overlay" href="#close"></a>

      <div class="off-canvas-content">
        <h1>Content</h1>
        <p>The main content will appear in this paragraph.</p>
      </div>

    </div>

  </body>
</html>

Hopefully this clip better demonstrates my problem: Video

Poorchop commented 6 years ago

Correction to the above: I think that I misunderstood how this works. It seems that the example functions the way that I expected, but the overall documentation page functions similarly to the video that I posted. I guess this would mean that everything is working the way that is intended within Spectre but I think it's worth considering the option of having this function the way that I thought it would if possible. It makes for a better experience with responsive webapps.

ghost commented 6 years ago

@picturepan2 I use the CSS Files:

spectre.min.css
spectre-exp.min.css
spectre-icons.min.css

in the Version v0.5.2 from unpkg.com But the issue still exists....

picturepan2 / spectre

Persistent off-canvas-overlay #392