Add in fixes for navbar on mobile plus toggle switch

.gitlab-ci.yml

@@ -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"

components/navbar.tsx

@@ -1,25 +1,60 @@
 import React, {Fragment, ReactNode, useState} from "react";
 import {useTheme} from "next-themes";
-import {Disclosure, Menu, Transition} from "@headlessui/react";
+import {Disclosure, Switch, Transition} from "@headlessui/react";
-import {XIcon, MenuIcon, BellIcon} from "@heroicons/react/outline"
+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 = [
+const ThemeSwitch = () => {
-    {name: "Home", href: "#", current: "true"},
+    const {theme, setTheme} = useTheme();
-    {name: "About", href: "/about", current: "false"},
+    const [enabled, setEnabled] = useState(true)
-];
 
-// Combine classNames together to form a single string based on whether it is selected or not. See comment below
+    if(enabled) {
-function classNames(...classes: string[]) {
+        setTheme("dark")
-    return classes.filter(Boolean).join(" ")
+    } 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>
+                <Disclosure as="nav" className="dark:bg-white bg-black">
-                    <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">
                     <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 text-white">Home</a></Link>
-                                        <Link href="/"><a className="dark:text-black">Home 2</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-black text-white px-3 py-2 rounded-md text-sm font-medium block">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 2</a></Link>
+                                <ThemeSwitch></ThemeSwitch>
                             </div>
                         </div>
                     </Transition.Child>
                     </Transition>
-                </nav>
+                </Disclosure>
 
 
             </header>

pages/index.tsx

@@ -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>
   )