From 77fc74e47ad70f09cff62f732334e9ced709ae34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 29 Sep 2017 08:30:09 +0200 Subject: [PATCH] Navigation 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- developer_manual/design/navigation.rst | 89 +++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst index bf2571d1c..d632ba0c3 100644 --- a/developer_manual/design/navigation.rst +++ b/developer_manual/design/navigation.rst @@ -7,6 +7,7 @@ App Navigation Introduction ============= + The main navigation menu represent the most important part of your app. It needs to be: @@ -15,12 +16,98 @@ It needs to be: * Simple * Responsive -Menus +Nextcloud provide a very organized way of building menus. +We implemented various essential functions and provide easy way of using them. + +Basic layout +============= + +.. code-block:: html + + + +Utils ====== +Each entry is allowed to have a counter and/or a button for user interraction. + +* The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry. +* Maximum **two** items are allowed into the utils section. You can have: + * Two buttons + * One button and one counter +* You **can't** have more than two buttons, if you need more, you need to add a menu. +* The order of the button and the counter are **not** interchangeable. You need to put the counter before the menu. + +.. code-block:: html + +
+
    +
  • 1
    • +
  • + +
    • +
+
+ +Menu +^^^^^ + +If you need to add a few interractions for your entry, you can but everything in a popover menu. +The menu needs to be placed after the ``app-navigation-entry-utils``. + +.. code-block:: html + +
+ +
+ +Counter +^^^^^^^^ + +If you need to add a counter to your menu entry, you can simply use this structure. +Do not change the alignment of the text. If you're using + +.. code-block:: html + +
  • 1
    • + + + + Collapsible entry ================== + Entry bullet =============