figure out the nav bar

sotopia-lab · Sep 15, 2024 · 1be1d94 · 1be1d94
1 parent 255b0b0
commit 1be1d94
Show file tree

Hide file tree

Showing 13 changed files with 574 additions and 191 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,24 +7,13 @@ import Image from "next/image";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { DownArrowIcon } from "@/components/Icon";
-import { Github, BuyMeACoffee} from "@/components/icons";
+import { Github, Sotopia} from "@/components/icons";
 import { Analytics } from "@vercel/analytics/react";
 import { Toaster } from "sonner";
 import { ThemeProvider } from "@/components/theme-provider"
 import { ModeToggle } from "@/components/ui/model-toggle";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuPortal } from "@/components/ui/dropdown-menu";
 import {SiteFooter} from "@/components/footer";
 
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from "@/components/ui/navigation-menu";
 import { NavigationMenuSotopia } from "@/components/navigation";
 
 const clash = localFont({
@@ -81,16 +70,7 @@ export default function RootLayout({
           >
             <div className="w-full pl-3 sm:px-12 flex h-16 items-center justify-between">
               <Link href="/" className="flex items-center font-display text-4xl">
-                <svg className="h-10 w-10 dark:text-sky-300 dark:drop-shadow-[0_3px_10px_#bae6fd]"
-                  viewBox="0 0 300 300"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M250,200c-55.23,0-100-44.77-100-100S194.77,0,250,0"/>
-                  <path d="M50,100c55.23,0,100,44.77,100,100S105.23,300,50,300"/>
-                  <path d="M50,0l100,0c0,55.23-44.77,100-100,100"/>
-                  <path d="M250,300l-100,0c0-55.23,44.77-100,100-100"/>
-                </svg>
+                <Sotopia className="dark:text-sky-400 dark:drop-shadow-[0_3px_10px_#bae6fd]" />
                 <p className="dark:text-sky-400 dark:drop-shadow-[0_3px_10px_#bae6fd]">Sotopia</p>
               </Link>
               <div className="flex items-center space-x-4 sm:px-6">

diff --git a/app/projects/sotopia/page.tsx b/app/projects/sotopia/page.tsx
@@ -17,12 +17,6 @@ import bg_large from "@/public/bg_large.png";
 import bg_xl from "@/public/bg_xl.png";
 import sotopiaTown from '@/public/island_only.svg'
 import { ModeToggle } from "@/components/ui/model-toggle";
-import { ThemeProvider } from "@/components/theme-provider";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-import LTI from "@/components/icons/lti";
-import CMU from "@/components/icons/cmu";
 
 function SectionContent(props: React.JSX.IntrinsicAttributes & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>) {
   return <div className="snap-start w-full gap-8 grid grid-cols-12 py-16 px-6 sm:px-12" {...props} />
@@ -329,31 +323,6 @@ export default function Home() {
 
       </SectionContent>
 
-            <SectionContent>
-              <SectionTitle>Meet the team</SectionTitle>
-              {team_members_state.map((member, index) => (
-                <Link href={member.url} scroll={false} key={index} className="col-span-3 lg:col-span-2 text-center font-space">
-                  <div className="absoluate">
-                    <Avatar className={cn("w-full hover:shadow-lg hover:-translate-y-[1px] hover:shadow-gray-500 dark:shadow-gray-200 dark:border-transparent dark:border-2", "dark:bg-gradient-to-br", member.gradient)}>
-                      <AvatarImage src={member.avatar} alt={member.name} />
-                      <AvatarFallback>{member.initials}</AvatarFallback>
-                    </Avatar>
-                  </div>
-
-                  <div className="w-full mt-4">
-                  <span className="font-light">{member.name} </span>
-                  <br />
-                  <span className="italic"> {member.role} </span>
-                  </div>
-                </Link>
-              ))}
-
-            {/* <p className="text-4xl col-span-12 lg:col-span-7 lg:col-start-1 font-sans">Language Technologies Institute
-            @ Carnegie Mellon University</p> */}
-            <CMU className="col-span-12 lg:col-span-5 text-center font-space bg-black p-3" />
-            <LTI className="col-span-12 lg:col-span-6 lg:col-start-6 text-center font-space" />
-            <p className="text-xl col-span-12 justify-center">We greatly thank <a href="https://openai.com/" className="underline decoration-dotted">OpenAI</a> and <a href="https://openai.com/" className="underline decoration-dotted">Together AI</a> for their support of model credits.</p> 
-            </SectionContent>
           </Detail.ContentContainer>
         </div>
   </Detail.Container>

diff --git a/bun.lockb b/bun.lockb
diff --git a/components.json b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/components/icons/index.tsx b/components/icons/index.tsx
@@ -2,3 +2,5 @@ export { default as Github } from "./github";
 export { default as Twitter } from "./twitter";
 export { default as LoadingCircle } from "./loading-circle";
 export { default as BuyMeACoffee } from "./buymeacoffee";
+export { default as Sotopia } from "./sotopia";
+
diff --git a/components/icons/sotopia.tsx b/components/icons/sotopia.tsx
@@ -0,0 +1,16 @@
+export default function Sotopia({ className }: { className?: string }) {
+  return (
+    <div className={className}>
+    <svg className="h-10 w-10 dark:text-sky-300 dark:drop-shadow-[0_3px_10px_#bae6fd]"
+      viewBox="0 0 300 300"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M250,200c-55.23,0-100-44.77-100-100S194.77,0,250,0" />
+      <path d="M50,100c55.23,0,100,44.77,100,100S105.23,300,50,300" />
+      <path d="M50,0l100,0c0,55.23-44.77,100-100,100" />
+      <path d="M250,300l-100,0c0-55.23,44.77-100,100-100" />
+    </svg>
+    </div>
+  );
+}
diff --git a/components/navigation.tsx b/components/navigation.tsx
@@ -1,9 +1,6 @@
 "use client"
 
 import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -13,7 +10,7 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
-
+import { Sotopia } from "@/components/icons";
 const components: { title: string; href: string; description: string }[] = [
   {
     title: "Datasets",
@@ -38,16 +35,158 @@ const components: { title: string; href: string; description: string }[] = [
   },
   {
     title: "About Us",
-    href: "/sotopia-website/about",
+    href: "/about",
     description:
       "Learn more about the team behind Sotopia.",
   },
-
 ]
 
-export function NavigationMenuSotopia() {
+const project_constants = [
+  {
+    title: "Sotopia",
+    href: "/projects/sotopia",
+    description: "The platform for realistic simulations of social interactions.",
+  },
+  {
+    title: "Sotopia-π",
+    href: "/projects/sotopia-pi",
+    description: "Training socially-intelligent agents in Sotopia.",
+  },
+  {
+    title: "Agents Vs Script",
+    href: "/projects/agent_vs_script",
+    description: "Realistic social simulations require information asymmetry.",
+  },
+]
+
+import Link, { LinkProps } from "next/link"
+import { useRouter } from "next/navigation"
+import { ViewVerticalIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { Twitter } from "@/components/icons"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { constants } from "buffer";
+
+export function MobileNav() {
+  const [open, setOpen] = React.useState(false)
   return (
-    <NavigationMenu>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+        >
+          <svg
+            strokeWidth="1.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+          >
+            <path
+              d="M3 5H11"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <path
+              d="M3 12H16"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <path
+              d="M3 19H21"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+          </svg>
+          <span className="sr-only">Toggle Menu</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="pr-0">
+        <MobileLink
+          href="/"
+          className="flex items-center"
+          onOpenChange={setOpen}
+        >
+          <Sotopia className="mr-2 h-2 w-2 pb-10 pr-10" />
+          <span className="text-2xl font-bold">Sotopia</span>
+        </MobileLink>
+        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-2">
+          <div className="flex flex-col space-y-3 pb-5">
+            <MobileLink href="/projects/sotopia" onOpenChange={setOpen}>
+              <span className="text-2xl font-bold">Research</span>
+            </MobileLink>
+            {project_constants.map((project) => (
+              <MobileLink
+                key={project.title}
+                href={project.href}
+                onOpenChange={setOpen}
+                className="text-lg font-bold pl-3"
+              >
+                {project.title}
+              </MobileLink>
+            ))}
+          </div>
+          <div className="flex flex-col space-y-2">
+            <span className="text-2xl font-bold">Resources</span>
+              {components.map((component) => (
+                <MobileLink
+                  key={component.title}
+                  href={component.href}
+                  onOpenChange={setOpen}
+                  className="text-lg font-bold pl-3"
+                >
+                  {component.title}
+                </MobileLink>
+              ))}
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+interface MobileLinkProps extends LinkProps {
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+  className?: string
+}
+
+function MobileLink({
+  href,
+  onOpenChange,
+  className,
+  children,
+  ...props
+}: MobileLinkProps) {
+  const router = useRouter()
+  return (
+    <Link
+      href={href}
+      onClick={() => {
+        router.push(href.toString())
+        onOpenChange?.(false)
+      }}
+      className={cn(className)}
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
+
+export function MainNav() {
+  return (
+    <NavigationMenu className="hidden md:block">
       <NavigationMenuList>
         <NavigationMenuItem>
           <NavigationMenuTrigger>Research</NavigationMenuTrigger>
@@ -68,12 +207,15 @@ export function NavigationMenuSotopia() {
                   </a>
                 </NavigationMenuLink>
               </li>
-              <ListItem href="/sotopia-website/projects/sotopia-pi" title="Sotopia-π">
-                Training socially-intelligent agents in Sotopia.
-              </ListItem>
-              <ListItem href="/sotopia-website/projects/agent_vs_script" title="Agents Vs Script">
-                Realistic social simulations require information asymmetry.
-              </ListItem>
+              {project_constants.slice(1).map((project) => (
+                <ListItem
+                  key={project.title}
+                  title={project.title}
+                  href={project.href}
+                >
+                  {project.description}
+                </ListItem>
+              ))}
             </ul>
           </NavigationMenuContent>
         </NavigationMenuItem>
@@ -105,6 +247,15 @@ export function NavigationMenuSotopia() {
   )
 }
 
+export function NavigationMenuSotopia() {
+  return (
+    <div>
+      <MainNav />
+      <MobileNav />
+    </div>
+  )
+}
+
 const ListItem = React.forwardRef<
   React.ElementRef<"a">,
   React.ComponentPropsWithoutRef<"a">