Organizing add section in docs (#32141)

* Docs: add section on organizing

* Adding floors and areas

* Fix typo

* Apply suggestions from code review

Co-authored-by: Franck Nijhof <git@frenck.dev>

* Add link to floor procedure

* Add links to templates

---------

Co-authored-by: Franck Nijhof <git@frenck.dev>

source/_docs/organizing.markdown

@@ -0,0 +1,28 @@
+---
+title: "Organizing your assets"
+description: "Organizing and grouping your assets makes it easier to find them and allows you to target groups in automations."
+---
+
+Once you have more devices, you may want to target entire groups of devices in automations. It also becomes more challenging to find items in lists. There are a few tools to organize your assets: [Areas](#areas), [floors](#floors), [labels](#labels), and [categories](#categories).
+
+## Areas
+
+An area in Home Assistant is a logical grouping of {% term devices %} and {% term entities %} that are meant to match areas (or rooms) in the physical world of your home. For example, the "Living room" area groups devices and entities in your living room. Areas allow you to target an entire group of devices with a service call. For example, turning off all the lights in the living room.
+Areas can be assigned to floors. Areas can also be used to automatically generate cards, such as the [Area card](/dashboards/area/).
+
+## Floors
+
+A floor in Home Assistant is a logical grouping of areas that are meant to match the physical floors in your home. {% term Devices %} and {% term entities %} cannot be assigned to floors directly but to areas. A floor has properties such as: Floor ID, name, aliases (for use in assistants), an icon, and a floor level. Some of these properties are optional. The floor level number can be negative to reflect floors below the basement. Floors can be used in automations and scripts as a target for actions. For example, to turn off all the lights on the downstairs floor when you go to bed.
+
+## Labels
+
+Labels in Home Assistant allow grouping elements irrespective of their physical location or type. Labels can be assigned to areas, devices, entities, automations, scripts, and helpers. Labels can be used in automations and scripts as a target for actions and services. Labels can also be used to filter data. For example, you can filter the list of devices to show only devices with the label `heavy energy usage` or turn these devices off when there is not a lot of solar energy available.
+
+## Categories
+
+Categories allow grouping items in a table. Like labels, categories allow grouping irrespective of the items physical location. For example, on the automations page, you can create the categories “Notifications” or “NFC tags” to view your automations grouped or filtered. These categories group automations on the automation page, but have no effect anywhere else. Categories are unique for each table. The automations page can have different categories than the scene, scripts, or helpers settings page.
+
+## Related topics
+
+- [Areas](/docs/organzing/areas/)
+- [Floors](/docs/organzing/floors/)

source/_docs/organizing/areas.markdown

@@ -0,0 +1,42 @@
+---
+title: "Areas"
+description: "Group your devices and entities in areas and group areas in floors."
+---
+
+An area in Home Assistant is a logical grouping of {% term devices %} and {% term entities %} that are meant to match areas (or rooms) in the physical world of your home. For example, the "Living room" area groups devices and entities in your living room. Areas allow you to target an entire group of devices with a service call. For example, turning off all the lights in the living room.
+Areas can be assigned to floors. Areas can also be used to automatically generate cards, such as the [Area card](/dashboards/area/).
+
+## Creating an area
+
+Follow these steps to create a new area from the **Areas** view.
+
+1. Go to {% my areas title="**Settings** > **Areas, labels & zones**" %} and select **Create area**.
+2. In the dialog, enter the area details:
+   - Give the area a **Name** (required).
+   - Add an icon (We use [Material icons](https://pictogrammers.com/library/mdi/)).
+   - Assign the area to a floor.
+     - If you have not created floors yet, you can [create a new one](/docs/organizing/floors/#creating-a-floor).
+     - The number can be negative. For example for underground floors.
+     - This number can later be used for sorting.
+   - Add an image representing that area.
+   - Add an **Alias**.
+     - Aliases are alternative names used in [voice assistants](/voice_control/aliases/) to refer to this floor.
+
+    ![Create area dialog](/images/organizing/create_area_01.png)
+3. Select **Add**.
+
+   **Result**: A new area is created.
+
+## Assigning areas to floors and add labels
+
+If an area has not yet been assigned to a floor, it is shown in the **Unassigned areas** section. Follow these steps to assign an area to a floor.
+
+1. Go to {% my areas title="**Settings** > **Areas, labels & zones**" %} and select **Create area**.
+2. On the area card, select the pencil icon.
+3. In the dialog, select the floor and add labels, if you like.
+
+## Related topics
+
+- [Floors](/docs/organzing/floors/)
+- [Labels](/docs/organzing/labels/)
+- [Using areas in templates](/docs/configuration/templating/#areas)

source/_docs/organizing/floors.markdown

@@ -0,0 +1,35 @@
+---
+title: "Floors"
+description: "Group your areas per floor"
+---
+
+A floor in Home Assistant is a logical grouping of areas meant to match your home's physical floors. Devices and entities
+cannot be assigned to floors directly but to areas. Floors can be used in automations and scripts as a target for actions. For example, to turn off all the lights on the downstairs floor when you go to bed.
+
+## Creating a floor
+
+Follow these steps to create a new floor.
+
+1. Go to {% my areas title="**Settings** > **Areas, labels & zones**" %} and select **Create floor**.
+2. In the dialog, enter the floor details:
+   - Give the floor a **Name** (required).
+   - Add a floor **Level**.
+     - The number can be negative. For example for underground floors.
+     - This number can later be used for sorting.
+   - Add an icon (We use [Material icons](https://pictogrammers.com/library/mdi/)).
+   - Add an **Alias**.
+     - Aliases are alternative names used in [voice assistants](/voice_control/aliases/) to refer to this floor.
+
+    ![Create floor dialog](/images/organizing/create_floor_01.png)
+3. Select **Add**.
+
+   **Result**: A new floor is created.
+
+    ![Create floor dialog](/images/organizing/create_floor_02.png)
+4. You can now [assign areas to that floor](/docs/organizing/areas/#assigning-areas-to-floors-and-add-labels).
+
+## Related topics
+
+- [Alias for voice assistants](/voice_control/aliases/)
+- [Areas](/docs/organizing/areas/)
+- [Using floors in templates](/docs/configuration/templating/#floors)

source/_includes/asides/docs_navigation.html

@@ -124,11 +124,12 @@
       <li>
         <b>{% active_link /docs/frontend/ Frontend %}</b>
         <ul>
-          <li>
-            {% active_link /docs/frontend/browsers/ Browser compatibility list %}
-          </li>
           <li>{% active_link /dashboards Dashboards %}</li>
+          <li>{% active_link /docs/organizing/ Organizing %}</li>
           <li>{% active_link /docs/frontend/icons/ Icons%}</li>
+          <li>
+            {% active_link /docs/frontend/browsers/ Browser compatibility list%}
+          </li>
         </ul>
       </li>
       <li>

source/_includes/asides/organizing_navigation.html

@@ -0,0 +1,14 @@
+<section class="aside-module grid__item one-whole lap-one-half">
+
+  <div class="section">
+    <h1 class="title delta">Organizing</h1>
+    <ul class="divided sidebar-menu">
+      <li>{% active_link /docs/organizing/ Organizing your assets %}</li>
+      <li>
+        {% active_link /docs/organizing/areas/ Areas %}
+      </li>
+      <li>
+        {% active_link /docs/organizing/floors/ Floors %}
+      </li>
+    </ul>
+  </div>

source/_includes/site/sidebar.html

@@ -9,6 +9,8 @@
     {% include asides/common_tasks_navigation.html %}
   {% elsif root == 'dashboards' %}
     {% include asides/dashboards_navigation.html %}
+  {% elsif root == 'docs' and url_parts[2] == "organizing" %}
+    {% include asides/organizing_navigation.html %}
   {% elsif root == 'developers' or root == 'help' %}
     {% include asides/help_navigation.html %}
   {% elsif root == 'getting-started' %}