feedback button (#262)

app/[lang]/layout.tsx

@@ -9,6 +9,7 @@ import { SiteHeader } from "@/components/site-header"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 
 import { fallbackLng, languages } from "../i18n/settings"
+import { FloatingFeedbackSidebar } from "@/components/floating-feedback-sidebar"
 
 export async function generateStaticParams() {
   return languages.map((language) => ({ language }))
@@ -76,6 +77,7 @@ export default function RootLayout({ children, params }: RootLayoutProps) {
           suppressHydrationWarning
           className={"min-h-screen bg-background antialiased"}
         >
+           <FloatingFeedbackSidebar />
           <div className="relative flex min-h-screen flex-col">
             <SiteHeader lang={lang} />
             <div className="flex-1">{children}</div>

components/floating-feedback-sidebar.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import React, { useCallback, useEffect, useState } from "react"
+import Link from "next/link"
+
+import { siteConfig } from "@/config/site"
+
+import { Icons } from "./icons"
+
+export const FloatingFeedbackSidebar = () => {
+  const [isOpen, setIsOpen] = useState(true)
+  const [isMobile, setIsMobile] = useState(false)
+
+  const checkIfMobile = useCallback(() => {
+    setIsMobile(window.innerWidth < 768)
+  }, [])
+
+  useEffect(() => {
+    checkIfMobile()
+    window.addEventListener("resize", checkIfMobile)
+    return () => window.removeEventListener("resize", checkIfMobile)
+  }, [checkIfMobile])
+
+  const toggleSidebar = () => {
+    setIsOpen((prev) => !prev)
+  }
+
+  return (
+    <div
+      className={`fixed z-50 transition-all duration-300 ease-in-out ${
+        isMobile
+          ? "bottom-4 right-0 h-auto"
+          : "top-1/2 -translate-y-1/2 right-0 h-auto"
+      }`}
+      onMouseEnter={() => !isMobile && setIsOpen(true)}
+      onMouseLeave={() => !isMobile && setIsOpen(false)}
+    >
+      <div className="flex">
+        <button
+          onClick={toggleSidebar}
+          className={`flex text-sm cursor-pointer items-center justify-center bg-primary text-white font-sans font-medium transition-all duration-300 ${
+            isMobile
+              ? "w-24 py-2 px-4 rounded-l-lg"
+              : "w-8 h-24 writing-mode-vertical-rl rounded-l-lg"
+          }`}
+        >
+          Feedback
+        </button>
+        <Link
+          href={siteConfig.links.discord}
+          target="_blank"
+          className={`flex items-center bg-white shadow-lg overflow-hidden transition-all duration-300 ${
+            isOpen ? "w-56" : "w-0"
+          }`}
+        >
+          <div className="flex flex-col gap-1 p-4 whitespace-nowrap">
+            <span className="text-lg font-semibold text-tuatara-950">
+              Have feedback?
+            </span>
+            <div className="flex items-center items-center gap-1">
+              <span className="text-sm text-tuatara-950 leading-none font-sans">
+                Let us know on Discord
+              </span>
+              <Icons.discord className="w-4 h-4" />
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  )
+}

styles/globals.css

@@ -34,7 +34,7 @@
     --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
-    --anakiwa: 196 73% 97%
+    --anakiwa: 196 73% 97%;
   }
 
   .dark {
@@ -69,13 +69,18 @@
 
     --radius: 0.5rem;
   }
+
+  .writing-mode-vertical-rl {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+  }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
-  html{
+  html {
     @apply font-sans;
     text-rendering: geometricPrecision;
   }
@@ -87,11 +92,14 @@
   h2,
   h3,
   h4,
-  h5, h6 {
+  h5,
+  h6 {
     @apply font-bold font-display;
   }
 
-  #privacy, #scaling, #explorations{
+  #privacy,
+  #scaling,
+  #explorations {
     @apply fill-gray-900;
   }
 }
@@ -104,7 +112,7 @@
     @apply overflow-hidden !border !border-solid !border-tuatara-300 rounded-lg table-auto bg-white;
   }
 
-  table[data-component="table"] tr  {
+  table[data-component="table"] tr {
     @apply !divide-solid !divide-x !divide-tuatara-300;
   }
 
@@ -122,12 +130,10 @@
   }
 }
 
-
 .link {
   @apply border-b-2 border-transparent duration-200 ease-in-out hover:border-orange;
 }
 
-
 #howToApply a {
   @apply underline;
 }