Differences

This shows you the differences between two versions of the page.

--- components:sidebar:index [2025/03/09 19:46] – created admin
+++ components:sidebar:index [2025/07/19 14:58] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Sidebar ======
-The sidebar is supposed to be your wiki’s main navigation.
+The sidebar is DokuWiki’s main navigation feature.
+It even has its own [[doku>faq:sidebar|Sidebar FAQ]] page with instructions for how to set it up. Please read that page first, before you read further here, as it already answers many questions that you may have.
+====== Appearance ======
+The template adds a couple of convenience features to the standard sidebar setup. Most importantly, in **desktop** view, the user can “fold” it to the side to give the main content more space. This can be useful for wide graphics, tables, etc.
+<aside float-right outline box><figure>{{:components:sidebar:nuropa-sidebar-mobile.png?nolink&200 |Nuropa sidebar on mobile view}}<figcaption>The sidebar in mobile view.</figcaption></figure></aside>On **mobile** view, the sidebar becomes a navigation popup instead. It is hidden away until the user clicks the menu button, after which it will open as a sheet on top of the main page content (see image for an example).
+<aside info>**Note:** The sidebar used for this site can be examined [[:sidebar|here]]. Note that some of the code therein relies on the [[doku>plugin:adhoctags|Ad-Hoc HTML PLugin]] to function.</aside>
+===== Configuration =====
+==== DokuWiki configs ====
+There are not template configuration settings for the sidebar, but please note the following DokuWiki setting that are relevant for how your sidebar is shown:
+  * [[doku>config:sidebar|Sidebar]] – configure the page name that is used for sidebars.
+==== Style settings ====
+In the <a [href=?do=admin&page=styling] [target=_blank]>Template Style Settings</a>, the following options are directly related to the appearance of the sidebar:
+  * **Sidebar width** – how wide should the sidebar be (can be any CSS length, though ''px'' or ''rem'' are probably most useful here).
+  * **Sidebar text colour** – Colour of plain text items in the sidebar<strong red>*</strong>.
+  * **Sidebar link colour** – Colour of links in the sidebar<strong red>*</strong>.
+  * **Sidebar icon colour** – Colour of icons in the sidebar<strong red>*</strong>.
+<aside info>**Note 1:** All “colour” items (marked with <strong red>*</strong>) exist in two variants, the second of which is used for the “dark mode”, if enabled.</aside>
+===== See also =====
+  * [[components:menubar:index|Menubar]]
-TODO