NOTE: These instructions apply to older (pre-template) versions of Dokuwiki only.

– an example implementation (sidebar runs whole height of dokuwiki)
– for an alternate implemention (sidebar runs between button bars) see here

This is a pretty rough and ready implementation of the navigation sidebar concept. Only one current dokuwiki file is altered, inc/html.php, the rest can be placed in the various user files dokuwiki allows.

The html_navigate() function does all the work. It will display a navigation sidebar contained by
<div id='wiki_navigate'></div>.

• the location of the sidebar is controlled by its stylesheet entry.
• content will be from the standard wiki page indicated by the config value $conf['navigate'] or the wiki index information if that page doesn't exist.
• styles for the display of sidebar are normal wiki styles. These can be overriden by adding additional special styles and prefixing them with #wiki_navigate. Some examples are shown in the css code below. Given the reduced space available, it makes sense to reduce the font sizes, reduce some of the margins and turn off TOC.
• as the navigate page could well be an orphan, consider adding a self referencing link somewhere for easy modification.

• occasional disappearing text in IE, fixed by adding position:relative to div.page style declaration.

This implementation only allows for optional navigation pages in every namespace. If the navigate page is found for that namespace it is displayed. If not found, it will look at the next shallower namespace and display that. It will keep looking until it reaches the wiki root, if no navigate page is found, it will show the wiki index.

e.g. for namespace projects:project1:design and $conf['navigate'] = "navigate"

it will look for the navigation pages in the following order

• projects:project1:design:navigate
• projects:project1:navigate
• projects:navigate
• navigate

the only change to a standard dokuwiki file. if you upgrade dokuwiki, you will only need to redo this change.

function html_header(){
// most of function unchanged, add in below line immedidately above <div class="page">
<?php	html_navigate(); ?>
  <div class="page">
  <!-- wikipage start -->
<?php 
}

copy and paste this into your conf/local.php (or create one if it doesn't exist).

$conf['navigate']    = 'navigate';        //name of navigation page
$conf['localcss']    = 'local.css';		  //name for additional stylesheet
 
// recursive function to establish best navigate file to be used
function getNavigateFN($ns, $file) {
 
	// check for wiki page = $ns:$file (or $file where no namespace)
	$nsFile = ($ns) ? "$ns:$file" : $file;
	if (file_exists(wikiFN($nsFile))) return $nsFile;
 
// remove deepest namespace level and call function recursively
 
	// no namespace left, exit with no file found	
	if (!$ns) return '';
 
	$i = strrpos($ns, ":");
	$ns = ($i) ? substr($ns, 0, $i) : false;	
	return getNavigateFN($ns, $file);
}
 
function html_navigate() {
	global $ID;
	global $REV;
	global $conf;
 
	// save globals
	$saveID = $ID;
	$saveREV = $REV;
 
	// discover file to be displayed in navigation sidebar	
	$fileNavigate = '';
 
	if (isset($conf['navigate'])) {
		$fileNavigate = getNavigateFN(getNS($ID), $conf['navigate']);
	}
 
	// open navigate <div>
	echo("<div id='wiki_navigate'>");
 
	// determine what to display
	if ($fileNavigate) {
		$ID = $fileNavigate;
		$REV = '';
		print parsedWiki($ID,$REV,false);
	}
	else {
		html_index('.');
	}
 
	// close navigate <div>	and restore globals
	echo("</div>");
	$ID = $saveID;
	$REV = $saveREV;
}

I have this in my own stylesheet linked in include/meta.html, but it could go in style.css
For an alternate CSS with the sidebar appearing between the two wiki button bars, see here

/* CSS Document */
#content-main { padding:2px; margin: 122px 12px 2px 175px; padding-right: 6px; z-index:4; }
 
/* dokuwiki containers & styles */
#jlk_dokuwiki {position:absolute; margin:0; padding:0; width:100%; min-width:100%; height:100%; min-height:100%;}
#jlk_dokuwiki #content-main {background-color:#faf4d4; margin-top: 0; padding-left: 12px; border-left: 2px solid #999999;}
#jlk_wikiheader {}
#jlk_wiki {}
 
#wiki_navigate {position:absolute; top:0; left:-2px; width:173px; margin:0; padding:2px; border-width: 0;}
#wiki_navigate {background-color: #ffffff; border-right: 2px solid #999999; border-bottom: 2px solid #999999;}
#wiki_navigate {font-size:10px;}
#wiki_navigate a {color: black;}
#wiki_navigate a.wikilink2 {color:#999999;} /* wikilink2 is a non-existent wiki page */
#wiki_navigate a.wikilink2:hover {text-decoration:none; cursor:default;}
 
#wiki_navigate h1 {font-size:140%; margin-left: 2px; padding-left: 2px; font-weight:bold; padding-bottom:0; background-color:#99cc99;}
#wiki_navigate h2 {font-size:120%; margin-left: 4px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h3 {font-size:120%; margin-left: 8px; font-weight:normal; padding-bottom:0;}
#wiki_navigate h4 {font-size:100%; margin-left: 12px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h5 {font-size:100%; margin-left: 16px; font-weight:normal; padding-bottom:0;}
#wiki_navigate .toc {display:none;}
 
/* reduced section indentation */
#wiki_navigate div.level1 {margin-left: 2px;}
#wiki_navigate div.level2 {margin-left: 6px;}
#wiki_navigate div.level3 {margin-left: 10px;}
#wiki_navigate div.level4 {margin-left: 14px;}
#wiki_navigate div.level5 {margin-left: 18px;}
 
div.page { position:relative;}  /* required to correct disappearing text in IE */
.header { line-height:normal;}
.pagename {font-size:160%; font-weight:normal; color:#999999;}
.logo a:link, .logo a:visited, .logo a:hover, .logo a:active { color:#a0b4bc; font-size:100%; font-variant: small-caps; letter-spacing: 2pt; text-decoration: none; }
.logo a:hover {color:#ff9900;}
div.page p, div.page li {text-align: left;}

the php here looks for a second style sheet, identified by $conf['localcss'] in local.php

	<meta name="description" content="test dokuwiki wiki " />
	<meta name="keyword" content="jalakai wiki dokuwiki" />
<?php
	if (file_exists(dirname(__FILE__).'/../'.$conf['localcss']))
	  echo '    <link rel="stylesheet" type="text/css" href="'.getBaseURL().$conf['localcss'].'" />'."\n";
?>

  <div id="jlk_dokuwiki"> <!-- wrapper for dokuwiki + my footer -->
    <div id="content-main"> <!-- wrapper for dokuwiki -->

	</div> <!-- id="content-main" opened in topheader.html -->
    <div id="jlk_footer" class="container">
// blah, blah, blah, footer stuff
    </div> <!-- id=footer -->
</div><!-- id="jlk_dokuwiki" opened in topheader.html -->

Hi Chris,

i changed the function html_navigate() to open folders directly in the sidebar menu:

global $IDX;
html_index($IDX);

There's one problem left i don't have a solution now but maybe you have a idea. How can i prevent that the opening of a folder in the sidebar menu opens the index in the main window too? Maybe you can give me a hint to solve that

– Daniel 2005-May-10

Daniel, I don't quite understand the need for any changes. The original html_navigate should display an index (using current namespace folder) if there is no navigate page. – chris 2005-May-11