feat(web): responsive header

akorzunin · Aug 8, 2024 · 0a19f0d · 0a19f0d
1 parent 5686075
commit 0a19f0d
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 37 deletions.
diff --git a/web/src/components/BurgerMenu.tsx b/web/src/components/BurgerMenu.tsx
@@ -0,0 +1,23 @@
+import { Button } from "../shadcn/ui/button";
+import { RxHamburgerMenu } from "react-icons/rx";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../shadcn/ui/dropdown-menu";
+import { MenuButtons } from "./MenuButtons";
+
+export const BurgerMenu = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={"outline"}>
+          <RxHamburgerMenu className="" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="m-2 grid h-auto gap-y-3 p-4">
+        <MenuButtons />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -1,38 +1,17 @@
-import { FaDownload, FaGithubAlt, FaItchIo, FaSteam } from "react-icons/fa";
-import { Button } from "../shadcn/ui/button";
-import { ModeToggle } from "../shadcn/ui/mode-toggle";
+import { BurgerMenu } from "./BurgerMenu";
+import { MenuButtons } from "./MenuButtons";
 
 export const Header = () => {
   return (
     <div className="flex justify-between bg-secondary p-6">
       <h2 className="mt-10 scroll-m-20 justify-items-start pb-2 text-3xl font-semibold tracking-tight text-primary-foreground transition-colors first:mt-0">
         SuperIcosahedron
       </h2>
-      <div className="flex gap-3">
-        <Button asChild>
-          <a href="/download/">
-            <FaDownload />
-            &nbsp;Download
-          </a>
-        </Button>
-        <Button asChild>
-          <a
-            href="https://github.com/akorzunin/SuperIcosahedron"
-            target="_blank"
-          >
-            <FaGithubAlt />
-            &nbsp;Source code
-          </a>
-        </Button>
-        <Button disabled>
-          <FaSteam />
-          &nbsp;Steam
-        </Button>
-        <Button disabled>
-          <FaItchIo />
-          &nbsp;Itch
-        </Button>
-        <ModeToggle />
+      <div className="hidden gap-3 md:flex">
+        <MenuButtons />
+      </div>
+      <div className="flex md:hidden">
+        <BurgerMenu />
       </div>
     </div>
   );

diff --git a/web/src/components/MenuButtons.tsx b/web/src/components/MenuButtons.tsx
@@ -0,0 +1,31 @@
+import { Button } from "../shadcn/ui/button";
+import { FaDownload, FaGithubAlt, FaSteam, FaItchIo } from "react-icons/fa";
+import { ModeToggle } from "../shadcn/ui/mode-toggle";
+
+export const MenuButtons = () => {
+  return (
+    <>
+      <Button asChild>
+        <a href="/download/">
+          <FaDownload />
+          &nbsp;Download
+        </a>
+      </Button>
+      <Button asChild>
+        <a href="https://github.com/akorzunin/SuperIcosahedron" target="_blank">
+          <FaGithubAlt />
+          &nbsp;Source code
+        </a>
+      </Button>
+      <Button disabled>
+        <FaSteam />
+        &nbsp;Steam
+      </Button>
+      <Button disabled>
+        <FaItchIo />
+        &nbsp;Itch
+      </Button>
+      <ModeToggle />
+    </>
+  );
+};
diff --git a/web/src/index.css b/web/src/index.css
@@ -8,7 +8,8 @@
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
+    /* slate-100 */
+    --popover: 210 40% 96%;
     --popover-foreground: 222.2 84% 4.9%;
     /* sky-200 */
     --primary: 201 94% 86%;
@@ -26,7 +27,7 @@
     --destructive: 0 84.2% 60.2%;
     /* slate-50 */
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
+    --border: 0.5rem;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
@@ -44,25 +45,30 @@
     --card: 222.2 84% 4.9%;
     /* slate-50 */
     --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
+    /* sky-950 */
+    --popover: 204 80% 16%;
     /* slate-50 */
     --popover-foreground: 210 40% 98%;
     /* sky-900 */
     --primary: 202 80% 24%;
     --primary-foreground: 201 94% 86%;
-    --secondary: 217.2 32.6% 17.5%;
+    /* sky-950 */
+    --secondary: 204 80% 16%;
     /* slate-50 */
     --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
+    /* sky-950 */
+    --muted: 204 80% 16%;
     --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
+    /* sky-950 */
+    --accent: 204 80% 16%;
     /* slate-50 */
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;
     /* slate-50 */
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --border: 0.5rem;
+    /* sky-900 */
+    --input: 202 80% 24%;
     --ring: 212.7 26.8% 83.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;

diff --git a/web/src/shadcn/ui/button.tsx b/web/src/shadcn/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-primary hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-trnsparent hover:bg-primary hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",