soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-12 23:04:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor layout and navigation components; remove theme toggler

Browse Source 
- Updated layout.tsx to remove the ThemeProvider and directly include Analytics, SpeedInsights, and Navigation components.
- Removed ThemeToggler component from Navigation.
- Adjusted global CSS to use media queries for dark theme styles instead of data attributes.
- Cleaned up package.json by removing the next-themes dependency.
This commit is contained in:
Sean O'Connor
2024-12-24 01:34:32 -05:00
parent 40e3ff220c
commit 8a13b5a166
8 changed files with 3263 additions and 1675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next-env.d.ts vendored
View File

@@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

1
package.json
View File

@@ -33,7 +33,6 @@
"geist": "^1.3.1",
"lucide-react": "^0.454.0",
"next": "^15.0.2",
"next-themes": "^0.3.0",
"pdfjs-dist": "^4.9.155",
"radix-ui": "^1.0.1",
"react": "^18.3.1",

3091
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

1725
public/stats.html Normal file
View File

File diff suppressed because one or more lines are too long

40
src/app/layout.tsx
View File

@@ -1,6 +1,5 @@
import { Analytics } from "@vercel/analytics/react"
import { SpeedInsights } from "@vercel/speed-insights/next"
import { ThemeProvider } from "next-themes"
import { Footer } from "~/components/Footer"
import { Navigation } from "~/components/Navigation"
import { Sidebar } from "~/components/Sidebar"
@@ -18,30 +17,23 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning>
<ThemeProvider
attribute="data-theme"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Analytics />
<SpeedInsights />
<Navigation />
<div className="flex-1">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row lg:gap-12">
<aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
<Sidebar />
</aside>
<main className="flex-1 overflow-y-auto py-8">
{children}
</main>
</div>
<Analytics />
<SpeedInsights />
<Navigation />
<div className="flex-1">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row lg:gap-12">
<aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
<Sidebar />
</aside>
<main className="flex-1 overflow-y-auto py-8">
{children}
</main>
</div>
</div>
<Footer />
</ThemeProvider>
</body>
</html>
</div>
<Footer />
</body>
</html >
)
}

2
src/components/Navigation.tsx
View File

@@ -4,7 +4,6 @@ import { BookOpenText, FileText, FolderGit2, Home, Menu, Newspaper, Plane, X } f
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { ThemeToggler } from '~/components/ThemeToggler';
const navItems = [
{ href: '/', label: 'About', icon: Home },
@@ -45,7 +44,6 @@ export function Navigation() {
);
})}
</div>
<ThemeToggler />
<button
onClick={() => setIsOpen(!isOpen)}
className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"

31
src/components/ThemeToggler.tsx
View File

@@ -1,31 +0,0 @@
'use client';
import { Sun, Moon, SunMoon } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
export function ThemeToggler() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Only show theme switcher after mounting to prevent hydration mismatch
useEffect(() => {
setMounted(true);
}, []);
// Determine the icon to display based on the current theme
const themeIcon = mounted ? (theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />) : <SunMoon size={20} />;
return (
<button
onClick={() => {
const newTheme = theme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
}}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
{themeIcon}
</button>
);
}

46
src/styles/globals.css
View File

@@ -28,28 +28,30 @@
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] {
--background: 0 0% 10%;
--foreground: 0 0% 90%;
--card: 0 0% 12%;
--card-foreground: 0 0% 90%;
--popover: 0 0% 20%;
--popover-foreground: 0 0% 90%;
--primary: 0 0% 90%;
--primary-foreground: 0 0% 10%;
--secondary: 0 0% 30%;
--secondary-foreground: 0 0% 90%;
--muted: 0 0% 30%;
--muted-foreground: 0 0% 70%;
--accent: 0 0% 30%;
--accent-foreground: 0 0% 90%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 10%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--ring: 0 0% 90%;
--radius: 0.5rem;
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06);
@media (prefers-color-scheme: dark) {
:root {
--background: 0 0% 10%;
--foreground: 0 0% 90%;
--card: 0 0% 12%;
--card-foreground: 0 0% 90%;
--popover: 0 0% 20%;
--popover-foreground: 0 0% 90%;
--primary: 0 0% 90%;
--primary-foreground: 0 0% 10%;
--secondary: 0 0% 30%;
--secondary-foreground: 0 0% 90%;
--muted: 0 0% 30%;
--muted-foreground: 0 0% 70%;
--accent: 0 0% 30%;
--accent-foreground: 0 0% 90%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 10%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--ring: 0 0% 90%;
--radius: 0.5rem;
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06);
}
}
}