192 lines
8.4 KiB
Python
192 lines
8.4 KiB
Python
import React, { Fragment, useContext } from 'react';
|
|
import { Button, Card, CardBody, Media } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
|
import vibrantImg from '../../assets/img/generic/vibrant.png';
|
|
// import card from '../../assets/img/generic/card.png';
|
|
// import vibrant from '../../assets/img/generic/vibrant.png';
|
|
import PageHeader from '../common/PageHeader';
|
|
import FalconCardHeader from '../common/FalconCardHeader';
|
|
import CodeHighlight from '../common/CodeHighlight';
|
|
import AppContext from '../../context/Context';
|
|
|
|
const SpinnersExample = () => {
|
|
const { setNavbarStyle } = useContext(AppContext);
|
|
return (
|
|
<Fragment>
|
|
<PageHeader
|
|
title="Vertical Navbar"
|
|
description="Here is the available built-in option of Falcon's powerful, responsive vertical navigation. The following sections describe how you can customize both the responsive breakpoint and collapsing behavior."
|
|
className="mb-3"
|
|
/>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Responsive behavior" light={false} />
|
|
<CardBody className="bg-light">
|
|
Falcon used the reactstrap's <code>expand</code> property in <code>Navbar</code> component to decide when the
|
|
navbar vertical will expand or not.
|
|
<CodeHighlight
|
|
language="html"
|
|
code={`
|
|
<Navbar color="light" light expand="md">
|
|
// content
|
|
</Navbar>`}
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="Collapsing behavior" light={false} />
|
|
<CardBody className="bg-light">
|
|
You can control the default collapsing behavior of Falcon's vertical navigation - whether it will show up with
|
|
the collapsed or expanded state when the page loads. From your project directory,{' '}
|
|
<code>src/context/Context.js</code> and set initial navbar collapse state like{' '}
|
|
<code>isNavbarVerticalCollapsed: false</code> into <code>AppContext</code> then go to <code>src/Main.js</code>{' '}
|
|
for set the value to the AppContext provider
|
|
<CodeHighlight
|
|
language="jsx"
|
|
code={` const [isNavbarVerticalCollapsed, setIsNavbarVerticalCollapsed] = useState(getItemFromStore('isNavbarVerticalCollapsed', false));
|
|
|
|
useEffect(() => {
|
|
setItemToStore('isNavbarVerticalCollapsed', isNavbarVerticalCollapsed);
|
|
// eslint-disable-next-line
|
|
}, [isNavbarVerticalCollapsed]);
|
|
|
|
`}
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<hr className="my-4" />
|
|
<PageHeader
|
|
title="Navbar Styles"
|
|
description="You can change the look of your Navbar Vertical in different styles. You can also customize your navbar vertical using SCSS variables. One of the navbar style example <code>vibrant</code> given below:"
|
|
className="mb-3"
|
|
/>
|
|
<Card className="mb-3 mt-4">
|
|
<CardBody>
|
|
<Media>
|
|
<Media middle href="#">
|
|
<img src={vibrantImg} alt="" className="mr-3 border border-2x rounded-soft bg-200" width="100" />
|
|
</Media>
|
|
<Media body>
|
|
<Media heading className="mb-0 contains-anchor">
|
|
Navbar Vertical vibrant
|
|
</Media>
|
|
<p className="mb-1">
|
|
You can update your Navbar Vertical <code>background-color</code> with Navbar Vertical vibrant.
|
|
</p>
|
|
<Button
|
|
tag="a"
|
|
href="#!"
|
|
// target="_blank"
|
|
color="link"
|
|
size="sm"
|
|
className="pl-0"
|
|
onClick={() =>
|
|
setNavbarStyle(pre => {
|
|
if (pre === 'vibrant') {
|
|
return 'transparent';
|
|
} else {
|
|
return 'vibrant';
|
|
}
|
|
})
|
|
}
|
|
>
|
|
See The implementation here
|
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
|
</Button>
|
|
</Media>
|
|
</Media>
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="JSX" light={false} />
|
|
<CardBody className="bg-light">
|
|
Use <code>navbarStyle</code> prop to <code>NavbarVertical</code> component to change the navbar style.
|
|
Example:
|
|
<CodeHighlight language="jsx" code={`<NavbarVertical navbarStyle='vibrant' />`} />
|
|
</CardBody>
|
|
</Card>
|
|
<Card className="mb-3">
|
|
<FalconCardHeader title="SCSS" light={false} />
|
|
<CardBody className="bg-light">
|
|
Falcon allow you to customize your Navbar vibrant with SCSS variables. The available options are listed below:
|
|
<h6 className="mt-3 fs-0">Background</h6>
|
|
<p>
|
|
To change the background only for the Navbar vibrant, add the inline CSS style to <code>Collapse</code> tag
|
|
in <code>NavbarVertical.js</code> file.
|
|
</p>
|
|
<CodeHighlight
|
|
language="jsx"
|
|
code={`<Collapse
|
|
navbar
|
|
style={
|
|
navbarStyle === 'vibrant' && {
|
|
backgroundImage: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2),url(${'bgNavbarImg'})
|
|
}
|
|
}
|
|
>`}
|
|
/>
|
|
<p className="my-3">
|
|
For other navbar style add the SCSS variables <code>$navbar-inverted-bg, navbar-card-bg</code> in your
|
|
<code>_user-variables.scss</code>. You can update both overlay color using this variable. Example:
|
|
</p>
|
|
<CodeHighlight
|
|
language="scss"
|
|
code={`$navbar-inverted-bg: $gray-1000;
|
|
$navbar-card-bg: $gray-1000`}
|
|
/>
|
|
<h6 className="mt-5 fs-0">Navbar card shadow</h6>
|
|
<p>
|
|
To change the shadow of the Navbar Card, add the SCSS variable <code>$navbar-card-shadow</code> in your
|
|
<code> _user-variables.scss.</code>. Example:
|
|
</p>
|
|
<CodeHighlight
|
|
language="
|
|
scss"
|
|
code="$navbar-card-shadow: $box-shadow;"
|
|
/>
|
|
<h6 className="mt-5 fs-0">Link color</h6>
|
|
<p>
|
|
To change the color of the Navbar Vibrant links, add the SCSS variable{' '}
|
|
<code>$navbar-vibrant-link-color</code> in your
|
|
<code> _user-variables.scss.</code>. Example:
|
|
</p>
|
|
<CodeHighlight language="scss" code="$navbar-vibrant-link-color: $gray-500;" />
|
|
<h6 className="mt-5 fs-0">Link hover color</h6>
|
|
<p>
|
|
To change the hover color of the Navbar Vibrant links, add the SCSS vairable{' '}
|
|
<code>$navbar-vibrant-link-hover-color</code> in your
|
|
<code>_user-variables.scss</code>. Example:
|
|
</p>
|
|
<CodeHighlight language="scss" code="$navbar-vibrant-link-hover-color: $gray-200;" />
|
|
{/* Link active color */}
|
|
<h6 className="mt-5 fs-0">Link active color</h6>
|
|
<p>
|
|
To change the active color of the Navbar Vibrant links, add the SCSS vairable{' '}
|
|
<code>$navbar-vibrant-link-active-color</code> in your
|
|
<code>_user-variables.scss</code>. Example:
|
|
</p>
|
|
<CodeHighlight language="scss" code="$navbar-vibrant-link-active-color: $gray-200;" />
|
|
<h6 className="mt-5 fs-0">Navbar vibrant divider</h6>
|
|
<p>
|
|
To change the divider color, add the SCSS vairable <code>$navbar-vibrant-hr-color</code> in your
|
|
<code>_user-variables.scss</code>. Example:
|
|
</p>
|
|
<CodeHighlight language="scss" code="$navbar-vibrant-hr-color: rgba($white, 0.2);" />
|
|
<h6 className="mt-5 fs-0">Navbar vibrant scrollbar color</h6>
|
|
<p>
|
|
To change the scrollbar color, add the SCSS vairable <code>$navbar-vibrant-scrollbar-color</code> in your
|
|
<code>_user-variables.scss</code>. Example:
|
|
</p>
|
|
<CodeHighlight language="scss" code="$navbar-vibrant-scrollbar-color: $gray-400;" />
|
|
<p className="mt-4 font-weight-bold">
|
|
For the <code>inverted</code> and <code>card</code> variation, please follow the same procedure.
|
|
</p>
|
|
</CardBody>
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default SpinnersExample;
|