Navbar

Author: androettop

gatsby-browser.ts

@@ -1,7 +1,8 @@
 // custom typefaces
-import "@fontsource/jetbrains-mono"
+import "@fontsource/jetbrains-mono/400.css"
+import "@fontsource/jetbrains-mono/200.css"
 // normalize CSS across browsers
 import "./src/normalize.css"
-
+import "./src/global.css"
 // Highlighting for code blocks
 import "prismjs/themes/prism.css"

package-lock.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.2.5",
+    "classnames": "^2.5.1",
     "gatsby": "^5.14.1",
     "gatsby-plugin-feed": "^5.14.0",
     "gatsby-plugin-image": "^3.14.0",

package.json

@@ -0,0 +1,7 @@
+.wrapper {
+    background-color: var(--color-dark);
+    background-image: url('../../images/bg-light.svg'),  url('../../images/noise.jpg');
+    background-repeat: no-repeat, repeat;
+    background-position: top center, center center;
+    min-height: 100%;
+}

src/components/Layout/Layout.module.css

@@ -1,5 +1,7 @@
 import { Link } from "gatsby"
 import * as React from "react"
+import * as styles from "./Layout.module.css"
+import Navbar from "../Navbar/Navbar"
 
 interface LayoutProps {
   location: Location
@@ -10,25 +12,10 @@ interface LayoutProps {
 const Layout = ({ location, title, children }: LayoutProps) => {
   const rootPath = `/`
   const isRootPath = location.pathname === rootPath
-  let header
-
-  if (isRootPath) {
-    header = (
-      <h1 className="main-heading">
-        <Link to="/">{title}</Link>
-      </h1>
-    )
-  } else {
-    header = (
-      <Link className="header-link-home" to="/">
-        home
-      </Link>
-    )
-  }
 
   return (
-    <div className="global-wrapper" data-is-root-path={isRootPath}>
-      <header className="global-header">{header}</header>
+    <div className={styles.wrapper} data-is-root-path={isRootPath}>
+      <Navbar location={location} />
       <main>{children}</main>
     </div>
   )

src/components/Layout/Layout.tsx

@@ -0,0 +1,31 @@
+.navbar {
+  width: 100%;
+}
+
+.navbar ul {
+  margin: 0;
+  padding: 28px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 80px;
+}
+
+.navbar li {
+  list-style: none;
+  display: block;
+}
+
+.navbar li a {
+  text-decoration: none;
+  color: white;
+  font-size: 18px;
+  font-weight: 200;
+}
+
+.navbar li a.active {
+  text-decoration: underline;
+  text-decoration-color: var(--color-primary);
+  text-underline-offset: 3px;
+}
+

src/components/Navbar/Navbar.module.css

@@ -0,0 +1,40 @@
+import * as React from "react"
+import * as styles from "./Navbar.module.css"
+import { Link } from "gatsby"
+import classNames from "classnames";
+
+interface NavbarProps {
+  location: Location
+}
+
+const items = [{
+  name: "Home",
+  link: "/"
+}, {
+  name: "Experience",
+  link: "#experience"
+}, {
+  name: "Blog",
+  link: "/blog"
+}, {
+  name: "Projects",
+  link: "#projects"
+}];
+
+const Navbar = ({ location }: NavbarProps) => {
+  return (
+    <nav className={styles.navbar}>
+      <ul>
+        {items.map(item => (
+          <li key={item.name}>
+            <Link to={item.link} className={classNames({
+              [styles.active]: item.link.startsWith("/") && location.pathname === item.link
+            })}>{item.name}</Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export default Navbar

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,23 @@
+html,
+body,
+#___gatsby,
+#gatsby-focus-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+:root {
+  --color-white: #fff;
+  --color-dark: #17131b;
+  --color-light: #c2bcc9;
+  --color-primary: #a652da;
+  --color-secondary: #4c3c60;
+}
+
+body {
+  font-family: "JetBrains Mono", monospace;
+  color: white;
+}

src/global.css

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const classes: { [key: string]: string };
+    export = classes;
+}