Tomasz Owczarczyk
59
app/routes/components/Sidebar/SidebarBottomA.js
Executable file
59
app/routes/components/Sidebar/SidebarBottomA.js
Executable file
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Sidebar,
|
||||
UncontrolledPopover,
|
||||
PopoverBody
|
||||
} from './../../../components';
|
||||
|
||||
import { FooterAuth } from '../Pages/FooterAuth';
|
||||
import { FooterText } from '../FooterText';
|
||||
import { VersionSelector } from '../VersionSelector';
|
||||
|
||||
const SidebarBottomA = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Desktop */ }
|
||||
<Sidebar.HideSlim>
|
||||
<Sidebar.Section className="pb-0">
|
||||
<VersionSelector sidebar dashboard="Airframe" />
|
||||
</Sidebar.Section>
|
||||
<Sidebar.Section>
|
||||
<FooterAuth className="text-muted" />
|
||||
</Sidebar.Section>
|
||||
</Sidebar.HideSlim>
|
||||
{ /* END Desktop */ }
|
||||
|
||||
{ /* START Slim Only */ }
|
||||
<Sidebar.ShowSlim>
|
||||
<Sidebar.Section className="text-center">
|
||||
{ /* Slim Version Selector */ }
|
||||
<VersionSelector
|
||||
dashboard="Airframe"
|
||||
sidebar
|
||||
compact
|
||||
render={() => (
|
||||
<i className="fa fa-fw fa-toggle-on"></i>
|
||||
)}
|
||||
/>
|
||||
|
||||
{ /* Footer Text as Tooltip */ }
|
||||
<Button
|
||||
id="UncontrolledSidebarPopoverFooter"
|
||||
color="link"
|
||||
className="sidebar__link p-0 mt-3"
|
||||
>
|
||||
<i className="fa fa-fw fa-question-circle-o"></i>
|
||||
</Button>
|
||||
<UncontrolledPopover placement="left-end" target="UncontrolledSidebarPopoverFooter">
|
||||
<PopoverBody>
|
||||
<FooterText />
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</Sidebar.Section>
|
||||
</Sidebar.ShowSlim>
|
||||
{ /* END Slim Only */ }
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SidebarBottomA };
|
||||
117
app/routes/components/Sidebar/SidebarBottomB.js
Executable file
117
app/routes/components/Sidebar/SidebarBottomB.js
Executable file
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Sidebar,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownToggle,
|
||||
UncontrolledPopover,
|
||||
PopoverBody,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
|
||||
import { DropdownProfile } from '../Dropdowns/DropdownProfile';
|
||||
import { FooterAuth } from '../Pages/FooterAuth';
|
||||
import { FooterText } from '../FooterText';
|
||||
|
||||
const SidebarBottomB = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Sidebar BOTTOM: B */ }
|
||||
<Sidebar.Section>
|
||||
{ /* START DESKTOP View */ }
|
||||
<Sidebar.HideSlim>
|
||||
<UncontrolledButtonDropdown direction="up" className="mb-3">
|
||||
<DropdownToggle color="link" className="btn-profile text-left pl-0 pb-0">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="success"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<span className="mt-0 d-flex h6 mb-1 text-truncate">
|
||||
{ faker.name.firstName() } { faker.name.lastName() } <i className="fa fa-fw fa-angle-up ml-1"></i>
|
||||
</span>
|
||||
<p className="small text-truncate">
|
||||
{ faker.name.jobTitle() }
|
||||
</p>
|
||||
</Media>
|
||||
</Media>
|
||||
</DropdownToggle>
|
||||
<DropdownProfile />
|
||||
</UncontrolledButtonDropdown>
|
||||
</Sidebar.HideSlim>
|
||||
{ /* END DESKTOP View */ }
|
||||
{ /* START SLIM Only View */ }
|
||||
<Sidebar.ShowSlim>
|
||||
<div className="text-center">
|
||||
<UncontrolledButtonDropdown direction="right" className="mb-3">
|
||||
<DropdownToggle color="link" className="text-left pl-0 pb-0">
|
||||
<Avatar.Image
|
||||
size="sm"
|
||||
src={ randomAvatar() }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="success"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</DropdownToggle>
|
||||
<DropdownProfile />
|
||||
</UncontrolledButtonDropdown>
|
||||
</div>
|
||||
</Sidebar.ShowSlim>
|
||||
{ /* END SLIM Only View */ }
|
||||
{ /* START DESKTOP View */ }
|
||||
<Sidebar.HideSlim>
|
||||
<FooterAuth />
|
||||
</Sidebar.HideSlim>
|
||||
{ /* END DESKTOP View */ }
|
||||
{ /* START SLIM Only View */ }
|
||||
<Sidebar.ShowSlim>
|
||||
<div className="text-center">
|
||||
<Button
|
||||
color="link"
|
||||
id="UncontrolledSidebarPopoverFooter"
|
||||
className="sidebar__link p-0"
|
||||
>
|
||||
<i className="fa fa-fw fa-question-circle-o" />
|
||||
</Button>
|
||||
<UncontrolledPopover placement="left-end" target="UncontrolledSidebarPopoverFooter">
|
||||
<PopoverBody>
|
||||
<FooterText />
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</div>
|
||||
</Sidebar.ShowSlim>
|
||||
{ /* END SLIM Only View */ }
|
||||
</Sidebar.Section>
|
||||
{ /* END Sidebar BOTTOM: B */ }
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SidebarBottomB };
|
||||
102
app/routes/components/Sidebar/SidebarTopA.js
Executable file
102
app/routes/components/Sidebar/SidebarTopA.js
Executable file
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
UncontrolledButtonDropdown,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
|
||||
const avatarImg = randomAvatar();
|
||||
|
||||
const SidebarTopA = () => (
|
||||
<React.Fragment>
|
||||
{ /* START: Sidebar Default */ }
|
||||
<Sidebar.HideSlim>
|
||||
<Sidebar.Section className="pt-0">
|
||||
<Link to="/" className="d-block">
|
||||
<Sidebar.HideSlim>
|
||||
<Avatar.Image
|
||||
size="lg"
|
||||
src={ avatarImg }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="success"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Sidebar.HideSlim>
|
||||
</Link>
|
||||
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle color="link" className="pl-0 pb-0 btn-profile sidebar__link">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
<i className="fa fa-angle-down ml-2"></i>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem tag={ Link } to="/apps/profile-details">
|
||||
My Profile
|
||||
</DropdownItem>
|
||||
<DropdownItem tag={ Link } to="/apps/settings-edit">
|
||||
Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem tag={ Link } to="/apps/billing-edit">
|
||||
Billings
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem tag={ Link } to="/pages/login">
|
||||
<i className="fa fa-fw fa-sign-out mr-2"></i>
|
||||
Sign Out
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
<div className="small sidebar__link--muted">
|
||||
{ faker.name.jobTitle() }
|
||||
</div>
|
||||
</Sidebar.Section>
|
||||
</Sidebar.HideSlim>
|
||||
{ /* END: Sidebar Default */ }
|
||||
|
||||
{ /* START: Sidebar Slim */ }
|
||||
<Sidebar.ShowSlim>
|
||||
<Sidebar.Section>
|
||||
<Avatar.Image
|
||||
size="sm"
|
||||
src={ avatarImg }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="success"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Sidebar.Section>
|
||||
</Sidebar.ShowSlim>
|
||||
{ /* END: Sidebar Slim */ }
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SidebarTopA };
|
||||
62
app/routes/components/Sidebar/SidebarTopB.js
Executable file
62
app/routes/components/Sidebar/SidebarTopB.js
Executable file
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
UncontrolledTooltip
|
||||
} from './../../../components';
|
||||
|
||||
import { VersionSelector } from '../VersionSelector';
|
||||
|
||||
const SidebarTopB = () => (
|
||||
<React.Fragment>
|
||||
{ /* START Sidebar TOP: B */ }
|
||||
{ /* START DESKTOP View */ }
|
||||
<Sidebar.HideSlim>
|
||||
<div>
|
||||
<div className="d-flex">
|
||||
<Link to="/" className="align-self-center sidebar__brand" id="tooltipBackToHome">
|
||||
<i className="fa fa-send fa-fw fa-2x"></i>
|
||||
</Link>
|
||||
<UncontrolledTooltip placement="right" target="tooltipBackToHome">
|
||||
Back to Home
|
||||
</UncontrolledTooltip>
|
||||
|
||||
<VersionSelector
|
||||
down
|
||||
sidebar
|
||||
dashboard="Airframe"
|
||||
render={(currentVersion) => (
|
||||
<React.Fragment>
|
||||
<div className="h4 fw-600 sidebar-logo mb-1 text-left">
|
||||
react.bs4 <i className="fa fa-angle-down ml-1 sidebar__link--muted"></i>
|
||||
</div>
|
||||
<div
|
||||
className="job-title small text-left sidebar__link--muted"
|
||||
>
|
||||
Version: {currentVersion.label}, {currentVersion.version}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar.HideSlim>
|
||||
{ /* END DESKTOP View */ }
|
||||
{ /* START SLIM Only View */ }
|
||||
<Sidebar.ShowSlim>
|
||||
<div className="text-center">
|
||||
<Link to="/">
|
||||
<i className="fa fa-send fa-fw text-primary" id="tooltipBackToHomeSlim"></i>
|
||||
</Link>
|
||||
<UncontrolledTooltip placement="right" target="tooltipBackToHomeSlim">
|
||||
Back to Home
|
||||
</UncontrolledTooltip>
|
||||
</div>
|
||||
</Sidebar.ShowSlim>
|
||||
{ /* END SLIM Only View */ }
|
||||
{ /* END Sidebar TOP: B */ }
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export { SidebarTopB };
|
||||
Reference in New Issue
Block a user