From 149b5fa7fe7b1b94220563d48ba901aedf92dae2 Mon Sep 17 00:00:00 2001 From: Lumither Tao Date: Fri, 15 Mar 2024 21:46:36 +0800 Subject: [PATCH] feat(Navbar) navbar update --- app/about/page.tsx | 3 + app/globals.css | 139 ++++++++++++++++++------------------ app/header.tsx | 32 --------- app/layout.tsx | 6 +- app/navbar.tsx | 56 +++++++++++++++ app/page.tsx | 14 ++-- tailwind.config.ts | 171 ++++++++++++++++++++++++--------------------- 7 files changed, 234 insertions(+), 187 deletions(-) create mode 100644 app/about/page.tsx delete mode 100644 app/header.tsx create mode 100644 app/navbar.tsx diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..eb14ddc --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return <> +} diff --git a/app/globals.css b/app/globals.css index 6a75725..1c09402 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,76 +1,79 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - - --radius: 0.5rem; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - } + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: radial-gradient(circle at center bottom, rgb(2, 35, 96) 0%, rgb(14, 26, 91) 25%, rgba(2, 0, 36, 1) 61%); + background: var(--background); + + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } } - + @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + } +} diff --git a/app/header.tsx b/app/header.tsx deleted file mode 100644 index f8ec987..0000000 --- a/app/header.tsx +++ /dev/null @@ -1,32 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; - -export default function Header() { - const [ scrolled, setScrolled ] = useState(false); - - useEffect(() => { - const handleScroll = () => { - const isScrolled = window.scrollY > 0; - setScrolled(isScrolled); - }; - - window.addEventListener('scroll', handleScroll); - - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); - - return <> -
- - - Tao - -

{ 'Lumither\'s Blog' }

- -
- ; -} diff --git a/app/layout.tsx b/app/layout.tsx index 787a2f2..7a4ece1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,7 +5,7 @@ import { Inter as FontSans } from 'next/font/google'; import { cn } from '@/lib/utils'; import React from 'react'; import { ThemeProvider } from '@/components/theme-provider'; -import Header from '@/app/header'; +import Navbar from '@/app/navbar'; const fontSans = FontSans({ @@ -30,11 +30,11 @@ export default function RootLayout({ ) }> -
+ { children } diff --git a/app/navbar.tsx b/app/navbar.tsx new file mode 100644 index 0000000..139cf24 --- /dev/null +++ b/app/navbar.tsx @@ -0,0 +1,56 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@/components/ui/navigation-menu'; + +const components: { title: string; href: string; description: string }[] = [ + { + title: 'title of subpage', + href: 'url', + description: + 'a description' + } +]; +export default function Navbar() { + const [ scrolled, setScrolled ] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const isScrolled = window.scrollY > 0; + setScrolled(isScrolled); + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + return <> +
+
+ + + + + + Tao + + + + + +

{"Lumither\'s Blog"}

+ + + + + +
+ ; +} diff --git a/app/page.tsx b/app/page.tsx index 10889a6..636387b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,11 +2,15 @@ export default function Home() { let info = new Array(200).fill(

test

); return (
-
    - { info.map((item, id) => ( -
  • { item }
    • - )) } -
+
+
+
    + { info.map((item, id) => ( +
  • { item }
    • + )) } +
+
+
); } diff --git a/tailwind.config.ts b/tailwind.config.ts index 593f812..5ddd683 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,84 +1,97 @@ -import type { Config } from "tailwindcss" +import type { Config } from 'tailwindcss'; import { fontFamily } from 'tailwindcss/defaultTheme'; const config = { - darkMode: ["class"], - content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], - prefix: "", - theme: { - fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans], + darkMode: [ 'class' ], + content: [ + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}' + ], + prefix: '', + theme: { + fontFamily: { + sans: [ 'var(--font-sans)', ...fontFamily.sans ] + }, + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px' + } + }, + extend: { + colors: { + 'resolution-blue': { + '50': '#e5f4ff', + '100': '#d0ebff', + '200': '#abd8ff', + '300': '#79bcff', + '400': '#458fff', + '500': '#1c61ff', + '600': '#003fff', + '700': '#0042ff', + '800': '#0039dd', + '900': '#042cab', + '950': '#042086' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' } + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out' + } + } }, - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, - plugins: [require("tailwindcss-animate")], -} satisfies Config + plugins: [ require('tailwindcss-animate') ] +} satisfies Config; -export default config +export default config;