add desktop breakpoint and adjust navbar textsize

hannahmcg · Feb 6, 2024 · 0f32972 · 0f32972
1 parent 9590435
commit 0f32972
Show file tree

Hide file tree

Showing 230 changed files with 5,078 additions and 4,321 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.history/components/Nav_20240205230419.js b/.history/components/Nav_20240205230419.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h5"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-6 w-6" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-6 w-6" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240205230536.js b/.history/components/Nav_20240205230536.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-6 w-6" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-6 w-6" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240205230541.js b/.history/components/Nav_20240205230541.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-md p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-6 w-6" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-6 w-6" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240205230545.js b/.history/components/Nav_20240205230545.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-sm p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-6 w-6" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-6 w-6" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}