@brillout/docpress 0.12.6 → 0.13.0

package/Layout.tsx

@@ -342,7 +342,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
             maxWidth: navMaxWidth,
             margin: 'auto',
             height: 'var(--nav-head-height)',
-            fontSize: `min(16.96px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
+            fontSize: `min(15.2px, ${isProjectNameShort(projectName) ? '4.8cqw' : '4.5cqw'})`,
             color: '#666',
             ['--icon-text-padding']: 'min(8px, 1.8cqw)',
             display: 'flex',
@@ -398,7 +398,7 @@ function NavHead({ isNavLeft }: { isNavLeft?: true }) {
 }
 @container container-nav-head (min-width: ${containerQueryMobileNav + 150}px) {
   .nav-head-content {
-    --padding-side: 35px;
+    --padding-side: 25px;
   }
 }
 @media(max-width: ${containerQueryMobileNav}px) {
@@ -539,7 +539,7 @@ function MenuToggleMain(props: PropsDiv) {
       </span>
       <Style>{css`
 @media(max-width: ${containerQueryMobileNav}px) {
-  .text-docs {
+  .text-docs, .caret-icon {
     display: none !important;
   }
 }
@@ -586,6 +586,14 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     >
       <Style>{getAnimation()}</Style>
       {props.children}
+      <CaretIcon
+        style={{
+          width: 11,
+          marginLeft: 10,
+          flexShrink: 0,
+          color: '#888',
+        }}
+      />
     </div>
   )
 
@@ -614,15 +622,53 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
     transition: top 0.4s ease !important;
     z-index: -1;
   }
+  & .caret-icon-left,
+  & .caret-icon-right {
+    transition: transform .4s cubic-bezier(.4,0, .2, 1);
+  }
+  & .caret-icon-left {
+    transform-origin: 25% 50%;
+  }
+  & .caret-icon-right {
+    transform-origin: 75% 50%;
+  }
 }
     `
   }
 }
+function CaretIcon({ style }: { style: React.CSSProperties }) {
+  return (
+    // - Inspired by stripe.com
+    // - Alternative caret SVGs: https://gist.github.com/brillout/dbf05e1fb79a34169cc2d0d5eaf58c01
+    // - The rounded caret (`caret.svg`) doesn't look nice when flipped:
+    // -   https://github.com/brillout/docpress/commit/0ff937d8caf5fc439887ef495e2d2a700234dfb1
+    // - https://github.com/brillout/docpress/pull/39
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 9.24 5.858"
+      style={{
+        overflow: 'visible',
+        ...style,
+      }}
+      className="caret-icon"
+    >
+      <g className="caret-icon-left">
+        <path
+          fill="currentColor"
+          d="m4.001 5.24.619.618 1.237-1.237-.618-.619L4 5.241zm-4-4 4 4L5.24 4.001l-4-4L0 1.241z"
+        ></path>
+      </g>
+      <g className="caret-icon-right">
+        <path fill="currentColor" d="m5.239 5.239-.619.618L3.383 4.62l.618-.619L5.24 5.24Zm4-4-4 4L4 4l4-4z"></path>
+      </g>
+    </svg>
+  )
+}
 function DocsIcon() {
   return (
     <img
       src={iconBooks}
-      width={21}
+      width={18}
       style={{ marginRight: 'calc(var(--icon-text-padding) + 2px)' }}
       className="decolorize-5"
     />

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -135,6 +135,12 @@ ${/* Button style */ ''}
     &::before {
       top: 0;
     }
+    & .caret-icon-left {
+      transform: rotate(-90deg);
+    }
+    & .caret-icon-right {
+      transform: rotate(90deg);
+    }
   }
 }
 `

package/docsearch/SearchLink.tsx

@@ -32,7 +32,7 @@ function SearchIcon() {
   return (
     <img
       src={iconMagnifyingGlass}
-      width={21}
+      width={18}
       style={{ marginRight: 'var(--icon-text-padding)' }}
       className="decolorize-7"
     />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",