[TUT] - how to add a sidebar navigation menu in mybb

[TUT] - how to add a sidebar navigation menu in mybb


note: this was done quickly to help a user a few days ago, so figured why not add it also in the tutorial section....

for example sake you can see such can easily be added to a theme....













note: I do not have much free time as of late to expand upon this tutorial nor is this perfect as it was simple done in like a 10 or so minutes edit just to show an example of such being added as a start to default theme due to rather limited free time currently, but...,


Add to CSS:

* {
	margin: 0;
	text-decoration: none;
}

#side-search {
	border: 0;
	padding: 15px;
	margin: 0;
}

#side-search input.button,
#side-search input.textbox {
	border-color: #000;
}

#side-search input.button {
	background: #B93632;
	color: #fff;
}

#side-search input {
	margin: -3px 0;
}

.sidebar {
	top: 0;
	bottom: 0;
	position: fixed;
	/*overflow-y: scroll;
	overflow-x: hidden;*/
	left: 0;
	width: 240px;
	left: -240px;
	height: 100%;
	background: #1e1e1e;
	transition: all .5s ease;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

.sidebar::-webkit-scrollbar {
	display: none;
	/* Safari */
}

.sidebar header {
	font-size: 16px;
	color: white;
	line-height: 70px;
	text-align: center;
	background: #1b1b1b;
	user-select: none;
	font-weight: bold;
}

.sidebar a {
	display: block;
	height: 65px;
	width: 100%;
	color: white;
	line-height: 65px;
	padding-left: 30px;
	box-sizing: border-box;
	border-bottom: 1px solid black;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-left: 5px solid transparent;
	transition: all .5s ease;
}

.sidebar a.active,
.sidebar a:hover {
	border-left: 5px solid #b93632;
	color: #b93632;
}

.sidebar a.active,
.sidebar a:active {
	border-left: 5px solid #b93632;
	color: #b93632;
}

.sidebar a i {
	font-size: 23px;
	margin-right: 16px;
}

.sidebar a span {
	letter-spacing: 1px;
	text-transform: uppercase;
}

#check {
	display: none;
}

label #btn,
label #cancel {
	position: absolute;
	cursor: pointer;
	color: white;
	border-radius: 5px;
	border: 1px solid #262626;
	margin: 15px 30px;
	font-size: 29px;
	background: #262626;
	height: 45px;
	width: 45px;
	text-align: center;
	line-height: 45px;
	transition: all .5s ease;
	top: 0;
}

label #cancel {
	opacity: 0;
	visibility: hidden;
}

#check:checked~.sidebar {
	left: 0;
}

#check:checked~label #btn {
	margin-left: 245px;
	opacity: 0;
	visibility: hidden;
}

#check:checked~label #cancel {
	margin-left: 245px;
	opacity: 1;
	visibility: visible;
}

.mini-avatar-block {
	display: block;
}

.mini-avatar-user {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	margin-left: 20%;
	background: url('images/default_avatar.png') no-repeat;
	background-size: 100% auto;
	margin-top: -6px;
	display: inline-block;
}

.mini-avatar-user img {
	width: 25px;
	height: 25px;
	border-radius: 100%;
}

.mini-avatar-user img[src=""] {
	display: none;
}

.mini-avatar-guest {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	margin-left: 20%;
	background: url('images/default_avatar.png') no-repeat;
	background-size: 100% auto;
	margin-top: -6px;
	display: inline-block;
}

.mini-avatar-guest img {
	width: 25px;
	height: 25px;
	border-radius: 100%;
}

.mini-avatar-guest img[src=""] {
	display: none;
}

@media(max-width: 860px) {
	#logo {
		padding-bottom: 10px !important;
		text-align: center !important;
		float: none !important;
		padding-left: 30px;
	}
	#logo img {
		padding-bottom: 15px;
	}
	.modal {
		width: 300px;
	}
}

comment out the following min-widths in global.css for:

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	/*min-width: 990px;*/
}

.wrapper {
	width: 85%;
	/*min-width: 970px;*/
	max-width: 1500px;
	margin: auto auto;
}

Edit Template: headerinclude

Find:

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

Add before:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Find:

{$stylesheets}

either add before:

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

or add before:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

Again Find:

{$stylesheets}

Add After:

<script type="text/javascript">
$(document).ready(function() {
    var url = window.location;
    var element = $('.sidebar a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('a')) {
        element.addClass('active');
    }
});
</script>

Edit Template: header


Repace with:

<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
   <div class="wrapper">
      <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
      <ul class="menu top_links">
         {$menu_portal}
         {$menu_search}
         {$menu_memberlist}
         {$menu_calendar}
         <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
      </ul>
   </div>
