Refactor page navigation and icon handling to match the rest of the apps

home.php

@@ -38,10 +38,18 @@ if (!is_empty($_GET['page'])) {
         <div class="container">
             <div class="row">
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-sm-offset-3 col-md-offset-4 col-lg-offset-4">
-                    <a href="home.php"><img class="img-responsive banner-image" src="static/img/logo.svg" /></a>
+                    <?php
+                    if ((SHOW_ICON == "both" || SHOW_ICON == "app") && ICON_POSITION != "menu") {
+                        if (MENU_BAR_STYLE != "fixed") {
+                            ?>
+                            <img class="img-responsive banner-image" src="static/img/logo.svg" />
+                            <?php
+                        }
+                    }
+                    ?>
                 </div>
             </div>
-            <nav class="navbar navbar-default navbar-orange">
+            <nav class="navbar navbar-default navbar-orange navbar-<?php echo MENU_BAR_STYLE; ?>-top">
                 <div class="container-fluid">
                     <div class="navbar-header">
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
@@ -51,45 +59,67 @@ if (!is_empty($_GET['page'])) {
                             <span class="icon-bar"></span>
                         </button>
                         <?php
-                        if (PAGES[$pageid]['title'] == "{DEFAULT}") {
-                            ?>
-                            <span class="navbar-brand">
-                                <?php
-                                lang2("welcome user", ["user" => $_SESSION['realname']]);
+                        if (SHOW_ICON == "both" || SHOW_ICON == "app") {
+                            if (MENU_BAR_STYLE == "fixed" || ICON_POSITION == "menu") {
+                                $src = "static/img/logo.svg";
+                                if ($pageid != "home") {
+                                    $src = "static/img/up-arrow-black.png";
+                                }
                                 ?>
-                            </span>
-                            <?php
-                        } else {
-                            ?>
-                            <a class="navbar-brand" href="home.php?page=home">
+                                <a class="navbar-brand" href="home.php">
+                                    <img style="height: 35px; padding-bottom: 12px; padding-left: 5px;" src="<?php echo $src; ?>" />
+                                </a>
                                 <?php
-                                // add breadcrumb thing
-                                lang("home");
-                                echo " <i class=\"fa fa-caret-right\"></i> ";
-                                lang(PAGES[$pageid]['title']);
-                                ?>
-                            </a>
-                            <?php
+                            }
                         }
                         ?>
+                        <a class="navbar-brand" href="home.php">
+                            <?php
+                            echo SITE_TITLE;
+                            ?>
+                        </a>
                     </div>
 
                     <div class="collapse navbar-collapse" id="navbar-collapse">
                         <ul class="nav navbar-nav">
+                            <?php
+                            foreach (PAGES as $id => $pg) {
+                                if ($pg['navbar'] === TRUE) {
+                                    if ($pageid == $id) {
+                                        ?>
+                                        <li class="active">
+                                            <?php
+                                        } else {
+                                            ?>
+                                        <li>
+                                        <?php } ?>
+                                        <a href="home.php?page=<?php echo $id; ?>">
+                                            <?php
+                                            if (isset($pg['icon'])) {
+                                                ?>
+                                                <i class="fa fa-<?php echo $pg['icon']; ?> fa-fw"></i> 
+                                            <?php } ?>
+                                            <?php lang($pg['title']) ?>
+                                        </a>
+                                    </li>
+                                    <?php
+                                }
+                            }
+                            ?>
                         </ul>
                         <ul class="nav navbar-nav navbar-right">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-user fa-fw"></i> <?php lang("account") ?> <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li><a href="home.php?page=security"><i class="fa fa-gears fa-fw"></i> <?php lang("options") ?></a></li>
-                                    <li class="divider"></li>
-                                    <li class="mobile-app-hide"><a href="action.php?action=signout"><i class="fa fa-sign-out fa-fw"></i> <?php lang("sign out") ?></a></li>
-                                </ul>
-                            </li>
+                            <li><a href="home.php"><i class="fa fa-user fa-fw"></i> <?php echo $_SESSION['realname'] ?></a></li>
+                            <li><a href="action.php?action=signout"><i class="fa fa-sign-out fa-fw"></i> <?php lang("sign out") ?></a></li>
                         </ul>
                     </div>
-                </div>
             </nav>
+            <?php
+            if (MENU_BAR_STYLE == "fixed") {
+                ?>
+                <div style="height: 75px;"></div>
+                <?php
+            }
+            ?>
 
             <div class="app-dock-container mobile-app-hide">
                 <div class="app-dock">

index.php

@@ -153,7 +153,11 @@ if ($VARS['progress'] == "1") {
             <div class="row">
                 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-sm-offset-3 col-md-offset-4 col-lg-offset-4">
                     <div>
-                        <img class="img-responsive banner-image" src="static/img/logo.svg" />
+                        <?php
+                        if (SHOW_ICON == "both" || SHOW_ICON == "index") {
+                            ?>
+                            <img class="img-responsive banner-image" src="static/img/logo.svg" />
+                        <?php } ?>
                     </div>
                     <div class="panel panel-orange">
                         <div class="panel-heading">

pages.php

@@ -3,16 +3,22 @@
 // List of pages and metadata
 define("PAGES", [
     "home" => [
-        "title" => "{DEFAULT}"
+        "title" => "home",
+        "navbar" => true,
+        "icon" => "home"
     ],
     "security" => [
-        "title" => "account options"
+        "title" => "account options",
+        "navbar" => true,
+        "icon" => "cogs"
     ],
     "404" => [
-        "title" => "404 error"
+        "title" => "404 error",
+        "navbar" => false
     ]
 ]);
 
+
 // Which apps to load on a given page
 define("APPS", [
     "home" => [

settings.template.php

@@ -38,6 +38,15 @@ $ldap_config->addDomain($ldap_config_domain);
 
 define("SITE_TITLE", "AccountHub");
 
+// Which pages to show the app icon on:
+// index, app, both, none
+define("SHOW_ICON", "both");
+// Where to put the icon: top or menu
+// Overridden to 'menu' if MENU_BAR_STYLE is 'fixed'.
+define("ICON_POSITION", "menu");
+// App menu bar style: fixed or static
+define("MENU_BAR_STYLE", "fixed");
+
 // Used to identify the system in OTP and other places
 define("SYSTEM_NAME", "Netsyms SSO Demo");
 

static/img/up-arrow-black.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 64.000001 63.999997"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="up-arrow-black.svg"
+   inkscape:export-filename="/home/skylar/Documents/Projects/Sources/SimpleInventory/static/img/up-arrow-black.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="66.826957"
+     inkscape:cy="-6.0149722"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-83.334319,-53.898981)">
+    <g
+       id="g4224"
+       transform="matrix(0.69842965,0,0,0.69842965,25.127004,31.746558)"
+       style="fill:#000000;fill-opacity:1">
+      <rect
+         ry="7.1589174"
+         rx="7.1589174"
+         y="72.534538"
+         x="85.33432"
+         height="10"
+         width="90"
+         id="rect4136"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+         ry="7.1589174"
+         rx="7.1589174"
+         y="-12.636598"
+         x="112.29343"
+         height="10"
+         width="60"
+         id="rect4136-6-7"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
+         ry="7.1589174"
+         rx="7.1589174"
+         y="112.287"
+         x="2.6430364"
+         height="10"
+         width="60"
+         id="rect4136-6-7-5"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

static/img/up-arrow-white.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 64.000001 63.999997"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="up-arrow-white.svg"
+   inkscape:export-filename="/home/skylar/Documents/Projects/Sources/SimpleInventory/static/img/up-arrow-white.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="66.826957"
+     inkscape:cy="-6.0149722"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-83.334319,-53.898981)">
+    <g
+       id="g4224"
+       transform="matrix(0.69842965,0,0,0.69842965,25.127004,31.746558)"
+       style="fill:#ffffff;fill-opacity:1">
+      <rect
+         ry="7.1589174"
+         rx="7.1589174"
+         y="72.534538"
+         x="85.33432"
+         height="10"
+         width="90"
+         id="rect4136"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+         ry="7.1589174"
+         rx="7.1589174"
+         y="-12.636598"
+         x="112.29343"
+         height="10"
+         width="60"
+         id="rect4136-6-7"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
+         ry="7.1589174"
+         rx="7.1589174"
+         y="112.287"
+         x="2.6430364"
+         height="10"
+         width="60"
+         id="rect4136-6-7-5"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>