feat(navigation): Add navigation component and styles

- Implemented a new navigation component in Twig for rendering navigation items.
- Added CSS styles for navigation layout and hover effects.
- Updated CatchAllController to fetch navigation data and pass it to the template.
- Refactored header template to include the navigation component within a grid layout.

Author: fmontes

examples/dotcms-symfony/assets/styles/app.css

@@ -1,7 +1,3 @@
-body {
-    background-color: skyblue;
-}
-
 /* Grid System */
 .row {
     display: grid;
@@ -35,3 +31,37 @@ body {
 .col-end-11 { grid-column-end: 11; }
 .col-end-12 { grid-column-end: 12; }
 .col-end-13 { grid-column-end: 13; }
+
+/* Navigation styles */
+nav ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav > ul > li {
+    position: relative;
+    margin-right: 1rem;
+}
+
+nav ul ul {
+    display: none;
+    position: absolute;
+    padding: 0.5rem;
+    z-index: 100;
+    flex-direction: column;
+    min-width: 200px;
+}
+
+nav ul li:hover > ul {
+    display: flex;
+}
+
+nav ul ul li {
+    margin: 0.25rem 0;
+}
+
+header .grid {
+    align-items: center;
+}

examples/dotcms-symfony/src/Controller/CatchAllController.php

@@ -32,12 +32,16 @@ public function show(string $path = ''): Response
             if (!$pageAsset || !isset($pageAsset->page)) {
                 throw new NotFoundHttpException('Page not found');
             }
+            
+            // Get navigation with depth of 2 (top level + one level of children)
+            $navigation = $this->dotCMSService->getNavigation('/', 2);
 
             return $this->render('page.html.twig', [
                 'pageAsset' => $pageAsset,
                 'layout' => $pageAsset->layout ?? null,
                 'page' => $pageAsset->page ?? null,
-                'containers' => $pageAsset->containers ?? []
+                'containers' => $pageAsset->containers ?? [],
+                'navigation' => $navigation
             ]);
         } catch (HttpException $e) {
             // Map HTTP errors to appropriate Symfony exceptions

examples/dotcms-symfony/src/Service/DotCMSService.php

@@ -4,6 +4,7 @@
 
 use Dotcms\PhpSdk\DotCMSClient;
 use Dotcms\PhpSdk\Model\PageAsset;
+use Dotcms\PhpSdk\Model\NavigationItem;
 
 class DotCMSService
 {
@@ -27,4 +28,19 @@ public function getPage(string $path): PageAsset
 
         return $this->client->getPage($pageRequest);
     }
+    
+    /**
+     * Get navigation items from DotCMS
+     *
+     * @param string $path The root path to begin traversing the folder tree
+     * @param int $depth The depth of the folder tree to return
+     * @param int $languageId The language ID of content to return
+     * @return NavigationItem The navigation item with optional children
+     */
+    public function getNavigation(string $path = '/', int $depth = 1, int $languageId = 1): NavigationItem
+    {
+        $navRequest = $this->client->createNavigationRequest($path, $depth, $languageId);
+        
+        return $this->client->getNavigation($navRequest);
+    }
 }

examples/dotcms-symfony/templates/dotcms/components/navigation.twig

@@ -0,0 +1,21 @@
+{# Navigation component for DotCMS #}
+<nav class="container">
+    <ul>
+        {% if navigation is defined and navigation is not null %}
+            {% for item in navigation.children %}
+                <li>
+                    <a href="{{ item.href }}" target="{{ item.target }}">{{ item.title }}</a>
+                    {% if item.children is defined and item.children is not empty %}
+                        <ul>
+                            {% for child in item.children %}
+                                <li>
+                                    <a href="{{ child.href }}" target="{{ child.target }}">{{ child.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        {% endif %}
+    </ul>
+</nav> 

examples/dotcms-symfony/templates/dotcms/header.twig

@@ -1,3 +1,10 @@
-<header class="container" style="background-color: rgba(0, 0, 0, 0.5); text-align: center;">
-    <h1>{{ pageAsset.page.title }}</h1>
+<header class="container">
+    <div class="grid">
+        <div>
+            <h1>{{ pageAsset.page.title }}</h1>
+        </div>
+        <div>
+            {% include 'dotcms/components/navigation.twig' with { 'navigation': navigation } %}
+        </div>
+    </div>
 </header>