docyard 0.7.0 → 0.9.0

data/lib/docyard/templates/assets/css/components/nav-menu.css

@@ -0,0 +1,237 @@
+/* Nav Menu - Mobile dropdown navigation */
+
+.nav-menu-btn {
+  display: none;
+}
+
+/* Overlay */
+.nav-menu-overlay {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--overlay-bg);
+  backdrop-filter: blur(var(--overlay-blur));
+  z-index: var(--z-dropdown);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.nav-menu-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Dropdown container */
+.nav-menu-dropdown {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  z-index: calc(var(--z-dropdown) + 1);
+  transform: translateY(-8px);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+  box-shadow: var(--shadow-lg);
+}
+
+.nav-menu-dropdown.is-open {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.nav-menu-content {
+  max-width: var(--layout-max-width);
+  margin: 0 auto;
+  padding: var(--spacing-1) 0;
+}
+
+/* Navigation items */
+.nav-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  padding: var(--spacing-2) var(--spacing-4);
+  margin: 0 var(--spacing-2);
+  width: calc(100% - var(--spacing-4));
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+.nav-menu-item:hover {
+  background: var(--muted);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+/* Active state */
+.nav-menu-item.is-active {
+  background-color: oklch(from var(--primary) l c h / 10%);
+  color: var(--primary);
+}
+
+.nav-menu-item.is-active:hover {
+  background-color: oklch(from var(--primary) l c h / 10%);
+  color: var(--primary);
+}
+
+.nav-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.nav-menu-item-icon .docyard-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.nav-menu-item.is-active .nav-menu-item-icon {
+  opacity: 1;
+}
+
+.nav-menu-item-text {
+  flex: 1;
+}
+
+.nav-menu-item-external {
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  opacity: 0.4;
+  flex-shrink: 0;
+}
+
+/* Divider */
+.nav-menu-divider {
+  height: 1px;
+  background: var(--border);
+  margin: var(--spacing-2) var(--spacing-4);
+}
+
+/* CTAs in dropdown */
+.nav-menu-ctas {
+  display: flex;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+.nav-menu-cta {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.nav-menu-cta:hover {
+  text-decoration: none;
+}
+
+.nav-menu-cta--secondary {
+  background: transparent;
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.nav-menu-cta--secondary:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.nav-menu-cta--secondary:active {
+  opacity: 0.8;
+}
+
+.nav-menu-cta--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.nav-menu-cta--primary:hover {
+  background: oklch(from var(--primary) calc(l - 0.05) c h);
+  color: var(--primary-foreground);
+}
+
+.nav-menu-cta--primary:active {
+  background: oklch(from var(--primary) calc(l - 0.08) c h);
+}
+
+.nav-menu-cta-arrow {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.nav-menu-cta--primary:hover .nav-menu-cta-arrow {
+  transform: translateX(3px);
+}
+
+/* Show on mobile only */
+@media (max-width: 1024px) {
+  .nav-menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    color: var(--muted-foreground);
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    transition: background-color 0.1s ease, color 0.1s ease;
+  }
+
+  .nav-menu-btn:hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+
+  .nav-menu-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring);
+  }
+
+  .nav-menu-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .nav-menu-overlay,
+  .nav-menu-dropdown,
+  .nav-menu-item,
+  .nav-menu-cta,
+  .nav-menu-cta-arrow {
+    transition: none;
+  }
+}