feat: navbar redesign

2026-06-06 00:56:54 +00:00 · 2024-12-25 19:03:01 +01:00
parent 46363fead1
commit ba2f493695
6 changed files with 119 additions and 80 deletions
--- a/src/app/(protected)/project/[id]/page.tsx
+++ b/src/app/(protected)/project/[id]/page.tsx
@@ -43,7 +43,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
  // maybe it's not clean enough but who cares
  return (
    <div className="p-4">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-6xl mx-auto">
        <Breadcrumb className="pb-5">
          <BreadcrumbList>
            <BreadcrumbItem>
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
                href="https://cloud-jblc9ujpj-hack-club-bot.vercel.app/0kooha-2024-12-22-23-23-29.mp4"
                target="_blank"
              >
-                <div className="flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
+                <div className="flex items-center rounded-lg px-3 py-1 text-sm bg-mantle">
                  Now you can add team members! <ArrowRight className="ml-2 w-4 h-4" />
                </div>
              </Link>
@@ -46,7 +46,7 @@ export default function Home() {
          </div>
        </section>
        <section
-          className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900"
+          className="w-full py-12 md:py-24 lg:py-32 bg-mantle"
          id="features"
        >
          <div className="container px-4 md:px-6">
@@ -56,7 +56,7 @@ export default function Home() {
                  {
                    title: 'Create a project',
                    description:
-                      'Create a project and invite your team members (soon) to start collecting feedback',
+                      'Create a project and invite your team members to start collecting feedback',
                    html: (
                      <Video
                        src="https://cloud-flt5r19p6-hack-club-bot.vercel.app/0kooha-2024-12-15-21-37-18.mp4"
@@ -73,7 +73,7 @@ export default function Home() {
                    html: (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
-                        src="https://cloud-9x06b7lfe-hack-club-bot.vercel.app/0carbon_2_.png"
+                        src="https://cloud-81pelcjv5-hack-club-bot.vercel.app/0carbon_3_.png"
                        alt="Code example"
                        className="w-full rounded-lg"
                      />
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,67 +4,77 @@

@layer base {
  :root {
-    --background: 220 23.077% 94.902%; /* base */
-    --foreground: 233.793 16.022% 35.49%; /* text */
+    --background: 220 23.077% 94.902%;
+    --foreground: 233.793 16.022% 35.49%;

-    --muted: 222.857 15.909% 82.745%; /* surface0 */
-    --muted-foreground: 233.333 12.796% 41.373%; /* subtext1 */
+    --muted: 222.857 15.909% 82.745%;
+    --muted-foreground: 233.333 12.796% 41.373%;

-    --popover: 220 23.077% 94.902%; /* base */
-    --popover-foreground: 233.793 16.022% 35.49%; /* text */
+    --popover: 220 23.077% 94.902%;
+    --popover-foreground: 233.793 16.022% 35.49%;

-    --card: 220 23.077% 94.902%; /* base */
-    --card-foreground: 233.793 16.022% 35.49%; /* text */
+    --card: 220 23.077% 94.902%;
+    --card-foreground: 233.793 16.022% 35.49%;

-    --border: 225 13.559% 76.863%; /* surface1 */
-    --input: 225 13.559% 76.863%; /* surface1 */
+    --border: 225 13.559% 76.863%;
+    --input: 225 13.559% 76.863%;

-    --primary: 219.907 91.489% 53.922%; /* blue */
-    --primary-foreground: 220 23.077% 94.902%; /* base */
+    --primary: 219.907 91.489% 53.922%;
+    --primary-foreground: 220 23.077% 94.902%;

-    --secondary: 222.857 15.909% 82.745%; /* surface0 */
-    --secondary-foreground: 233.793 16.022% 35.49%; /* text */
+    --secondary: 222.857 15.909% 82.745%;
+    --secondary-foreground: 233.793 16.022% 35.49%;

-    --accent: 222.857 15.909% 82.745%; /* surface0 */
-    --accent-foreground: 233.793 16.022% 35.49%; /* text */
+    --accent: 222.857 15.909% 82.745%;
+    --accent-foreground: 233.793 16.022% 35.49%;

-    --destructive: 347.077 86.667% 44.118%; /* red */
-    --destructive-foreground: 220 21.951% 91.961%; /* mantle */
+    --destructive: 347.077 86.667% 44.118%;
+    --destructive-foreground: 220 21.951% 91.961%;

-    --ring: 233.793 16.022% 35.49%; /* text */
+    --ring: 233.793 16.022% 35.49%;
+
+    --surface-1: 225.0 14.0% 77.0%;
+    --surface-2: 227.0 12.0% 71.0%;
+
+    --mantle: 220.0 22.0% 92.0%;

    --radius: 0.5rem;
  }

  .dark {
-    --background: 240 21.053% 14.902%; /* base */
-    --foreground: 226.154 63.934% 88.039%; /* text */
+    --background: 240 21.053% 14.902%;
+    --foreground: 226.154 63.934% 88.039%;

-    --muted: 236.842 16.239% 22.941%; /* surface0 */
-    --muted-foreground: 226.667 35.294% 80%; /* subtext1 */
+    --muted: 236.842 16.239% 22.941%;
+    --muted-foreground: 226.667 35.294% 80%;

-    --popover: 240 21.053% 14.902%; /* base */
-    --popover-foreground: 226.154 63.934% 88.039%; /* text */
+    --popover: 240 21.053% 14.902%;
+    --popover-foreground: 226.154 63.934% 88.039%;

-    --card: 240 21.053% 14.902%; /* base */
-    --card-foreground: 226.154 63.934% 88.039%; /* text */
+    --card: 240 21.053% 14.902%;
+    --card-foreground: 226.154 63.934% 88.039%;

-    --border: 234.286 13.208% 31.176%; /* surface1 */
-    --input: 234.286 13.208% 31.176%; /* surface1 */
+    --border: 234.286 13.208% 31.176%;
+    --input: 234.286 13.208% 31.176%;

-    --primary: 217.168 91.87% 75.882%; /* blue */
-    --primary-foreground: 240 21.053% 14.902%; /* base */
+    --primary: 217.168 91.87% 75.882%;
+    --primary-foreground: 240 21.053% 14.902%;

-    --secondary: 236.842 16.239% 22.941%; /* surface0 */
-    --secondary-foreground: 226.154 63.934% 88.039%; /* text */
+    --secondary: 236.842 16.239% 22.941%;
+    --secondary-foreground: 226.154 63.934% 88.039%;

-    --accent: 236.842 16.239% 22.941%; /* surface0 */
-    --accent-foreground: 226.154 63.934% 88.039%; /* text */
+    --accent: 236.842 16.239% 22.941%;
+    --accent-foreground: 226.154 63.934% 88.039%;

-    --destructive: 343.269 81.25% 74.902%; /* red */
-    --destructive-foreground: 240 21.311% 11.961%; /* mantle */
+    --destructive: 343.269 81.25% 74.902%;
+    --destructive-foreground: 240 21.311% 11.961%;

-    --ring: 226.154 63.934% 88.039%; /* text */
+    --ring: 226.154 63.934% 88.039%;
+
+    --surface-1: 234.0 13.0% 31.0%;
+    --surface-2: 233.0 12.0% 39.0%;
+
+    --mantle: 240 21.311% 11.961%;

    --radius: 0.5rem;
  }
--- a/src/components/app/NavBar/NavBar.tsx
+++ b/src/components/app/NavBar/NavBar.tsx
@@ -1,58 +1,75 @@
-"use client"
+'use client';

-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 /**
 * v0 by Vercel.
 * @see https://v0.dev/t/igzEEdGqAvH
 * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
 */
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from "@/components/ui/dropdown-menu"
-import { logout } from "@/lib/auth/actions"
-import { useSession } from "@/lib/providers/SessionProvider"
-import Link from "next/link"
-import { useActionState } from "react"
-import MobileNavbarLinks from "../MobileNavbarLinks/MobileNavbarLinks"
-import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import { logout } from '@/lib/auth/actions';
+import { useSession } from '@/lib/providers/SessionProvider';
+import Link from 'next/link';
+import { useActionState } from 'react';
+import MobileNavbarLinks from '../MobileNavbarLinks/MobileNavbarLinks';
+import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';

 export const links = [
  { href: '/dashboard', name: 'Dashboard' },
  { href: 'https://github.com/sponsors/SrIzan10', name: '❤️ Donate' },
-]
+];

 function NavbarLinks() {
  return (
-    <>
+    <div className="flex gap-8">
      {links.map((link) => (
        <Link key={link.href} href={link.href}>
          <Button variant={'link'}>{link.name}</Button>
        </Link>
      ))}
-    </>
+    </div>
  );
 }

 export default function Navbar() {
  const { user } = useSession();
-  const [, logoutAction] = useActionState(logout, null)
+  const [, logoutAction] = useActionState(logout, null);
  return (
    <>
-      <nav className="flex items-center h-16 px-4 border-b gap-3 shrink-0">
-        <Link href="/" className="hidden md:flex">
-          <Button>echospace</Button>
-        </Link>
-        <MobileNavbarLinks />
-        <div className="hidden md:flex">
+      <nav className="flex items-center justify-between h-16 px-4 md:shadow border-b md:border-0 md:rounded-md md:mt-2 gap-3 shrink-0 max-w-6xl mx-auto bg-mantle">
+        {/* Left section */}
+        <div className="flex items-center">
+          <Link href="/" className="hidden md:flex">
+            <Button>echospace</Button>
+          </Link>
+          <MobileNavbarLinks />
+        </div>
+
+        {/* Center section */}
+        <div className="hidden md:flex items-center justify-center">
          <NavbarLinks />
        </div>
-        <div className="flex-1" />
-        <ThemeSwitcher />
-        {user ? (
-          <>
+
+        {/* Right section */}
+        <div className="flex items-center gap-3">
+          <ThemeSwitcher />
+          {user ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild className="cursor-pointer">
                <Avatar>
-                  <AvatarImage src={`https://github.com/${user.username}.png`} alt={user.username} />
+                  <AvatarImage
+                    src={`https://github.com/${user.username}.png`}
+                    alt={user.username}
+                  />
                  <AvatarFallback>{user.username}</AvatarFallback>
                </Avatar>
              </DropdownMenuTrigger>
@@ -60,20 +77,23 @@ export default function Navbar() {
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
-                  <DropdownMenuItem className="cursor-pointer" onClick={() => {
-                    logoutAction()
-                  }}>
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => {
+                      logoutAction();
+                    }}
+                  >
                    Sign out
                  </DropdownMenuItem>
-                  </DropdownMenuGroup>
+                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
-          </>
-        ) : (
-          <Link href="/auth">
-            <Button variant="outline">Sign in</Button>
-          </Link>
-        )}
+          ) : (
+            <Link href="/auth">
+              <Button variant="outline">Sign in</Button>
+            </Link>
+          )}
+        </div>
      </nav>
    </>
  );
--- a/src/components/app/ProjectSettings/ProjectSettings.tsx
+++ b/src/components/app/ProjectSettings/ProjectSettings.tsx
@@ -38,7 +38,7 @@ export default function ProjectSettings(project: ProjectWithUsers) {
  }, [project.github]);

  return (
-    <div className="w-full max-w-4xl mx-auto p-4">
+    <div className="w-full max-w-6xl mx-auto p-4">
      <Breadcrumb className="pb-5">
        <BreadcrumbList>
          <BreadcrumbItem>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,6 +52,15 @@ const config = {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
+        surface1: {
+          DEFAULT: "hsl(var(--surface-1))",
+        },
+        surface2: {
+          DEFAULT: "hsl(var(--surface-2))",
+        },
+        mantle: {
+          DEFAULT: "hsl(var(--mantle))",
+        },
      },
      borderRadius: {
        lg: "var(--radius)",