Reorganize with mono theme
This commit is contained in:
+71
-67
@@ -1,39 +1,41 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import Image from 'next/image';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { name, contact, location } from '~/lib/data';
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { name, contact, location } from "~/lib/data";
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const isHomePage = pathname === '/';
|
||||
const isHomePage = pathname === "/";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile layout - only on home page */}
|
||||
{/* Mobile layout - horizontal intro bar only on home page */}
|
||||
{isHomePage && (
|
||||
<div className="lg:hidden w-full pt-6 pb-2 space-y-4">
|
||||
<div className="w-full space-y-4 pb-2 pt-6 lg:hidden">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-24 h-24 relative overflow-hidden rounded-lg">
|
||||
<div className="relative h-24 w-24 overflow-hidden">
|
||||
<Image
|
||||
src="/headshot.png"
|
||||
alt={`${name[0]?.first} ${name[0]?.last}`}
|
||||
width={240}
|
||||
height={240}
|
||||
className="object-cover rounded-xl"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-1">
|
||||
<h2 className="font-bold text-xl hover:text-primary transition-colors">{name[0]?.first} {name[0]?.last}</h2>
|
||||
<h2 className="text-xl font-bold transition-colors hover:text-primary">
|
||||
{name[0]?.first} {name[0]?.last}
|
||||
</h2>
|
||||
{location.map((item) => (
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground flex items-center gap-2"
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground"
|
||||
{...(item.href && {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
rel: "noopener noreferrer",
|
||||
})}
|
||||
>
|
||||
{item.icon && <item.icon className="h-4 w-4" />}
|
||||
@@ -44,16 +46,18 @@ export function Sidebar() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xs uppercase text-muted-foreground font-medium">Contact</h3>
|
||||
<h3 className="text-xs font-medium uppercase text-muted-foreground">
|
||||
Contact
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{contact.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-primary"
|
||||
{...(item.external && {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
rel: "noopener noreferrer",
|
||||
})}
|
||||
>
|
||||
<item.icon className="h-4 w-4" />
|
||||
@@ -65,69 +69,69 @@ export function Sidebar() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Desktop layout - on all pages */}
|
||||
<div className="hidden lg:block w-64 p-6">
|
||||
<div className="space-y-6">
|
||||
<div className="max-w-[240px] mx-auto lg:max-w-none">
|
||||
<div className="aspect-square relative overflow-hidden rounded-xl w-full">
|
||||
<Image
|
||||
src="/headshot.png"
|
||||
alt={`${name[0]?.first} ${name[0]?.last}`}
|
||||
width={240}
|
||||
height={240}
|
||||
className="object-cover rounded-xl"
|
||||
priority
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,/9j..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center lg:text-left space-y-2">
|
||||
<h2 className="font-bold text-xl hover:text-primary transition-colors">{name[0]?.first} {name[0]?.last}</h2>
|
||||
{location.map((item) => (
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start"
|
||||
{...(item.href && {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
})}
|
||||
>
|
||||
{item.icon && <item.icon className="h-4 w-4" />}
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<h3 className="text-xs uppercase text-muted-foreground font-medium mb-2 text-center lg:text-left">Contact</h3>
|
||||
<div className="space-y-2">
|
||||
{contact.map((item) => (
|
||||
{/* Desktop layout - clean and elegant sidebar */}
|
||||
<div className="hidden h-full w-80 border-r border-border bg-card lg:block">
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Profile Section */}
|
||||
<div className="flex-shrink-0 border-b border-border px-8 py-8">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="relative h-24 w-24 overflow-hidden border border-border">
|
||||
<Image
|
||||
src="/headshot.png"
|
||||
alt={`${name[0]?.first} ${name[0]?.last}`}
|
||||
width={96}
|
||||
height={96}
|
||||
className="h-full w-full object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h2 className="text-lg font-semibold tracking-tight">
|
||||
{name[0]?.first} {name[0]?.last}
|
||||
</h2>
|
||||
{location.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
|
||||
{...(item.external && {
|
||||
className="mt-1 block text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
{...(item.href && {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
rel: "noopener noreferrer",
|
||||
})}
|
||||
>
|
||||
<item.icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<p className="text-sm text-muted-foreground text-center lg:text-left">
|
||||
© {new Date().getFullYear()} {name[0]?.first} {name[0]?.last}. All rights reserved.
|
||||
</p>
|
||||
{/* Contact Links Section */}
|
||||
<div className="flex-1 px-8 py-6">
|
||||
<div className="space-y-1">
|
||||
{contact.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="sidebar-contact-link flex items-center gap-3 px-3 py-2 text-sm text-muted-foreground transition-all hover:bg-accent hover:text-accent-foreground"
|
||||
{...(item.external && {
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
})}
|
||||
>
|
||||
<item.icon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex-shrink-0 border-t border-border px-8 py-4">
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
© {new Date().getFullYear()} {name[0]?.first} {name[0]?.last}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user