Migrate to Next

components/Nav.module.css

@@ -0,0 +1,262 @@
+.block {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  transform: translate3d(0, calc(-100% + 3rem), 0);
+  transition: transform 0.3s ease-in-out 0s,
+    background-color 0.3s ease-in-out 0s;
+  z-index: 10;
+}
+
+.isexpanded {
+  transform: none;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+    "nav nav nav"
+    "home links menu";
+  grid-template-columns: max-content 1fr max-content;
+  grid-template-rows: 1fr max-content;
+  height: 100%;
+  max-width: var(--page-max-width);
+  margin-inline: auto;
+}
+
+.isexpanded .container {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.home {
+  display: flex;
+  grid-area: home;
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  grid-area: menu;
+  height: 3rem;
+  margin-inline: var(--spacing-sm);
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-area: links;
+}
+
+.nav {
+  grid-area: nav;
+}
+
+.homelink {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding-inline: var(--spacing-md);
+}
+
+.homelink:focus {
+  outline: 2px solid var(--color-white);
+  outline-offset: -2px;
+}
+
+.homeicontop,
+.homeiconbottom {
+  display: flex;
+  width: 24px;
+  height: 12px;
+}
+
+.homeicontop path:first-of-type {
+  fill: var(--color-primary);
+}
+
+.homeicontop path:last-of-type {
+  fill: var(--color-secondary);
+}
+
+.homeiconbottom {
+  transform: rotate(180deg);
+}
+
+.homeiconbottom path:first-of-type {
+  fill: var(--color-dark);
+}
+
+.homeiconbottom path:last-of-type {
+  fill: var(--color-secondary);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.listitem {
+  position: relative;
+}
+
+.listitem:focus-within .sublist,
+.listitem:hover .sublist {
+  display: block;
+}
+
+.sublist {
+  margin: 0 0 0 var(--spacing-sm);
+  padding: 0;
+  list-style: none;
+}
+
+.link {
+  display: flex;
+  color: var(--color-white);
+  text-decoration: none;
+  padding: var(--spacing-sm);
+}
+
+.link:focus {
+  outline: 2px solid var(--color-white);
+  outline-offset: -2px;
+}
+
+.menubutton {
+  position: relative;
+  display: block;
+  height: 32px;
+  width: 24px;
+  background-color: transparent;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border: 0;
+  cursor: pointer;
+}
+
+.menubutton:focus {
+  outline: 2px solid var(--color-white);
+  outline-offset: -2px;
+}
+
+.topbar,
+.middlebar,
+.bottombar {
+  position: absolute;
+  right: 4px;
+  left: 4px;
+  border-top: 3px solid var(--color-white);
+  backface-visibility: hidden;
+}
+
+.topbar {
+  top: 5px;
+  transition: 0.55s 0.5s;
+}
+
+.isexpanded .topbar {
+  transform: translate3d(0, 10px, 0) rotate(50deg);
+}
+
+.middlebar {
+  top: 15px;
+  transition: opacity 1s ease-in;
+}
+
+.isexpanded .middlebar {
+  opacity: 0;
+}
+
+.bottombar {
+  top: 25px;
+  transition: 0.55s 0.5s;
+}
+
+.isexpanded .bottombar {
+  transform: translate3d(0, -10px, 0) rotate(-410deg);
+}
+
+@media (max-width: 29.999em) {
+  .transform {
+    transform: translate3d(-100%, 0, 0);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .transform:nth-child(1) {
+    transition-delay: 0.15s;
+  }
+
+  .transform:nth-child(2) {
+    transition-delay: 0.25s;
+  }
+
+  .transform:nth-child(3) {
+    transition-delay: 0.35s;
+  }
+
+  .transform:nth-child(4) {
+    transition-delay: 0.45s;
+  }
+
+  .transform:nth-child(5) {
+    transition-delay: 0.55s;
+  }
+
+  .isexpanded .transform {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (min-width: 30em) {
+  .block {
+    position: absolute;
+    bottom: auto;
+    transform: none;
+  }
+
+  .container {
+    grid-template-areas: "home nav links";
+    grid-template-columns: max-content 1fr max-content;
+  }
+
+  .menu {
+    height: auto;
+  }
+
+  .menubutton {
+    display: none;
+  }
+
+  .nav {
+    display: flex;
+  }
+
+  .list {
+    flex-direction: row;
+  }
+
+  .listitem {
+    display: flex;
+  }
+
+  .sublist {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    transform: translateY(100%);
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(2px);
+  }
+
+  .link {
+    font-size: var(--font-size-sm);
+    padding: var(--spacing-xs);
+  }
+}