</div>
<div id="panel">
<div class="upper">
<div class="wrapper">
   {$quicksearch}
   {$welcomeblock}
   <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
   <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
   <!-- </div>-->
   <!-- </div> -->
   <a href="{$mybb->settings['bburl']}/portal.php">
   <i class="fas fa-bell"></i>
   <span>{$lang->toplinks_portal}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/search.php">
   <i class="fas fa-search"></i>
   <span>{$lang->toplinks_search}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/memberlist.php">
   <i class="fas fa-users"></i>
   <span>{$lang->toplinks_memberlist}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/calendar.php">
   <i class="fas fa-calendar"></i>
   <span>{$lang->toplinks_calendar}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/misc.php?action=help">
   <i class="far fa-question-circle"></i>
   <span>{$lang->toplinks_help}</span>
   </a>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$remote_avatar_notice}
{$bannedwarning}
{$bbclosedwarning}
{$modnotice}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />

Edit Template: header_welcomeblock_guest

Replace with:

<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span>
</div>
</div>
<div class="modal" id="quick_login" style="display: none;">
   <form method="post" action="{$mybb->settings['bburl']}/member.php">
      <input name="action" type="hidden" value="do_login" />
      <input name="url" type="hidden" value="" />
      <input name="quick_login" type="hidden" value="1" />
      <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
      <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
         <tr>
            <td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
         </tr>
         {$loginform}
      </table>
   </form>
</div>
<script type="text/javascript">
   $("#quick_login input[name='url']").val($(location).attr('href'));
</script>
</div> <!-- -->
</div> <!-- -->
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>          
<div class="sidebar">
<header>
   <form action="{$mybb->settings['bburl']}/search.php">
      <fieldset id="side-search">
         <input name="keywords" type="text" class="textbox" />
         <input value="{$lang->search_button}" type="submit" class="button" />
         <input type="hidden" name="action" value="do_search" />
         <input type="hidden" name="postthread" value="1" />
      </fieldset>
   </form>
</header>
<div class="mini-avatar-block">
   <a href="{$mybb->settings['bburl']}/member.php?action=register" class="active">
      {$lang->welcome_guest}
      <div class="mini-avatar-guest">   
         <img src="{$mybb->user['avatar']}" alt="avatar" />
      </div>
   </a>
</div>
<a href="{$mybb->settings['bburl']}/member.php?action=register">
<i class="fas fa-pencil-alt"></i>
<span>{$lang->welcome_register}</span>
</a>
<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">
<i class="fas fa-key"></i>
<span>{$lang->welcome_login}</span>
</a>

Edit Template: header_welcomeblock_member

Replace with:

<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout">{$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
   <div class="wrapper">
      <ul class="menu panel_links">
         {$usercplink}
         {$modcplink}
         {$admincplink}
      </ul>
      <ul class="menu user_links">
         {$buddylink}
         {$searchlink}
         {$pmslink}
      </ul>
   </div>
   <br class="clear" />
</div>
</div> <!-- -->
</div> <!-- -->
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>      
<div id="sidebar" class="sidebar">
<header>
   <form action="{$mybb->settings['bburl']}/search.php">
      <fieldset id="side-search">
         <input name="keywords" type="text" class="textbox" />
         <input value="{$lang->search_button}" type="submit" class="button" />
         <input type="hidden" name="action" value="do_search" />
         <input type="hidden" name="postthread" value="1" />
      </fieldset>
   </form>
</header>
<div class="mini-avatar-block">
   <a href="member.php?action=profile&uid={$mybb->user['uid']}"  class="active">
      <i class="fas fa-user"></i>{$mybb->user['username']}
      <div class="mini-avatar-user">
         <img src="{$mybb->user['avatar']}" alt="avatar" />
      </div>
   </a>
</div>
{$usercplink}
{$modcplink}
{$admincplink}
<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">
<i class="fas fa-power-off"></i>
<span>{$lang->welcome_logout}</span>
</a>

Edit Template: header_welcomeblock_member_user

Replace with:

<a href="{$mybb->settings['bburl']}/usercp.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_usercp}</span>
</a>

Edit Template: header_welcomeblock_member_moderator

Replace with:

<a href="{$mybb->settings['bburl']}/modcp.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_modcp}</span>
</a>

Edit Template: header_welcomeblock_member_admin

Replace with:

<a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_admin}</span>
</a>

etc, etc  * (note this is only an example and is meant as general idea of starting off and continuing on with.)

So if you completed those steps, then can continue editing further for your usages if not yet well here it is  completed also as an example theme file:
  Sidebar_Tut-theme.xml (Size: 143.86 KB / Downloads: 1)

Best of luck!    ~ V