Introduce new menu classes and navigation templates

controllers/HTMLController.php

@@ -22,8 +22,6 @@ abstract class HTMLController
 		if (Registry::get('user')->isAdmin())
 		{
 			$this->page->appendStylesheet(BASEURL . '/css/admin.css');
-			$this->admin_bar = new AdminBar();
-			$this->page->adopt($this->admin_bar);
 		}
 	}
 

models/AdminMenu.php

@@ -0,0 +1,58 @@
+<?php
+/*****************************************************************************
+ * AdminMenu.php
+ * Contains the admin navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class AdminMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if (!$user->isAdmin())
+			return;
+
+		$this->items[] = [
+			'label' => 'Admin',
+			'icon' => 'gear',
+			'subs' => [
+				[
+					'uri' => '/managealbums/',
+					'label' => 'Albums',
+				],
+				[
+					'uri' => '/manageassets/',
+					'label' => 'Assets',
+				],
+				[
+					'uri' => '/managetags/',
+					'label' => 'Tags',
+				],
+				[
+					'uri' => '/manageusers/',
+					'label' => 'Users',
+				],
+				[
+					'uri' => '/manageerrors/',
+					'label' => 'Errors',
+					'badge' => ErrorLog::getCount(),
+				],
+			],
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

models/Dispatcher.php

@@ -86,7 +86,6 @@ class Dispatcher
 		if (Registry::has('user') && Registry::get('user')->isAdmin())
 		{
 			$page->appendStylesheet(BASEURL . '/css/admin.css');
-			$page->adopt(new AdminBar());
 		}
 
 		$page->adopt(new DummyBox('Well, this is a bit embarrassing!', '<p>The page you requested could not be found. Don\'t worry, it\'s probably not your fault. You\'re welcome to browse the website, though!</p>', 'errormsg'));

models/ErrorHandler.php

@@ -168,7 +168,6 @@ class ErrorHandler
 			if ($is_admin)
 			{
 				$page->appendStylesheet(BASEURL . '/css/admin.css');
-				$page->adopt(new AdminBar());
 			}
 		}
 		elseif (!$is_sensitive)

models/MainMenu.php

@@ -0,0 +1,41 @@
+<?php
+/*****************************************************************************
+ * MainMenu.php
+ * Contains the main navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainMenu extends Menu
+{
+	public function __construct()
+	{
+		$this->items = [
+			[
+				'uri' => '/',
+				'label' => 'Albums',
+			],
+			[
+				'uri' => '/people/',
+				'label' => 'People',
+			],
+			[
+				'uri' => '/timeline/',
+				'label' => 'Timeline',
+			],
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

models/Menu.php

@@ -0,0 +1,18 @@
+<?php
+/*****************************************************************************
+ * Menu.php
+ * Contains all navigational menus.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class Menu
+{
+	protected $items = [];
+
+	public function getItems()
+	{
+		return $this->items;
+	}
+}

models/UserMenu.php

@@ -0,0 +1,60 @@
+<?php
+/*****************************************************************************
+ * UserMenu.php
+ * Contains the user navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class UserMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if ($user->isLoggedIn())
+		{
+			$this->items[] = [
+				'label' => $user->getFirstName(),
+				'icon' => 'person-circle',
+				'subs' => [
+
+					[
+						'label' => 'Settings',
+						'uri' => '/accountsettings/',
+					],
+					[
+						'label' => 'Log out',
+						'uri' => '/logout/',
+					],
+				],
+			];
+		}
+		else
+		{
+			$this->items[] = [
+				'label' => 'Log in',
+				'icon' => 'person-circle',
+				'uri' => '/login/',
+			];
+		}
+
+		$this->items[] = [
+			'label' => 'Home',
+			'icon' => 'house-door',
+			'uri' => '/',
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}

public/css/admin.css

@@ -11,44 +11,6 @@
 	margin: 0 0 0.2em;
 }
 
-/* Admin bar styles
----------------------*/
-body {
-	padding-top: 30px;
-}
-#admin_bar {
-	background: #333;
-	color: #ccc;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: 100;
-}
-#admin_bar ul {
-	list-style: none;
-	margin: 0 auto;
-	max-width: 1280px;
-	min-width: 900px;
-	padding: 2px;
-	width: 95%;
-}
-#admin_bar ul > li {
-	display: inline;
-	border-right: 1px solid #aaa;
-}
-#admin_bar ul > li:last-child {
-	border-right: none;
-}
-#admin_bar li > a {
-	color: inherit;
-	display: inline-block;
-	padding: 4px 6px;
-}
-#admin_bar li a:hover {
-	text-decoration: underline;
-}
-
 
 /* (Tag) autosuggest
 ----------------------*/

public/css/default.css

@@ -19,17 +19,13 @@ body {
 	background: #aaa 0 -50% fixed;
 }
 
-#wrapper, header {
+#wrapper, header .container {
 	width: 95%;
 	min-width: 900px;
 	max-width: 1280px;
 	margin: 0 auto;
 }
 
-header {
-	overflow: auto;
-}
-
 a {
 	color: #963626;
 	text-decoration: none;
@@ -67,27 +63,10 @@ a:hover h1#logo, a:hover h1#logo:before {
 
 /* Navigation
 ---------------*/
-ul#nav {
+.nav-divider {
-	margin: 55px 10px 0 0;
+	height: 2.5rem;
-	padding: 0;
+	border-left: .1rem solid rgba(255,255,255, 0.2);
-	float: right;
+	margin: 0 0.5rem;
-	list-style: none;
-}
-ul#nav li {
-	float: left;
-}
-ul#nav li a {
-	color: #fff;
-	display: block;
-	float: left;
-	font: 200 20px 'Press Start 2P', sans-serif;
-	margin: 0 0 0 32px;
-	padding: 10px 0;
-	text-decoration: none;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-}
-ul#nav li a:hover {
-	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
 }
 
 

