feat(navigation): added main navigation

jkrumm · May 19, 2024 · 0b64469 · 0b64469
1 parent 256bd8d
commit 0b64469
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 14 deletions.
diff --git a/src/components/index/features.tsx b/src/components/index/features.tsx
@@ -8,7 +8,7 @@ import { Button, Title } from '@mantine/core';
 export const Features = () => {
   return (
     <>
-      <section id="features" className="my-24">
+      <section id="features" className="pt-24">
         <Title order={2} className="text-center">
           Powerful Yet Simple
         </Title>

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -3,6 +3,10 @@ import Link from 'next/link';
 import { useConfigStore } from 'fpp/store/config.store';
 
 const links = [
+  {
+    url: '/',
+    title: 'Home',
+  },
   {
     url: '/guide',
     title: 'Guide',

diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
@@ -1,26 +1,56 @@
 import Link from 'next/link';
 
-import { Button, Group, Title } from '@mantine/core';
+import { Button, Group, Text } from '@mantine/core';
+
+const navItems = [
+  {
+    title: 'Home',
+    href: '/',
+  },
+  {
+    title: 'Guide',
+    href: '/guide',
+  },
+  {
+    title: 'Analytics',
+    href: '/analytics',
+  },
+  {
+    title: 'Roadmap',
+    href: '/roadmap',
+  },
+  {
+    title: 'Contact',
+    href: '/contact',
+  },
+];
 
 const Navbar = () => {
   return (
-    <nav className="sticky top-0 z-50 bg-[#1A1B1E] px-6">
-      <div className="mx-auto h-[80px] max-w-[1200px]">
+    <nav className="hidden md:block sticky top-0 z-50 bg-[#1A1B1E]/30 px-6">
+      <div className="mx-auto h-[70px] max-w-[1200px]">
         <Group justify="space-between" h="100%">
-          <Link
-            href="/"
-            className="flex text-[#C1C2C5] no-underline hover:text-[#C1C2C5] focus:text-[#C1C2C5]"
-          >
-            <div className="logo-navbar" />
-            <Title order={1} className="mb-0 ml-3 mr-0 mt-1">
-              Free Planning Poker
-            </Title>
-          </Link>
+          <div className="hidden lg:block w-[177px]">
+            <Link href="/">
+              <div className="logo-navbar" />
+            </Link>
+          </div>
+          <Group gap={20}>
+            {navItems.map((item, index) => (
+              <Link
+                key={index}
+                href={item.href}
+                className="no-underline hover:text-[#C1C2C5] focus:text-[#C1C2C5] text-[#C1C2C5]"
+              >
+                <Text className={`font-bold`}>{item.title}</Text>
+              </Link>
+            ))}
+          </Group>
           <Button
             size="lg"
             variant="gradient"
             gradient={{ from: 'blue', to: 'cyan' }}
-            className={`hidden md:block`}
+            className={`hidden md:block w-[177px]`}
           >
             Start Planning
           </Button>

diff --git a/src/pages/analytics.tsx b/src/pages/analytics.tsx
@@ -20,6 +20,7 @@ import { useTrackPageView } from 'fpp/hooks/use-tracking.hook';
 
 import { HistoricalChart } from 'fpp/components/analytics/historical-chart';
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 export const getStaticProps = async (context: CreateNextContextOptions) => {
@@ -57,6 +58,7 @@ const Analytics = () => {
   return (
     <>
       <Meta title="Analytics" />
+      <Navbar />
       <Hero />
       <main className="flex flex-col items-center justify-center">
         <div className="container max-w-[1200px] gap-12 px-4 pb-28 pt-8">

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -27,6 +27,7 @@ import { EventType, FeatureFlagType, RouteType } from 'fpp/server/db/schema';
 import { useTrackPageView } from 'fpp/hooks/use-tracking.hook';
 
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 const Contact: NextPage = () => {
@@ -62,6 +63,7 @@ const Contact: NextPage = () => {
   return (
     <>
       <Meta title="Contact" />
+      <Navbar />
       <Hero />
       <main className="flex flex-col items-center justify-center">
         <div className="container flex items-center justify-center gap-12 px-4 pb-28 pt-8">

diff --git a/src/pages/guide.tsx b/src/pages/guide.tsx
@@ -10,6 +10,7 @@ import { useTrackPageView } from 'fpp/hooks/use-tracking.hook';
 
 import PointsTable from 'fpp/components/index/points-table';
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 const Guide: NextPage = () => {
@@ -18,6 +19,7 @@ const Guide: NextPage = () => {
   return (
     <>
       <Meta title="Imprint & Privacy Policy" />
+      <Navbar />
       <Hero />
       <main>
         <div className="container mx-auto max-w-[1200px] px-4 sm:px-6 md:px-4 pb-28 pt-8">

diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
@@ -10,6 +10,7 @@ import { RouteType } from 'fpp/server/db/schema';
 import { useTrackPageView } from 'fpp/hooks/use-tracking.hook';
 
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 const Imprint: NextPage = () => {
@@ -18,6 +19,7 @@ const Imprint: NextPage = () => {
   return (
     <>
       <Meta title="Imprint & Privacy Policy" />
+      <Navbar />
       <Hero />
       <main className="flex flex-col items-center justify-center">
         <div className="container max-w-[1200px] gap-12 px-4 pb-28 pt-8 md:flex">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -16,6 +16,7 @@ import Features from 'fpp/components/index/features';
 import IndexFormSkeleton from 'fpp/components/index/form-skeleton';
 import Privacy from 'fpp/components/index/privacy';
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 const IndexForm = lazy(() => import('fpp/components/index/form'));
@@ -26,6 +27,7 @@ const Home: NextPage = () => {
   return (
     <div className="homepage">
       <Meta />
+      <Navbar />
       <Hero />
       <main className="flex flex-col items-center justify-center p-6">
         <div className="gradients"></div>

diff --git a/src/pages/roadmap.tsx b/src/pages/roadmap.tsx
@@ -38,6 +38,7 @@ import { RouteType } from 'fpp/server/db/schema';
 import { useTrackPageView } from 'fpp/hooks/use-tracking.hook';
 
 import { Hero } from 'fpp/components/layout/hero';
+import Navbar from 'fpp/components/layout/navbar';
 import { Meta } from 'fpp/components/meta';
 
 export const getStaticProps = async (context: CreateNextContextOptions) => {
@@ -73,6 +74,7 @@ const Roadmap = () => {
   return (
     <>
       <Meta title="Roadmap" />
+      <Navbar />
       <Hero />
       <main className="flex flex-col items-center justify-center">
         <section className="container max-w-[800px] gap-12 px-4 mt-8 mb-12">

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -23,6 +23,11 @@
   );
 }
 
+nav {
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid #1a1b1e;
+}
+
 .homepage:after {
   content: '';
   background: radial-gradient(circle at top, #373a40, #1a1b1e 15%);