Add id attribute for menu (#143)

* add `addId` function

* add ids into  toArray method

* add `addId` into README

* add `addId` function into HasHtmlAttributes

* Update README.md

* add ids into mergeWith

* add parent id

* Fix styling

* Update README.md

* Change signatures of id in src/Html/Attributes.php

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* Change signatures of id in src/Html/Attributes.php

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* Change signatures of id in src/Traits/HasHtmlAttributes.php

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* Change signatures of id in src/Traits/HasParentAttributes.php

Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

* change ids to id in Attributes

* change addId to id

* add `id` method into HasHtmlAttributes and HasParentAttributes

* Update README.md

---------

Co-authored-by: milwad-dev <milwad-dev@users.noreply.github.com>
Co-authored-by: Freek Van der Herten <freek@spatie.be>
Co-authored-by: Sebastian De Deyne <sebastiandedeyne@gmail.com>

Author: 3 people

README.md

@@ -95,6 +95,26 @@ Menu::new()
 </div
 ```
 
+## Adding id to elements
+
+You can add id, so you can easily target some of these elements with CSS or JS.
+
+```php
+Menu::new()
+    ->id('navigation')
+    ->add(Link::to('/', 'Home')->id('home-link'))
+    ->add(Link::to('/about', 'About'))
+    ->add(Link::to('/contact', 'Contact'))
+```
+
+```html
+<ul id="navigation">
+    <li><a href="/" id="home-link">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/contact">Contact</a></li>
+</ul>
+```
+
 ## Not Afraid of Depths
 
 The menu supports submenus, which in turn can be nested infinitely.

src/HasHtmlAttributes.php

@@ -9,4 +9,6 @@ public function setAttribute(string $attribute, string $value = ''): static;
     public function setAttributes(array $attributes): static;
 
     public function addClass(string $class): static;
+
+    public function id(?string $id): static;
 }

src/HasParentAttributes.php

@@ -17,4 +17,6 @@ public function setParentAttribute(string $attribute, string $value = ''): stati
     public function setParentAttributes(array $attributes): static;
 
     public function addParentClass(string $class): static;
+
+    public function parentId(?string $id): static;
 }

src/Html/Attributes.php

@@ -8,6 +8,8 @@ class Attributes
 
     protected array $classes = [];
 
+    protected ?string $id = null;
+
     public function __construct(array $attributes = [])
     {
         $this->setAttributes($attributes);
@@ -59,10 +61,18 @@ public function addClass(string | array $class): self
         return $this;
     }
 
+    public function id(?string $id): self
+    {
+        $this->id = $id;
+
+        return $this;
+    }
+
     public function mergeWith(self $attributes): self
     {
         $this->attributes = array_merge($this->attributes, $attributes->attributes);
         $this->classes = array_merge($this->classes, $attributes->classes);
+        $this->id = $this->id ?: $attributes->id;
 
         return $this;
     }
@@ -74,11 +84,14 @@ public function isEmpty(): bool
 
     public function toArray(): array
     {
-        if (empty($this->classes)) {
+        if (empty($this->classes) || empty($this->id)) {
             return $this->attributes;
         }
 
-        return array_merge($this->attributes, ['class' => implode(' ', $this->classes)]);
+        return array_merge($this->attributes, [
+            'class' => implode(' ', $this->classes),
+            'id' => implode(' ', $this->id),
+        ]);
     }
 
     public function toString(): string

src/Traits/HasHtmlAttributes.php

@@ -29,4 +29,11 @@ public function addClass(string $class): static
 
         return $this;
     }
+
+    public function id(?string $id): static
+    {
+        $this->htmlAttributes->id($id);
+
+        return $this;
+    }
 }

src/Traits/HasParentAttributes.php

@@ -40,4 +40,11 @@ public function addParentClass(string $class): static
 
         return $this;
     }
+
+    public function parentId(?string $id): static
+    {
+        $this->parentAttributes->id($id);
+
+        return $this;
+    }
 }