responsive navbar

src/app/_components/ThemeSwitch.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { Button } from "~/components/ui/button"
+import ThemeIcon from "./ThemeIcon"
+
+export function ThemeSwitch() {
+  const { setTheme, theme } = useTheme()
+  const toggleTheme = () => {
+    setTheme(theme == "dark" ? "light" : "dark")
+  }
+  return (
+    <>
+      <Button className="flex h-9 lg:h-full w-20 lg:w-12" variant="outline" size="icon" onClick={toggleTheme}>
+        <ThemeIcon activeTheme={theme}/>
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    </>
+  )
+}