Add in fixes for navbar on mobile plus toggle switch
This commit is contained in:
Nick Bland
parent
e70001f0cd
commit
50a30a8a34
@ -19,6 +19,7 @@ stages:
|
||||
- docker --version
|
||||
- docker login -u "$CI_REGISTRY_USER" -p "$CI_JOB_TOKEN" "$CI_REGISTRY/$CI_PROJECT_PATH"
|
||||
|
||||
# Create initial test cases below
|
||||
build:builder:
|
||||
extends: .base
|
||||
stage: build
|
||||
@ -26,6 +27,14 @@ build:builder:
|
||||
- docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --target dependancies -t "$IMAGE_DEPENDANCY" .
|
||||
- docker push "$IMAGE_DEPENDANCY"
|
||||
|
||||
build:sourceCode:
|
||||
extends: .base
|
||||
stage: build
|
||||
script:
|
||||
- docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --cache-from "$IMAGE_BUILD" --target builder -t "$IMAGE_BUILD" .
|
||||
- docker push "$IMAGE_DEPENDANCY"
|
||||
|
||||
## ADD TEST CASES BELOW ##
|
||||
test:linter:
|
||||
extends: .base
|
||||
stage: test
|
||||
@ -33,10 +42,11 @@ test:linter:
|
||||
script:
|
||||
- docker run "$IMAGE_BUILD" npm run lint
|
||||
|
||||
# Create final minified image of production code
|
||||
deploy:
|
||||
extends: .base
|
||||
stage: deploy
|
||||
needs: ["test:linter"]
|
||||
script:
|
||||
- docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --cache-from "$IMAGE_DEPLOY" --cache-from "$IMAGE_BUILD" -t "$IMAGE_DEPLOY" .
|
||||
- docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --cache-from "$IMAGE_BUILD" -t "$IMAGE_DEPLOY" .
|
||||
- docker push "$IMAGE_FINAL"
|
||||
@ -1,25 +1,60 @@
|
||||
import React, {Fragment, ReactNode, useState} from "react";
|
||||
import {useTheme} from "next-themes";
|
||||
import {Disclosure, Menu, Transition} from "@headlessui/react";
|
||||
import {XIcon, MenuIcon, BellIcon} from "@heroicons/react/outline"
|
||||
import {Disclosure, Switch, Transition} from "@headlessui/react";
|
||||
import {XIcon, MenuIcon} from "@heroicons/react/outline"
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const places = [
|
||||
{name: "Home", href: "#", current: "true"},
|
||||
{name: "About", href: "/about", current: "false"},
|
||||
];
|
||||
const ThemeSwitch = () => {
|
||||
const {theme, setTheme} = useTheme();
|
||||
const [enabled, setEnabled] = useState(true)
|
||||
|
||||
// Combine classNames together to form a single string based on whether it is selected or not. See comment below
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(" ")
|
||||
if(enabled) {
|
||||
setTheme("dark")
|
||||
} else {
|
||||
setTheme("light")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center space-x-2 mx-auto relative">
|
||||
{/* <span className="text-lg font-extralight dark:text-black text-white">Light </span>
|
||||
<div>
|
||||
<input type="checkbox" name="" id="checkbox" className="hidden" />
|
||||
<label htmlFor="checkbox" className="cursor-pointer">
|
||||
<div className="w-9 h-5 flex items-center bg-gray-400 rounded-full p2">
|
||||
<div className="w-4 h-4 bg-white rounded-full shadow"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<span className="text-lg font-semibold dark:text-black text-white">Dark</span> */}
|
||||
<Switch.Group>
|
||||
<div className="flex items-center">
|
||||
<Switch.Label className="mr-3 dark:text-black text-white">Dark Mode</Switch.Label>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className={`${
|
||||
enabled ? 'bg-gray-200' : 'bg-gray-600'
|
||||
} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:bg-black focus:bg-white`}
|
||||
>
|
||||
<span
|
||||
className={`${
|
||||
enabled ? 'translate-x-6' : 'translate-x-1'
|
||||
} inline-block w-4 h-4 transform bg-white rounded-full transition-transform`}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</Switch.Group>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
|
||||
@ -34,26 +69,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<header>
|
||||
{/* <nav>
|
||||
<Link href="/">
|
||||
<a>nickbland.dev</a>
|
||||
</Link>
|
||||
<Link href="/about">
|
||||
<a>about</a>
|
||||
</Link>
|
||||
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle Theme</button>
|
||||
</nav>
|
||||
<Image
|
||||
className="block lg:hidden h-8 w-auto"
|
||||
src="/logo-white.svg"
|
||||
alt="Workflow"
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
|
||||
*/}
|
||||
|
||||
<nav className="dark:bg-white bg-black">
|
||||
<Disclosure as="nav" className="dark:bg-white bg-black">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
@ -77,8 +93,11 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
<Link href="/"><a className="dark:text-black">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-black">Home 2</a></Link>
|
||||
<Link href="/"><a className="dark:text-black text-white">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-black text-white">Home 2</a></Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
|
||||
<ThemeSwitch></ThemeSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,13 +130,14 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
|
||||
>
|
||||
<div id="mobile-menu">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<Link href="/"><a className="dark:text-white">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-white">Home 2</a></Link>
|
||||
<Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
|
||||
<Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home 2</a></Link>
|
||||
<ThemeSwitch></ThemeSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</Transition>
|
||||
</nav>
|
||||
</Disclosure>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import type {NextPage} from 'next';
|
||||
import NavBar from "../components/navbar";
|
||||
import {useTheme} from "next-themes";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const {theme, setTheme} = useTheme();
|
||||
return (
|
||||
<div className="">
|
||||
<NavBar title="Home | nickbland.dev"></NavBar>
|
||||
|
||||
<main className="">
|
||||
<h1>Test Comment</h1>
|
||||
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle Theme</button>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user