semantic-ui-react#Sidebar JavaScript Examples
The following examples show how to use
semantic-ui-react#Sidebar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: App.js From react-fluid-table with MIT License | 6 votes |
|
Page = styled(Sidebar.Pusher)`
width: calc(100% - 260px);
height: 100%;
&&& {
overflow-y: auto;
}
@media screen and (max-width: 768px) {
width: 100%;
transform: translate3d(0, 0, 0) !important;
}
`
Example #2
| Source File: GridResponsiveSidebarColumn.js From react-invenio-forms with MIT License | 5 votes |
|
render() {
const closeSidebarBtnRef = React.createRef();
const {
mobile,
tablet,
computer,
widescreen,
largeScreen,
width,
open,
onHideClick,
children,
} = this.props;
return (
<>
<Grid.Column mobile={mobile} tablet={tablet} width={width} only="mobile tablet">
<Sidebar
as={Segment}
animation="overlay"
visible={open}
width="wide"
onHide={onHideClick}
onShow={() => closeSidebarBtnRef.current.focus()}
>
<Button
basic
icon="close"
size="small"
floated="right"
onClick={onHideClick}
aria-label="Close filter"
ref={closeSidebarBtnRef}
className="mb-20"
/>
{children}
</Sidebar>
</Grid.Column>
<Grid.Column
width={width}
only="computer"
computer={computer}
largeScreen={largeScreen}
widescreen={widescreen}
>
{children}
</Grid.Column>
</>
);
}
Example #3
| Source File: App.js From react-fluid-table with MIT License | 5 votes |
|
Application = styled(Sidebar.Pushable)`
border: none;
overflow: hidden;
`
Example #4
| Source File: SideBar.jsx From HACC-Hui with MIT License | 4 votes |
|
render() {
let isCompliant = HACCHui.canCreateTeams;
const isAdmin = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.ADMIN);
const isParticipant = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.PARTICIPANT);
if (isParticipant) {
const participant = Participants.findDoc({ userID: Meteor.userId() });
isCompliant = isCompliant && participant.isCompliant;
}
const numParticipants = Participants.count();
const numTeams = Teams.find({ open: true }).count();
const teamCount = Teams.count();
const suggestionCount = Suggestions.count();
const minors = MinorParticipants.find({}).fetch();
const uncompliantMinors = _.filter(minors, (m) => Participants.findDoc(m.participantID).isCompliant).length;
const setVisible = (state) => {
this.setState({ visible: state });
};
return (
<div>
<Menu borderless inverted fixed={'top'} className={'mobileBar'}>
<Menu.Item position={'left'}>
<div onClick={() => setVisible(!this.state.visible)} style={{ padding: '5px' }}>
<Icon name='bars'/>
</div>
</Menu.Item>
</Menu>
<Sidebar.Pushable as={Segment} className={'sideBar'}>
<Sidebar
style={{ paddingTop: '4rem', backgroundColor: 'rgb(18, 72, 132)' }}
as={Menu}
animation='overlay'
icon='labeled'
inverted
vertical
onHide={() => setVisible(false)}
visible={this.state.visible}
width='thin'
>
<Menu.Item as={NavLink} activeClassName="" exact to={ROUTES.LANDING}
onClick={() => setVisible(!this.state.visible)}>
<Header inverted as='h1'>HACC-Hui</Header>
</Menu.Item>
{isParticipant ? (
[
<Menu.Item as={NavLink}
activeClassName="active"
disabled={!isCompliant}
exact
to={ROUTES.CREATE_TEAM}
key='team-creation'>Create a Team</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.YOUR_PROFILE}
key='edit-profile'>Your Profile</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.BEST_FIT}
key='list-teams'>List the Teams ({numTeams})</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
disabled={!isCompliant}
exact
to={ROUTES.YOUR_TEAMS}
key='your-teams'>Your
Teams</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact to={ROUTES.LIST_PARTICIPANTS}
key='list-participants'>List the Participants ({numParticipants})</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.SUGGEST_TOOL_SKILL}
key='suggest-tool-skill'>Suggest Tool/Skill</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.TEAM_INVITATIONS}
key='team-invitations'>Your Invitations</Menu.Item>,
]
) : ''}
{isAdmin ? (
[
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.CONFIGURE_HACC}
key={ROUTES.CONFIGURE_HACC}>Configure HACC</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.UPDATE_MP}
key={ROUTES.UPDATE_MP}>
Update Minor Participants Status ({uncompliantMinors})
</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.LIST_SUGGESTIONS}
key={ROUTES.LIST_SUGGESTIONS}>Suggestions List ({suggestionCount})</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.VIEW_TEAMS}
key={ROUTES.VIEW_TEAMS}>View Team ({teamCount})</Menu.Item>,
<Menu.Item as={NavLink}
activeClassName="active"
exact
to={ROUTES.DUMP_DATABASE}
key={ROUTES.DUMP_DATABASE}>Dump Database</Menu.Item>,
]
) : ''}
<Menu.Item>
{this.props.currentUser === '' ? (
<Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_IN}
key={ROUTES.SIGN_IN}
onClick={() => setVisible(!this.state.visible)}>Sign In</Menu.Item>
) : (
[<Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SIGN_OUT}
key={ROUTES.SIGN_OUT}
onClick={() => setVisible(!this.state.visible)}>Sign Out</Menu.Item>,
<Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.DELETE_ACCOUNT}
key={ROUTES.DELETE_ACCOUNT}
onClick={() => setVisible(!this.state.visible)}>Delete Account</Menu.Item>,
]
)}
</Menu.Item>
</Sidebar>
<Sidebar.Pusher style={{ paddingTop: '5rem' }}>
{this.props.children}
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
);
}
Example #5
| Source File: App.js From react-fluid-table with MIT License | 4 votes |
|
App = () => {
const [mobile, setIsMobile] = useState(window.innerWidth <= 768);
const onResize = useCallback(() => {
setIsMobile(window.innerWidth <= 768);
const elem = document.getElementById("pusher");
const side = document.getElementById("sidebar");
if (!elem || !side) {
return;
}
if (window.innerWidth > 768) {
side.style.overflow = "";
elem.style.overflow = "";
}
}, []);
useEffect(() => {
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, [onResize]);
return (
<Router>
<Application>
<Navigation>
<MobileMenu vertical inverted>
<LinkContainer />
</MobileMenu>
</Navigation>
<Sidebar vertical inverted id="sidebar" as={Menu} visible={!mobile}>
<LinkContainer />
</Sidebar>
<Page id="pusher">
<Switch>
<Route exact path="/">
<Title title="Basic Table" />
<Wrapper>
<Example1 />
</Wrapper>
<Snippet code={Example1Code} />
</Route>
<Route exact path="/sort">
<Title title="Sortable Table" />
<Wrapper>
<Example2 />
</Wrapper>
<Snippet code={Example2Code} />
</Route>
<Route exact path="/sub">
<Title title="Table with Subcomponent" />
<Wrapper>
<Example3 />
</Wrapper>
<Snippet code={Example3Code} />
</Route>
<Route exact path="/custom">
<Title title="Cell Content" />
<Wrapper>
<Example4 />
</Wrapper>
<Snippet code={Example4Code} />
</Route>
<Route exact path="/variable">
<Title title="Variable Row Size" />
<Wrapper>
<Example5 />
</Wrapper>
<Snippet code={Example5Code} />
</Route>
<Route exact path="/expanded">
<Title title="Expanded Row Height" />
<Wrapper>
<Example6 />
</Wrapper>
<Snippet code={Example6Code} />
</Route>
<Route exact path="/controlled">
<Title title="Controlled Props" />
<Wrapper>
<Example7 />
</Wrapper>
<Snippet code={Example7Code} />
</Route>
<Route exact path="/header">
<Title title="Custom Styling" />
<Wrapper>
<Example8 />
</Wrapper>
<Snippet code={Example8Code} />
</Route>
<Route exact path="/scroll">
<Title title="Methods" />
<Wrapper>
<Example9 />
</Wrapper>
<Snippet code={Example9Code} />
</Route>
<Route exact path="/props">
<Props />
</Route>
</Switch>
</Page>
</Application>
</Router>
);
}
Example #6
| Source File: App.js From app-personium-trails with Apache License 2.0 | 4 votes |
|
export default function App() {
const [sidebarOpened, setSidebarOpended] = useState(false);
const handleSidebarHide = useCallback(() => {
setSidebarOpended(false);
});
const handleToggle = useCallback(() => {
setSidebarOpended(c => !c);
});
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const todayLocation = useMemo(() => {
const loc = `/locations/${year}-${('0' + month).slice(-2)}-${(
'0' + day
).slice(-2)}`;
console.log('todayLocation', loc);
return loc;
}, [month, year, day]);
return (
<>
<Sidebar.Pushable as={Segment} style={{ height: '100vh' }}>
<Sidebar
as={Menu}
animation="push"
inverted
onHide={handleSidebarHide}
vertical
visible={sidebarOpened}
>
<Menu.Item as={Link} to="/" name="Top" onClick={handleSidebarHide} />
<Menu.Item
as={Link}
to="/locations"
name="Locations"
onClick={handleSidebarHide}
/>
<Menu.Item
as={Link}
to="/import"
name="Import"
onClick={handleSidebarHide}
/>
</Sidebar>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign="center"
style={{ minHeight: 30, padding: '0.5em 0em', marginBottom: 8 }}
vertical
>
<Menu inverted pointing secondary size="large">
<Container>
<Menu.Item onClick={handleToggle}>
<Icon name="sidebar" />
</Menu.Item>
</Container>
</Menu>
</Segment>
<Container>
<Switch>
<Redirect exact from="/locations" to={todayLocation} />
<Route path="/" exact>
<TopPage />
</Route>
<Route path="/locations/:year(\d+)-:month(\d+)-:day(\d+)">
<Suspense fallback={<h1>loading</h1>}>
<LocationPage />
</Suspense>
</Route>
<Route path="/detail/:__id" component={DetailPage} />
<Route path="/about" exact>
<h1>About Personium Trails</h1>
</Route>
<Route path="/profile" exact>
<ProfilePage />
</Route>
<Route path="/import" exact>
<ImportPage />
</Route>
</Switch>
</Container>
</Sidebar.Pusher>
</Sidebar.Pushable>
</>
);
}
