How do I hide the sidebar for anon viewers?

Support
1

We’ve got the sidebar configured on our site, which is mostly private with a little bit of public stuff.

We are very keen to only have the sidebar active when the user is logged in (i.e. not shown to anon).

I’ve tried this CSS:

// hide sidebar from non-logged in users (stuffs up layout unfortunately)
.anon {
    .sidebar-wrapper, .header-sidebar-toggle {
        display: none;
   }
}

This indeed hides the sidebar, but the sidebar layout remains (and doesn’t look great). Is there a better way?

I know that we could switch to the new Header Dropdown view (under navigation_menu) and sort it that way, but we would really like to have the sidebar visible for our signed in users (without a click) if possible.

2

Hello,

With this you can hide the sidebar for anons. :slightly_smiling_face:

Common / CSS

html.anon {
  // Hide the narrow desktop sidebar 
  // sidebar mobile version which is activate on desktop too under 1000px width
  .d-header .hamburger-panel {
    display: none;
  }
  // Hide the header cloak when menu opens
  .header-cloak {
    display: none !important;
  }
}

Desktop / CSS

html.anon {
  // If sidebar opened use the closed style
  body.has-sidebar-page {
    #main-outlet-wrapper {
      grid-template-columns: 0 minmax(0, 1fr);
      gap: 0;
      padding-left: 10px;
    }
    .wrap {
      max-width: var(--d-max-width);
    }
  }
  // Hide hamburger button
  .header-sidebar-toggle {
    display: none;
  }
}

Mobile / CSS

html.anon {
  // Hide hamburger button
  .d-header-icons {
    .header-dropdown-toggle {
      &.hamburger-dropdown {
        display: none;
      }
    }
  }
}
10 Likes
3

You are an absolute legend!

To show my gratitude, I’ve packaged it as a theme-component

5 Likes
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.