@claralight-design/abweb-navbar 0.1.3 → 0.2.0

package/NavHeader.module.css

@@ -22,14 +22,14 @@
 }
 
 .inner {
-    width: calc(100% - 12px);
-    max-width: calc(1200px - 12px);
+    width: calc(100% + 32px);
+    max-width: calc(1200px + 32px);
     position: relative;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     overflow: hidden;
-    padding: 3px 6px;
+    padding: 3px 6px 6px;
     border-radius: 48px;
     gap: 12px;
     transform: translateY(0);
@@ -41,12 +41,14 @@
     corner-shape: unset;
     will-change: transform;
     box-sizing: border-box;
+
+    --backdrop-filter: blur(12px) saturate(1.05);
 }
 
 .blurEffect {
     position: absolute;
     inset: -10px 0 auto;
-    height: 60px;
+    height: 72px;
     width: 120vw;
     z-index: 0;
     pointer-events: none;
@@ -70,17 +72,6 @@
     order: 3;
 }
 
-.right {
-    gap: 8px;
-}
-
-.rightSlot {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-}
-
 .centerColumn {
     min-width: 0;
     display: flex;
@@ -201,7 +192,6 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: color-mix(in srgb, var(--color-text) 72%, transparent);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -214,22 +204,28 @@
     font-family: inherit;
     font-size: 15px;
     font-weight: 600;
+    color: var(--color-text);
+    opacity: 0.7;
 }
 
 .navLink:hover,
 .logotypeWrapper:hover {
     background: color-mix(in srgb, var(--color-text) 8%, transparent);
-    color: var(--color-text);
+    opacity: 1;
+    backdrop-filter: var(--backdrop-filter);
 }
 
 .navLink:active,
 .logotypeWrapper:active {
+    opacity: 0.55;
     transform: scale(0.96);
 }
 
 .navLinkActive {
     color: var(--color-text);
     background: color-mix(in srgb, var(--color-text) 10%, transparent);
+    opacity: 0.8;
+    backdrop-filter: var(--backdrop-filter);
 }
 
 .desktopLabel {
@@ -240,7 +236,7 @@
 }
 
 .desktopLabel svg {
-    max-height: 13px;
+    max-height: 12px;
 }
 
 .mobileMenu {
@@ -384,6 +380,14 @@
     color: var(--color-text);
 }
 
+.dividingLine {
+    height: 12px;
+    width: 2px;
+    border-radius: 2px;
+    background-color: var(--color-text);
+    opacity: 0.4;
+}
+
 @media (min-width: 960px) {
     .desktopNav {
         display: flex;
@@ -396,7 +400,8 @@
 
 @media (max-width: 959px) {
     .inner {
-        grid-template-columns: auto minmax(0, 1fr) auto auto;
+        display: flex;
+        width: calc(100% - 14px);
     }
 
     .slide {
@@ -417,6 +422,11 @@
 
     .centerColumn {
         justify-content: center;
+        width: 100%;
+    }
+
+    .dividingLine {
+        display: none;
     }
 }
 
@@ -430,4 +440,4 @@
     .menuItemMarker {
         transition: none;
     }
-}
+}

package/NavHeader.tsx

@@ -30,7 +30,6 @@ export type NavHeaderProps = {
     showHeaderBlur?: boolean
     navItems?: NavHeaderItem[]
     leftSlot?: React.ReactNode
-    rightSlot?: React.ReactNode
     logo?: React.ReactNode
     brandName?: string
     homeHref?: string
@@ -158,7 +157,6 @@ const NavHeader: React.FC<NavHeaderProps> = ({
     showHeaderBlur = true,
     navItems = [],
     leftSlot,
-    rightSlot,
     logo,
     brandName = 'Brand',
     homeHref = '/',
@@ -283,6 +281,8 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                     </div>
 
                     {hasNavItems && (
+                        <>
+                        <span className={styles.dividingLine} />
                         <nav
                             className={styles.desktopNav}
                             aria-label={resolvedLabels.menu}
@@ -313,11 +313,9 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                                 })}
                             </div>
                         </nav>
+                        </>
                     )}
                 </div>
-                <div className={cx(styles.column, styles.right)}>
-                    {rightSlot && <div className={styles.rightSlot}>{rightSlot}</div>}
-                </div>
             </header>
         </div>
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claralight-design/abweb-navbar",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "A react components for AstroBox websites.",
   "scripts": {
     "dev": "vite",