Merge branch 'prod'

Author: tugcekucukoglu

components/doc/common/docsectionnav.js

@@ -3,8 +3,11 @@ import { DomHandler, ObjectUtils, classNames } from '@/components/lib/utils/Util
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { useContext } from 'react';
 
 export function DocSectionNav({ docs = [] }) {
+    const { darkMode } = useContext(AppContentContext);
     const router = useRouter();
     const [activeId, setActiveId] = useState(null);
     const navRef = useRef(null);
@@ -97,8 +100,29 @@ export function DocSectionNav({ docs = [] }) {
     };
 
     return (
-        <ul ref={navRef} className="doc-section-nav">
-            {docs.map((item) => createItem(item))}
-        </ul>
+        <div className="doc-section-nav-container">
+            <ul ref={navRef} className="doc-section-nav">
+                {docs.map((item) => createItem(item))}
+            </ul>
+            <div className="mt-8 p-3 w-full" style={{
+                border: '1px solid var(--surface-border)',
+                backgroundColor: 'var(--surface-0)',
+                borderRadius: '0.5rem',
+            }}>
+                <img src="https://primefaces.org/cdn/discount/primestore-summersale-2025-sm.jpg" className="w-full rounded-lg" alt="Summer Sale 2025" style={{
+                    borderRadius: '0.5rem',
+                }} />
+                <div className="text-xl font-semibold flex flex-column gap-2 text-center mt-4">
+                    <span style={{ lineHeight: 1 }}>SUMMER SALE</span>
+                    <span className="text-primary" style={{ lineHeight: 1 }}>2025</span>
+                </div>
+                <div className="text-center text-sm mt-4" style={{ color: 'var(--surface-500)', lineHeight: 1.5 }}>Use coupon code <b>PRSM25</b> at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.</div>
+                <span className="flex justify-content-center">
+                    <a className="p-button p-button-rounded p-button-sm font-bold mt-3 inline-flex" size="small" href="https://www.primefaces.org/blog/summer-sale-2025" target="_blank" rel="noopener">
+                        Learn More
+                    </a>
+                </span>
+            </div>
+        </div>
     );
 }

data/news.json

@@ -1,7 +1,7 @@
 {
-    "id": 53,
-    "content": "Introducing PrimeReact v11-alpha 🎉",
-    "linkText": "Discover Now",
-    "linkHref": "https://v11.primereact.org",
+    "id": 54,
+    "content": "Summer Sale is here 🏖️ Get 50% off with code PRSM25",
+    "linkText": "Learn More",
+    "linkHref": "https://www.primefaces.org/blog/summer-sale-2025",
     "target": "_blank"
 }

styles/layout/_doc.scss

@@ -19,7 +19,7 @@
     li {
         position: relative;
         z-index: 1;
-        
+
         button {
             background-color: transparent;
             border: 0 none;
@@ -177,21 +177,28 @@
     }
 }
 
-.doc-section-nav {
+.doc-section-nav-container {
     position: sticky;
     top: 6rem;
     right: 0;
     width: 14rem;
-    max-height: calc(100vh - 15rem);
-    list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
-    margin-left: 4rem;
-    overflow-y: auto;
-    overflow-x: hidden;
+    padding-block: 0.25rem;
+    padding-inline: 0;
+    margin-inline-start: 4rem;
+    display: flex;
+    flex-direction: column;
     align-self: flex-start;
+    max-height: calc(100vh - 14rem);
+}
 
-    > .navbar-item {
+.doc-section-nav {
+    list-style: none;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 0;
+
+    >.navbar-item {
         .navbar-item-content {
             border-left: 1px solid var(--surface-border);
             padding-left: .25rem;
@@ -204,7 +211,7 @@
     }
 
     .navbar-item {
-        > .navbar-item-content {
+        >.navbar-item-content {
             display: flex;
 
             .px-link {
@@ -249,9 +256,9 @@
     }
 }
 
-.doc-section-code { 
+.doc-section-code {
     position: relative;
-    
+
     div {
         &::-webkit-scrollbar {
             width: 5px;
@@ -283,7 +290,7 @@
     padding: 2px;
     backdrop-filter: blur(6px);
     border: 1px solid rgba(255, 255, 255, .1);
-    
+
     button {
         outline: 0 none;
         border-radius: 8px;

styles/layout/_responsive.scss

@@ -13,7 +13,7 @@
 }
 
 @media screen and (max-width: 1199px) {
-    .layout-topbar-inner {   
+    .layout-topbar-inner {
         padding-left: 2rem;
         padding-right: 2rem;
 
@@ -89,7 +89,7 @@
         }
     }
 
-    .doc-section-nav {
+    .doc-section-nav-container {
         display: none;
     }
 
@@ -174,4 +174,4 @@
             display: none;
         }
     }
-}
+}