sidebar-v2 (#2555)

Author: khadni

src/components/CCIP/Chain/Chain.astro

@@ -90,7 +90,7 @@ const searchLanes = getSearchLanes({ environment })
 <style scoped="false">
   .layout {
     --gutter: var(--space-10x);
-    --doc-padding: var(--space-6x);
+    --doc-padding: var(--space-4x);
     margin: var(--space-8x) auto;
     display: flex;
     flex-direction: column;
@@ -126,7 +126,7 @@ const searchLanes = getSearchLanes({ environment })
 
   @media (min-width: 50em) {
     .layout {
-      max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+      max-width: min(calc(1440px - 2 * var(--space-4x)), calc(100% - 2 * var(--space-4x)));
       padding: 0;
     }
   }

src/components/DocsNavigation/DocsNavigationDesktop/docsNavigationDesktop.module.css

@@ -21,8 +21,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: auto;
-  max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+  margin: 0 auto;
+  max-width: min(calc(1505px - 2 * var(--space-4x)), calc(100% - 2 * var(--space-4x)));
+  padding: 0 var(--space-4x);
+  width: 100%;
 }
 
 .left {

src/components/DocsNavigation/DocsNavigationMobile/Category.tsx

@@ -51,7 +51,11 @@ const Item = React.forwardRef<HTMLAnchorElement, ListItemProps>(
         {itemComponent}
       </button>
     ) : (
-      <a className={clsx(styles.link, "product-link")} href={href} ref={forwardedRef}>
+      <a
+        className={clsx(styles.link, "product-link")}
+        href={href.startsWith("http") ? href : `/${href}`}
+        ref={forwardedRef}
+      >
         {itemComponent}
       </a>
     )

src/components/DocsNavigation/DocsNavigationMobile/SubProductContent.tsx

@@ -12,9 +12,9 @@ type Props = {
   currentPath: string
 }
 
-const renderPages = (pages: Page[], currentPath: string, indent: boolean) => {
+const renderPages = (pages: Page[], currentPath: string, level = 0) => {
   return pages.map(({ label, href, children }) => {
-    const adjustedHref = "/" + href
+    const adjustedHref = href.startsWith("http") ? href : `/${href}`
     const isActive = currentPath.replace(/\/$/, "") === adjustedHref.replace(/\/$/, "")
 
     const linkRef = useRef<HTMLAnchorElement>(null)
@@ -29,15 +29,19 @@ const renderPages = (pages: Page[], currentPath: string, indent: boolean) => {
       backgroundColor: isActive ? "var(--blue-100)" : "transparent",
       color: isActive ? "var(--blue-600)" : "inherit",
       fontWeight: isActive ? "500" : "normal",
-      marginLeft: indent ? "20px" : "0",
     }
 
     return (
       <React.Fragment key={label}>
-        <a ref={linkRef} style={linkStyle} className={`${styles.link} subproduct-link`} href={adjustedHref}>
+        <a
+          ref={linkRef}
+          style={linkStyle}
+          className={`${styles.link} subproduct-link level-${level}`}
+          href={adjustedHref}
+        >
           {label}
         </a>
-        {children && renderPages(children, currentPath, true)}
+        {children && renderPages(children, currentPath, level + 1)}
       </React.Fragment>
     )
   })
@@ -57,7 +61,7 @@ export const SubProductContent = ({ subProducts, onSubproductClick, currentPath
       {subProducts.items.map(({ label, pages }) => (
         <div key={label}>
           <h3 className={styles.section}>{label}</h3>
-          {pages && renderPages(pages, currentPath, false)}
+          {pages && renderPages(pages, currentPath, 1)}
         </div>
       ))}
     </>

src/components/DocsNavigation/DocsNavigationMobile/docsNavigationMobile.module.css

@@ -20,8 +20,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: auto;
-  max-width: calc(100% - 2 * var(--space-6x));
+  max-width: 100%;
+  padding: 0 var(--space-6x);
   height: var(--space-6x);
 }
 
@@ -55,6 +55,10 @@
 
 @media screen and (min-width: 768px) {
   .container {
-    max-width: calc(100% - 2 * var(--space-8x));
+    max-width: calc(100% - 2 * var(--space-6x));
+  }
+  .DocsPickerContainer {
+    max-width: 100%;
+    padding: 0 var(--space-6x);
   }
 }

src/components/DocsNavigation/DocsNavigationMobile/productNavigation.module.css

@@ -81,6 +81,38 @@
   width: 100vw;
   padding-bottom: 56px;
 }
+
+/* Nested level styles with margin-based indentation */
+.productContent :global(.level-1),
+.subProductContent :global(.level-1) {
+  margin-left: var(--space-0x);
+}
+
+.productContent :global(.level-2),
+.subProductContent :global(.level-2) {
+  margin-left: var(--space-4x);
+}
+
+.productContent :global(.level-3),
+.subProductContent :global(.level-3) {
+  margin-left: var(--space-8x);
+}
+
+.productContent :global(.level-4),
+.subProductContent :global(.level-4) {
+  margin-left: var(--space-12x);
+}
+
+.productContent :global(.level-5),
+.subProductContent :global(.level-5) {
+  margin-left: var(--space-16x);
+}
+
+.productContent :global(.level-6),
+.subProductContent :global(.level-6) {
+  margin-left: var(--space-20x);
+}
+
 .subProductContent {
   display: flex;
   flex-direction: column;

src/components/Header/Nav/navBar.module.css

@@ -1,10 +1,24 @@
+/* 
+ * Navigation bar styles
+ * 
+ * The navigation uses a fixed header with blur effect and contains:
+ * 1. Logo section (left)
+ * 2. Menu section (center)
+ * 3. Right section with actions
+ * 
+ * Responsive breakpoints:
+ * - Mobile: < 992px
+ * - Desktop: >= 992px
+ */
+
 .header {
   position: absolute;
   z-index: 10;
   top: 0;
   width: 100%;
 }
 
+/* Main navigation bar with blur effect */
 .navBar {
   position: fixed;
   width: 100%;
@@ -16,18 +30,22 @@
   transition: transform 0.3s ease-in-out;
 }
 
+/* Variant without shadow for special cases */
 .noShadow {
   box-shadow: none;
   border-bottom: none;
 }
 
+/* Main content container with responsive width */
 .container {
-  composes: container from global;
+  max-width: min(calc(1505px - 2 * var(--space-4x)), calc(100% - 2 * var(--space-4x)));
+  margin: 0 auto;
+  padding: 0 var(--space-4x);
+  width: 100%;
   position: relative;
   display: flex;
   justify-content: space-between;
   padding-block: var(--space-0x);
-  width: auto;
   height: var(--space-16x);
   gap: var(--space-3x);
 }
@@ -38,7 +56,7 @@
 }
 
 .isHomepage {
-  max-width: calc(100% - 2 * var(--space-8x));
+  max-width: min(1505px, calc(100% - 2 * var(--space-16x)));
 }
 
 .headerHidden {
@@ -278,11 +296,12 @@
 
 @media screen and (max-width: 992px) {
   .container {
+    max-width: 100%;
+    padding: 0 var(--space-6x);
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-block: var(--space-4x);
     height: var(--space-16x);
   }
 
@@ -308,7 +327,9 @@
 }
 
 @media screen and (min-width: 72rem) {
-  .isHomepage {
-    max-width: min(1200px, calc(100% - 2 * var(--space-16x)));
+  .container:not(.isHomepage) {
+    max-width: min(calc(1505px - 2 * var(--space-4x)), calc(100% - 2 * var(--space-4x)));
+    margin: 0 auto;
+    padding: 0 var(--space-4x);
   }
 }