built out top navbar (#36)

* style: FRON-35 desktop styles w shadcn components

* chore: sideline user profile for next version

package.json

@@ -22,6 +22,9 @@
     "typecheck": "tsc --pretty --noEmit --incremental false"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@radix-ui/react-slot": "latest",
     "class-variance-authority": "latest",
     "clsx": "latest",
     "jotai": "latest",

src/components/TopNav/MainNav.tsx

@@ -2,13 +2,19 @@ import Link from 'next/link';
 
 export const MainNav = () => {
   return (
-    <ul className='flex gap-2'>
-      <li>
-        <Link href='/dashboard'>Dashboard</Link>
-      </li>
-      <li>
-        <Link href='/schedule'>Schedule</Link>
-      </li>
-    </ul>
+    <nav className='mx-8 flex items-center space-x-4 lg:mx-8 lg:space-x-6'>
+      <Link
+        className='font-medium transition-colors hover:text-primary'
+        href='/dashboard'
+      >
+        Dashboard
+      </Link>
+      <Link
+        className='font-medium transition-colors hover:text-primary'
+        href='/schedule'
+      >
+        Schedule
+      </Link>
+    </nav>
   );
 };

src/components/TopNav/UserNav.tsx

@@ -1,19 +1,69 @@
-const UserNav = () => {
+import { BsPersonCircle } from 'react-icons/bs';
+
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+
+export function UserNav() {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='32'
-      height='32'
-      fill='currentColor'
-      viewBox='0 0 16 16'
-    >
-      <path d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0' />
-      <path
-        fillRule='evenodd'
-        d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'
-      />
-    </svg>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
+          <Avatar className='h-8 w-8'>
+            <AvatarImage src='/avatars/01.png' alt='@shadcn' />
+            <AvatarFallback>
+              <BsPersonCircle />
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56' align='end' forceMount>
+        <DropdownMenuLabel className='font-normal'>
+          <div className='flex flex-col space-y-1'>
+            <p className='text-sm font-medium leading-none'>
+              Save and share your queries
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Sign In</DropdownMenuItem>
+          <DropdownMenuItem>Create Account</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
-};
+}
 
-export { UserNav };
+// Signed In Menu
+{
+  /* <DropdownMenuLabel className='font-normal'>
+  <div className='flex flex-col space-y-1'>
+    <p className='text-sm font-medium leading-none'>shadcn</p>
+    <p className='text-xs leading-none text-muted-foreground'>
+      m@example.com
+    </p>
+  </div>
+</DropdownMenuLabel>
+<DropdownMenuSeparator />
+<DropdownMenuGroup>
+  <DropdownMenuItem>
+    Profile
+  </DropdownMenuItem>
+  <DropdownMenuItem>
+    Settings
+  </DropdownMenuItem>
+</DropdownMenuGroup>
+<DropdownMenuSeparator />
+<DropdownMenuItem>
+  Log out
+</DropdownMenuItem> */
+}

src/components/TopNav/index.tsx

@@ -1,19 +1,32 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
-import { UserNav } from '.';
 import { MainNav } from './MainNav';
 
 export * from './MainNav';
 export * from './UserNav';
 
 export const TopNav = () => {
   return (
-    <div className='container flex justify-between py-8'>
-      <Link href='/' className='btn btn-ghost text-xl'>
+    <div className='container flex h-16 items-center px-4'>
+      <Link
+        href='/'
+        className='btn btn-ghost flex items-center gap-x-2 text-xl font-extrabold tracking-tight '
+      >
+        <Image
+          src='/slick-telemetry-logo.png'
+          width={24}
+          height={24}
+          alt='Slick Telemetry Logo'
+        />
         Slick Telemetry
       </Link>
       <MainNav />
-      <UserNav />
+      {/*
+      Sidelined for v2
+      <div className='flex items-center ml-auto space-x-4'>
+        <UserNav />
+      </div> */}
     </div>
   );
 };

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };