Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BS4 => Pure CSS Navigation Bar. #681

Merged
merged 4 commits into from
Mar 25, 2020
Merged

BS4 => Pure CSS Navigation Bar. #681

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5c784d1
Removed the dependency of bootstrap from navigation with Cutom CSS
abhushanaj Mar 25, 2020
a377300
Deep Scan Fix on unused variable
abhushanaj Mar 25, 2020
9996806
Merge branch 'develop' into navbar_bs_removal
divyanshu-rawat Mar 25, 2020
1ec8398
Minor updates 🙌🏻
divyanshu-rawat Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 39 additions & 56 deletions ...hared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,70 @@ import logo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogo
import blackLogo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogo.svg';
import '../Styles/style.scss';

const handleSmallerScreen = () => {
const navlinks = document.querySelector('.navlinks');
const lines = document.querySelectorAll('.line');
lines.forEach(line => {
line.classList.toggle('mobile');
});
navlinks.classList.toggle('mobile');
}

const PureNavigation = ({ displayClass, dynamicLogo }) => (
<nav className={`navbar navbar-expand-lg ${displayClass}`}>
<nav className={`navbar ${displayClass}`}>
<HashLink className="navbar-brand" to="/#">
<img src={dynamicLogo} width="40" height="40" alt="logo" />
</HashLink>
<button
className="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span />
<span />
<span />
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="nav navbar-nav">
<li className="nav-item active">
<HashLink smooth to="/#">
<span className="nav-link">
Home
{' '}
<span className="sr-only">(current)</span>
</span>
</HashLink>

<ul className='navlinks'>
<li className="navlinks-item active">
<HashLink smooth to='/#' className='navlink'>Home</HashLink>
</li>
<li className="nav-item">
<HashLink smooth to="/#what-we-do">
<span className="nav-link">What we provide?</span>
</HashLink>

<li className='navlinks-item'>
<HashLink smooth to='/#what-we-do' className='navlink'>What we provide?</HashLink>
</li>
<li className="nav-item">
<HashLink smooth to="/#contributors">
<span className="nav-link">Contributors</span>
</HashLink>

<li className='navlinks-item'>
<HashLink smooth to='/#contributors' className='navlink'>Contributors</HashLink>
</li>
<li className="nav-item">
<Link to="/aboutus">
<span className="nav-link" href="/aboutus">
About
</span>
</Link>

<li className='navlinks-item'>
<Link to='/aboutus' className='navlink'>About</Link>
</li>

<li className="nav-item">
<li className='navlinks-item'>
<a
className="nav-link"
rel="noopener noreferrer"
target="_blank"
href="https://bit.ly/2SaYXMO"
className='navlink'
rel='noopener noreferrer'
target='_blank'
href='https://bit.ly/2SaYXMO'
>
Join
</a>
</li>

<li className="nav-item">
<Link to="/Login">
<span className="nav-link" href="/Login">
Sign in
</span>
</Link>
<li className='navlinks-item'>
<Link to='/Login' className='navlink'>Sign in</Link>
</li>

<li className="nav-item">
<Link to="/Signup">
<span className="nav-link" href="/Signup">
Sign up
</span>
</Link>
<li className='navlinks-item'>
<Link to='/Signup' className='navlink'>Sign up</Link>
</li>
</ul>
</div>

<div id="burger" onClick={handleSmallerScreen}>
<span className="line mobile"></span>
<span className="line mobile"></span>
<span className="line mobile"></span>
</div>

</nav>
);


const Navigation = () => {

const [navScrolled, setNavScrolled] = useState(false);
const [displayClass, setDisplayClass] = useState('transparent');
const [dynamicLogo, setDynamicLogo] = useState(blackLogo);
Expand Down
Loading