Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

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>
)
......
Markdown is supported
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