Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(Sidebar): Full page sidebar

See original GitHub issue

Posting an issue for feed back.

Given the idea behind this feature, I can only see on small issue.

This is my use case.

<Sidebar.Pushable>
  <Sidebar as={Menu} visible vertical inverted >
    <Menu.Item name='home'>
      <Icon name='home' />
      Home
    </Menu.Item>
    <Menu.Item name='gamepad'>
      <Icon name='gamepad' />
      Games
    </Menu.Item>
    <Menu.Item name='camera'>
      <Icon name='camera' />
      Channels
    </Menu.Item>
  </Sidebar>
  <Sidebar.Pusher >
    //maybe another menu here for the top nav
    <Segment basic>
      {React.Children.toArray(this.props.children)}
    </Segment>
  </Sidebar.Pusher>
</Sidebar.Pushable>

In @levithomason’s comment he said add a page prop to the Sidebar component. Which would be fine but what would happen if someone did this?

<Sidebar.Pushable>
  <Sidebar as={Menu} visible vertical inverted page>
    ...
  </Sidebar>
  <Sidebar.Pusher >
   ...
  </Sidebar.Pusher>
</Sidebar.Pushable>

Do we add a pushable to both the pushable div and the body? Should we throw a warning?

Issue Analytics

State:
Created 7 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

10reactions

patrikmolssoncommented, Sep 17, 2017

Hey,

I managed to do a work-around forcing the sidebar to be full-page, using min-height: 100vh;

This is my implementation:

  render() {
    const { children } = this.props;

    return (
      <Sidebar.Pushable styleName="sidebar-container">
        <Sidebar as={Menu} vertical inverted visible={this.state.sidebar_open} animation={'push'}>
          <Menu.Item name="Departments">
            Departments
            <Icon name={'home'} />
          </Menu.Item>
        </Sidebar>
        <Sidebar.Pusher as={Container}>
          <SidebarToggle callback={this.toggleSidebar} />
          {children}
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    );

This is placed in a div with min-height: 100vh;, also the styleName sidebar-container adds min-height: 100vh; to the Sidebar.Pushable.

It could probably be implemented alternatively in a more general manner.

1reaction

levithomasoncommented, Jul 28, 2017

Would love a PR on this, there has not been a business need to date on my end to fund the time to complete it.

Regarding above comments, you can find layout examples here: https://react.semantic-ui.com/layouts

You can also reference the docs Sidebar which is just a left fixed menu. We just put it in a very simple flex layout.

This, however, does not implement animations as the <Sidebar /> component does. For that, we need a PR.

Top Results From Across the Web

Force sidebar height 100% using CSS (with a sticky bottom ...

But if you have a lot of content, then when you scroll down, the sidebar will not fill the full height any longer....

Simple Sidebar - Bootstrap Sidebar Template

A simple sidebar template for Bootstrap 5 featuring responsive sidebar navigation. All Start Bootstrap templates are free to download and open source.

CSS Sidebars: A Beginner's Guide - HubSpot Blog

a full-height CSS sidebar example. To make this, use the following HTML and CSS:  <div class="sidebar"> <div>Menu Item 1</div>

How to cut off sidebar at the bottom of the content | BoldGrid

css({ 'max-height' : $('div.entry-content').outerHeight() + 'px' }); });. This code does a couple of things. It waits for your whole page ...

Tailwind CSS Sidebar - Flowbite

Use the sidebar component to show a list of menu items and multi-level dropdown items on either side of the page to navigate...