Commit bce74cb1 authored by Seth A Johnson's avatar Seth A Johnson
Browse files

Added a responsive Navbar component

(expect for the logo, which needs some css attention)
parent 40073dba
.terrible-img-container {
/* I don't know what I'm doing help */
min-width: 100px;
min-height: 100px;
position: absolute;
}
import React from "react"
import "./bootstrap.min.css"
import "./layout.css"
import Navbar from "./navbar"
const Layout = ({ children }) => {
return (
<>
<Navbar />
{children}
</>
)
......
import React, {useState} from "react"
import {Link} from "gatsby"
import Img from 'gatsby-image'
import {useStaticQuery,graphql} from 'gatsby'
export const getLogo = graphql`
{
logo:file(relativePath:{eq: "LEVERPRESS-SIDEWAYS-no-icon.png"}) {
childImageSharp{
fluid(maxWidth: 700){
...GatsbyImageSharpFluid
}
}
}
}
`
const Navbar = () => {
const [isOpen, setNav] = (useState(false))
const toggleNav = () => {
setNav(isOpen => !isOpen)
}
const data = useStaticQuery(getLogo)
console.log(data)
return (
<nav className="navbar navbar-expand-sm bg-light navbar-light">
<Link to="/" className="navbar-brand">
<span className="terrible-img-container">
<Img fluid={data.logo.childImageSharp.fluid} />
</span>
</Link>
<button className="navbar-toggler" type="button" onClick={toggleNav}>
<span className="navbar-toggler-icon" />
</button>
<div className={
isOpen
? "collapse navbar-collapse show"
: "collapse navbar-collapse"
}
>
<ul className="navbar-nav mx-auto">
<li className="nav-item">
<Link to="/about" className="nav-link">
About
</Link>
</li>
<li>
<a href="https://www.fulcrum.org/leverpress" className="nav-link">
Catalog
</a>
</li>
<li>
<Link to="/info" className="nav-link">
Info
</Link>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Title from "../components/title"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Home</h1>
<Link to="/about">about</Link>
<br />
<Link to="/about">about</Link>
<Title title="Home" />
</Layout>
)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment