feat(herbmail.com): added a nav bar to herbmail.com

KBVE · Nov 8, 2024 · 57c57c9 · 57c57c9
1 parent 8e93062
commit 57c57c9
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 44 deletions.
diff --git a/apps/herbmail.com/src/layouts/Footer.astro b/apps/herbmail.com/src/layouts/Footer.astro
@@ -1,32 +1,59 @@
 ---
 import { Button } from '@kbve/shadcnui/button';
 import { Icon } from '@astrojs/starlight/components';
+import type { Icons } from '@astrojs/starlight/components/Icons';
+
 import Logo from '../../public/assets/img/logo.svg?raw';
 
 const navigationLinks = [
-	{ href: '/about', icon: 'seti:folder', label: 'About' },
-	{ href: '/services', icon: 'seti:folder', label: 'Services' },
-	{ href: '/blog', icon: 'rss', label: 'Blog' },
-	{ href: 'https://kbve.com/contact', icon: 'email', label: 'Contact' },
+	{ 
+		href: '/about', 
+		icon: 'folder' as keyof typeof Icons, 
+		label: 'About' 
+	},
+	{ 
+		href: '/services', 
+		icon: 'folder' as keyof typeof Icons, 
+		label: 'Services' 
+	},
+	{ 
+		href: '/blog', 
+		icon: 'rss' as keyof typeof Icons, 
+		label: 'Blog' 
+	},
+	{ 
+		href: 'https://kbve.com/contact', 
+		icon: 'email' as keyof typeof Icons, 
+		label: 'Contact', 
+		target: '_blank', 
+		rel: 'noopener noreferrer' 
+	},
 ];
 
 const socialLinks = [
 	{
 		href: 'https://twitter.com/yourbrand',
-		icon: 'seti:folder',
+		icon: 'folder' as keyof typeof Icons,
 		label: 'Twitter',
+		target: '_blank',
+		rel: 'noopener noreferrer'
 	},
 	{
 		href: 'https://github.com/kbve',
-		icon: 'seti:github',
+		icon: 'github' as keyof typeof Icons,
 		label: 'GitHub',
+		target: '_blank',
+		rel: 'noopener noreferrer'
 	},
 	{
 		href: 'https://linkedin.com/company/yourbrand',
-		icon: 'linkedin',
+		icon: 'linkedin' as keyof typeof Icons,
 		label: 'LinkedIn',
+		target: '_blank',
+		rel: 'noopener noreferrer'
 	},
 ];
+
 ---
 
 <footer
@@ -51,7 +78,7 @@ const socialLinks = [
 									href={href}
 									class="flex items-center space-x-2">
 									<Icon name={icon} class="h-4 w-4" />
-									<span class="ml-1">{label}</span>
+									<span class="ml-1 hidden md:block">{label}</span>
 								</a>
 							</Button>
 						</li>

diff --git a/apps/herbmail.com/src/layouts/Layout.astro b/apps/herbmail.com/src/layouts/Layout.astro
@@ -8,6 +8,7 @@ const { title, description, image } = Astro.props;
 // import { Toastify } from '@kbve/astropad';
 
 import Footer from './Footer.astro';
+import Nav from './Nav.astro';
 import './global.css';
 ---
 
@@ -35,8 +36,8 @@ import './global.css';
 	</head>
 
 	<body role="document">
+		<Nav />
 		<slot role="main" />
 		<Footer />
 	</body>
-
 </html>
diff --git a/apps/herbmail.com/src/layouts/Nav.astro b/apps/herbmail.com/src/layouts/Nav.astro
@@ -0,0 +1,43 @@
+---
+import { Button } from '@kbve/shadcnui/button';
+import { Icon } from '@astrojs/starlight/components';
+import Logo from '../../public/assets/img/logo.svg?raw';
+
+const navLinks = [
+	{ href: '/', label: 'Home' },
+	{ href: '/about', label: 'About' },
+	{ href: '/services', label: 'Services' },
+	{ href: '/blog', label: 'Blog' },
+	{ href: 'https://kbve.com/contact', label: 'Contact' },
+];
+---
+
+<header class="sticky top-0 z-50 bg-background border-b border-border/40 py-4 shadow-sm dark:border-border">
+	<div class="container mx-auto px-4 flex justify-between items-center">
+		<!-- Logo Section -->
+		<a href="/" class="flex items-center space-x-2">
+			<div class="h-8 w-8">
+				<Fragment set:html={Logo} />
+			</div>
+
+		</a>
+
+		<!-- Navigation Links -->
+		<nav class="hidden md:flex space-x-4">
+			{navLinks.map(({ href, label }) => (
+				<a href={href} class="text-foreground hover:text-primary transition-colors">
+					<Button variant="default" size="sm">
+						<span>{label}</span>
+					</Button>
+				</a>
+			))}
+		</nav>
+
+		<!-- Mobile Menu Button -->
+		<div class="md:hidden">
+			<Button variant="secondary" size="icon" aria-label="Open menu">
+				<Icon name="bars" class="h-6 w-6 text-foreground" />
+			</Button>
+		</div>
+	</div>
+</header>
diff --git a/apps/herbmail.com/src/layouts/global.css b/apps/herbmail.com/src/layouts/global.css
@@ -3,39 +3,32 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  /* Background colors */
-  --border: 220 20% 20%; /* darker zinc-like shade */
-  --input: 210 22% 96%;
-  --ring: 206 100% 50%;
-  --background: 210 40% 98%; /* dark zinc background */
-  --foreground: 220 13% 13%; /* light foreground for contrast */
 
-  /* Button colors */
-  --primary: 130 80% 40%; /* vibrant green */
-  --primary-foreground: 0 0% 100%;
-
-  --secondary: 140 40% 30%; /* subdued green for secondary buttons */
-  --secondary-foreground: 0 0% 100%;
-
-  /* Alert/Destructive colors */
-  --destructive: 4 90% 58%; /* red for destructive actions */
-  --destructive-foreground: 0 0% 100%;
-
-  /* Muted, accent, and additional colors */
-  --muted: 210 16% 93%; /* soft muted gray */
-  --muted-foreground: 210 22% 49%;
-
-  --accent: 174 62% 47%; /* teal accent */
-  --accent-foreground: 0 0% 100%;
-
-  --popover: 210 24% 92%; /* popover with slight contrast to background */
-  --popover-foreground: 210 22% 33%;
-
-  /* Card colors */
-  --card: 220 13% 15%; /* slightly lighter than background */
-  --card-foreground: 210 22% 20%;
-
-  /* Border radius */
-  --radius: 8px;
+@layer base {
+  :root {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 130 80% 40%; /* vibrant green */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 140 40% 30%; /* subdued green for secondary buttons */
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
diff --git a/apps/herbmail.com/src/pages/index.astro b/apps/herbmail.com/src/pages/index.astro
@@ -17,7 +17,7 @@ import {
 ---
 
 <Layout title={title} description={description}>
-	<main class="m-auto p-4 text-white text-xl leading-normal">
+	<main class="m-auto p-4 text-white text-xl leading-normal min-h-screen">
 		<section class="text-gray-100">
 			<div
 				class="container flex flex-col justify-center p-1 mx-auto sm:py-12 lg:py-24 lg:flex-row lg:justify-between">