templates/AdminBar.php

@@ -1,38 +0,0 @@
-<?php
-/*****************************************************************************
- * AdminBar.php
- * Defines the AdminBar class.
- *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
- *****************************************************************************/
-
-class AdminBar extends Template
-{
-	private $extra_items = [];
-
-	public function html_main()
-	{
-		echo '
-			<div id="admin_bar">
-				<ul>
-					<li><a href="', BASEURL, '/managealbums/">Albums</a></li>
-					<li><a href="', BASEURL, '/manageassets/">Assets</a></li>
-					<li><a href="', BASEURL, '/managetags/">Tags</a></li>
-					<li><a href="', BASEURL, '/manageusers/">Users</a></li>
-					<li><a href="', BASEURL, '/manageerrors/">Errors [', ErrorLog::getCount(), ']</a></li>';
-
-		foreach ($this->extra_items as $item)
-			echo '
-					<li><a href="', $item[0], '">', $item[1], '</a></li>';
-
-		echo '
-					<li><a href="', BASEURL, '/logout/">Log out [', Registry::get('user')->getFullName(), ']</a></li>
-				</ul>
-			</div>';
-	}
-
-	public function appendItem($url, $caption)
-	{
-		$this->extra_items[] = [$url, $caption];
-	}
-}

templates/MainNavBar.php

@@ -0,0 +1,51 @@
+<?php
+/*****************************************************************************
+ * MainNavBar.php
+ * Contains the primary navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainNavBar extends NavBar
+{
+	protected $outerMenuId = 'mainNav';
+	protected $innerMenuId = 'mainNavigation';
+	protected $ariaLabel = 'Main navigation';
+	protected $navBarClasses = 'navbar-dark bg-dark sticky-top mb-4';
+	protected $primaryBadgeClasses = 'bg-light text-dark';
+	protected $secondaryBadgeClasses = 'bg-dark text-light';
+
+	public function html_main()
+	{
+		echo '
+		<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
+			<div class="container">
+				<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
+					HashRU Pics
+				</a>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="', $this->innerMenuId, '">
+					<ul class="navbar-nav mb-2 mb-lg-0">';
+
+		$mainMenu = new MainMenu();
+		$this->renderMenuItems($mainMenu->getItems());
+
+		echo '
+						<li class="nav-divider d-none d-lg-inline"></li>';
+
+		$adminMenu = new AdminMenu();
+		$this->renderMenuItems($adminMenu->getItems());
+
+		$userMenu = new UserMenu();
+		$this->renderMenuItems($userMenu->getItems());
+
+		echo '
+					</ul>
+				</div>
+			</div>
+		</nav>';
+	}
+}

templates/MainTemplate.php

@@ -43,15 +43,12 @@ class MainTemplate extends Template
 		, $this->header_html, '
 	</head>
 	<body', !empty($this->classes) ? ' class="' . implode(' ', $this->classes) . '"' : '', '>
-		<header>
+		<header>';
-			<a href="', BASEURL, '/">
+
-				<h1 id="logo">#pics</h1>
+		$bar = new MainNavBar();
-			</a>
+		$bar->html_main();
-			<ul id="nav">
+
-				<li><a href="', BASEURL, '/">albums</a></li>
+		echo '
-				<li><a href="', BASEURL, '/people/">people</a></li>
-				<li><a href="', BASEURL, '/timeline/">timeline</a></li>
-			</ul>
 		</header>
 		<div id="wrapper">';
 
@@ -88,6 +85,7 @@ class MainTemplate extends Template
 				echo '<pre>', strtr($query, "\t", " "), '</pre>';
 
 		echo '
+		<script type="text/javascript" src="', BASEURL, '/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 	</body>
 </html>';
 	}

templates/NavBar.php

@@ -0,0 +1,62 @@
+<?php
+/*****************************************************************************
+ * NavBar.php
+ * Contains the navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class NavBar extends Template
+{
+	protected $primaryBadgeClasses = 'bg-dark text-light';
+	protected $secondaryBadgeClasses = 'bg-light text-dark';
+
+	public function renderMenu(array $items, $navBarClasses = '')
+	{
+		echo '
+					<ul class="navbar-nav ', $navBarClasses, '">';
+
+		$this->renderMenuItems($items, $navBarClasses);
+
+		echo '
+					</ul>';
+	}
+
+	public function renderMenuItems(array $items)
+	{
+		foreach ($items as $menuId => $item)
+		{
+			if (isset($item['icon']))
+				$item['label'] = '<i class="bi bi-' . $item['icon'] . '"></i> ' . $item['label'];
+
+			if (isset($item['badge']))
+				$item['label'] .= ' <span class="badge ' . $this->primaryBadgeClasses . '">' . $item['badge'] . '</span>';
+
+			if (empty($item['subs']))
+			{
+				echo '
+						<li class="nav-item"><a class="nav-link" href="', $item['url'], '">', $item['label'], '</a></li>';
+				continue;
+			}
+
+			echo '
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="menu', $menuId, '" data-bs-toggle="dropdown" aria-expanded="false">', $item['label'], '</a>
+							<ul class="dropdown-menu" aria-labelledby="menu', $menuId, '">';
+
+			foreach ($item['subs'] as $subitem)
+			{
+				if (isset($subitem['badge']))
+					$subitem['label'] .= ' <span class="badge ' . $this->secondaryBadgeClasses . '">' . $subitem['badge'] . '</span>';
+
+				echo '
+								<li><a class="dropdown-item" href="', $subitem['url'], '">', $subitem['label'], '</a></li>';
+			}
+
+			echo '
+							</ul>
+						</li>';
+		}
+	}
+}