Я новичок в semantic-ui-react и застрял, пытаясь реализовать этот макет.
Посмотрите на эту скрипку
Это самое близкое, чего я смог достичь. Два компонента имеют области с возможностью прокрутки (желательно), но моя основная проблема заключается в том, что боковая панель не остается фиксированной при прокрутке содержимого, а при прокрутке до нижней части боковой панели есть пробел под ним.
Любые идеи?
Вот соответствующий код компонента:
<div style={{paddingTop: '51px'}}>
<Menu size="massive" fixed="top" inverted borderless >
<Menu.Item header onClick={()=>{}}>
App Name and Logo
</Menu.Item>
<Menu.Item onClick={()=>{}}>
<Icon name="bars"/>
</Menu.Item>
<Menu.Menu position="right" style={{fontSize: '1rem'}}>
<Menu.Item onClick={()=>{}}><Icon name="sign in"/>log in</Menu.Item>
</Menu.Menu>
</Menu>
<div>
<Sidebar.Pushable as={Segment} >
<Sidebar as={Menu} borderless
animation='push' visible={true} vertical inverted>
<Menu.Item name='home' onClick={()=>{}}>
<Icon name='home'/>
<span>Home</span>
</Menu.Item>
<Menu.Item name='users' onClick={()=>{}}>
<Icon name='users'/>
<span>Users</span>
</Menu.Item>
<Menu.Item name='repos' onClick={()=>{}}>
<Icon name='fork' />
<span>Repositories</span>
</Menu.Item>
{sidebarArr}
</Sidebar>
<Sidebar.Pusher >
<Segment basic>
{contentArr}
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
</div>
ОБНОВЛЕНИЕ
Новая скрипка. Мне в основном удается добиться желаемого поведения; Я больше не использую компонент боковой панели и вместо этого использую простое меню. Моих начальных навыков CSS недостаточно, чтобы понять, как это сделать с боковой панелью.