innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple style changes

Browse Source
This commit is contained in:
Mikayla Dobson
2023-06-16 17:35:07 -05:00
parent 5c8c5645c0
commit 22738d083c
8 changed files with 163 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/Navbar/index.tsx
View File

@@ -2,6 +2,8 @@ import Link from 'next/link'
import { InlineLogo, useColorShift } from '../logo'
import { useEffect, useState } from 'react';
import { UseColorShiftReturnType } from '../logo/useColorShift';
import { FaTrash } from "react-icons/fa";
import { RxActivityLog } from "react-icons/rx";
interface HoverState {
about: boolean
@@ -25,6 +27,7 @@ export default function Navbar() {
projects: false,
contact: false,
})
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
function mouseOver(source: keyof HoverState) {
const { colorKeys, actualColorReferences, activeIndex } = identifyActiveButton();
@@ -73,22 +76,46 @@ export default function Navbar() {
}, [shift])
return (
<div id="navbar" className="w-full h-auto flex flex-nowrap items-center justify-between px-8 py-4 bg-black text-white">
<Link href="/">
<>
<div id="navbar" className="w-full h-auto fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 bg-black text-white">
<Link href="/" className="w-1/4">
<InlineLogo customHookInstance={navbarColorShift} />
</Link>
<Link href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p>
<div className="hidden md:inline-flex justify-end w-3/4">
<Link href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`ml-2 ${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p>
</Link>
<Link href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`ml-2 ${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p>
</Link>
<Link href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`ml-2 ${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p>
</Link>
</div>
<div className="inline-flex md:hidden justify-end w-3/4">
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
<RxActivityLog size="24" />
</button>
</div>
</div>
<div className={`flex flex-col items-end md:hidden fixed top-24 w-[50vw] place-self-end bg-black ${mobileMenuOpen ? 'translate-x-[50vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
{/* <div className="bg-black h-48" /> */}
<Link href="/about" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>About</p>
</Link>
<Link href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p>
<Link href="/projects" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Projects</p>
</Link>
<Link href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p>
<Link href="/contact" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Contact</p>
</Link>
</div>
</>
)
}

38
components/SiteTree.tsx
View File

@@ -7,24 +7,26 @@ export default function SiteTree() {
const pathname = usePathname()
const pathAsArray = pathname.split('/').filter(x => x !== '');
return (
<div className="flex flex-nowrap w-full">
<Link href="/">
<p className="mx-4">home</p>
</Link>
// return (
// <div className="flex flex-nowrap w-full">
// <Link href="/">
// <p className="mx-4">home</p>
// </Link>
{pathAsArray.map((segment: string, idx: number) => {
const path = pathAsArray.slice(0, idx + 1).join('/')
// {pathAsArray.map((segment: string, idx: number) => {
// const path = pathAsArray.slice(0, idx + 1).join('/')
return (
<div key={v4()}>
<p className="mr-4">/</p>
<Link href={path}>
<p className="mr-4">{segment}</p>
</Link>
</div>
)
})}
</div>
)
// return (
// <div key={v4()}>
// <p className="mr-4">/</p>
// <Link href={path}>
// <p className="mr-4">{segment}</p>
// </Link>
// </div>
// )
// })}
// </div>
// )
return <></>
}