chore: use remote search

src/assets/styles/components/menu.css

@@ -0,0 +1,147 @@
+menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .menu-primary {
+    position: absolute;
+    list-style: none;
+    padding: 0;
+    top: 0;
+    left: 0;
+    gap: 0;
+    margin-top: calc(var(--spacing-3xl) * 2.25);
+    flex-direction: column;
+    width: 100%;
+    z-index: 3;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      margin: 0;
+      padding: var(--spacing-sm) 0;
+      width: 100%;
+      color: var(--text-color);
+      background: var(--background-color);
+
+      & a {
+        text-decoration: none;
+      }
+
+      & .icon > svg,
+      & .active > svg {
+        display: none;
+      }
+
+      & .icon > span,
+      & .active > span {
+        display: inline;
+      }
+    }
+  }
+
+  #menu-toggle {
+    display: none;
+
+    &:checked + .menu-button-container {
+      .menu-closed {
+        display: none;
+      }
+
+      .menu-open {
+        display: block;
+      }
+    }
+
+    &:not(:checked) + .menu-button-container {
+      .menu-closed {
+        display: block;
+      }
+
+      .menu-open {
+        display: none;
+      }
+    }
+
+    & ~ .menu-primary li {
+      height: 0;
+      border: 0;
+      padding: 0;
+    }
+
+    &:checked ~ .menu-primary li {
+      border-bottom: var(--border-gray);
+      height: calc(var(--sizing-3xl) * 1.5);
+
+      &:first-child {
+        border-top: var(--border-gray);
+      }
+
+      & a,
+      & .active {
+        font-size: var(--font-size-lg);
+      }
+    }
+  }
+
+  .menu-button-container {
+    display: unset;
+    width: var(--sizing-svg-base);
+    height: var(--sizing-svg-base);
+
+    & svg {
+      cursor: pointer;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .menu-primary {
+      display: flex;
+      flex-direction: row;
+      margin: 0;
+      gap: var(--spacing-md);
+      position: relative;
+      top: unset;
+      left: unset;
+      width: auto;
+    }
+
+    .menu-primary > li {
+      width: auto;
+      height: auto;
+      padding: 0;
+      background: none;
+
+      & .icon > svg,
+      & .active > svg {
+        display: block;
+      }
+
+      & .icon > span,
+      & .active > span {
+        display: none;
+      }
+    }
+
+    #menu-toggle ~ .menu-primary li {
+      height: unset;
+      border: none;
+      padding: 0;
+    }
+
+    #menu-toggle:checked ~ .menu-primary li {
+      height: unset;
+      border: none;
+
+      &:first-child {
+        border: none;
+      }
+    }
+
+    .menu-button-container {
+      display: none;
+    }
+  }
+}