docs: enhance custom elements readme

Signed-off-by: Kai Henseler <[email protected]>
IONOS-Productivity · Aug 19, 2024 · 976102a · 976102a
1 parent f11cc11
commit 976102a
Showing 1 changed file with 106 additions and 11 deletions.
diff --git a/IONOS/README.md b/IONOS/README.md
@@ -2,36 +2,131 @@
 
 as a Custom Element written in Svelte for convenience. Targeted to be used as Header for Easystorage as part of a custom Nextcloud theme (`/themes`).
 
-## Usage
+## 🚚 Available Elements
 
-### Activate Theme
+### 🏠 Header
+
+#### ⚙️ Attributes
+
+-   `home_src` => The link the logo is supposed to use
+
+#### 🎰 Slots
+
+-   `webmail` => links to peer products
+-   `usermenu` => see [Usermenu](#user-menu)
+
+```html
+<ionos-global-nav home_src="...">
+	<!--Slot for webmail link-->
+	<a href="..." slot="webmail">...</a>
+	<!--Slot for usermenu-->
+	<div slot="usermenu">
+		<ionos-user-menu />
+		...
+	</div>
+</ionos-global-nav>
+```
+
+### 👤 User Menu
+
+#### 🎰 Slots
+
+-   `username` => shows in the upper user menu element
+-   `options` => container for [usermenu entries](#user-menu-entries)
+-   `logout` => last & separated usermenu elment
+
+```html
+<ionos-user-menu>
+	<!--Slot for username-->
+	<b slot="username">Username</b>
+	<!--Slot for menu options-->
+	<div slot="options">
+		<ionos-user-menu-item />
+		...
+	</div>
+	<div slot="logout">
+		<ionos-user-menu-item />
+	</div>
+</ionos-user-menu>
+```
+
+#### 🗂️ User Menu Entries
+
+##### ⚙️ Attributes
+
+-   `icon` => [ionos-icon](#icon) to be used
+-   `label` => text to be displayed
+-   `link` => link the entry is supposed to lead to
+-   `target` => defines how the link is supposed to be opened **(default: `_self`)**
+
+```html
+<ionos-user-menu-item icon="..." label="..." link="..." target="" ="...">
+</ionos-user-menu-item>
+```
+
+### 🖼️ Icon
+
+#### ⚙️ Attributes
+
+-   `type` => choose from the available icons:
+    -   `webmail`
+    -   `user`
+    -   `logout`
+    -   `settings`
+    -   `help`
+-   `size` => multiplyer for the icon size **(default: `1`)**
+
+```html
+<ionos-icons {type} size="..." />
+```
+
+## 🚀 Usage
+
+### 🎨 Activate Theme
 
 1. put the a folder with the name of the theme as foldername into `/themes`
 2. activate by putting `'theme' => 'nc-ionos-theme',` into the `config.php`
-3. (optional) make theme exclusive by putting `'theme => 'nc-ionos-theme'` into the `config.php` file
+3. _(optional)_ make theme exclusive by putting `'theme => 'nc-ionos-theme'` into the `config.php` file
 
-### Use
+### 🛠️ Use
+
+Make sure the latest version of the Global Navigation is used by [building](#-build) the project into `../core/js/custom-elements/global-navigation`
 
 1. Import file
    for example using: `<script src="myscripts.js"></script>`
 2. Insert Element
 
 ```html
 <ionos-global-nav home_src="index.html">
-	<p>This is Placed on the rigth side of the header as a slot</p>
+	<a href="webmail.html" slot="webmail">Webmail</a>
+	<div slot="usermenu">
+		<ionos-user-menu>
+			<b slot="username">Username</b>
+			<div slot="options">
+				<ionos-user-menu-item
+					icon="settings"
+					label="Settings"
+					link="settings.html" />
+				<ionos-user-menu-item
+					icon="help"
+					label="Help"
+					link="help.html" />
+			</div>
+			<div slot="logout">
+				<ionos-user-menu-item
+					icon="logout"
+					label="Logout"
+					link="logout.html" />
+			</div>
+		</ionos-user-menu>
+	</div>
 </ionos-global-nav>
 ```
 
 ## ⚙️ Development
 
 ### 🛠️ Setup
 
-#### 📦 Podman Dev Container
-
-Uses containerized Node environment
-
-simply run `make run-dev` to start a container, install dependencies and start the dev server.
-
 #### 🖥️ Without Container
 
 Make sure Node v20 is installed