submenu generation implemented

web/css/flowbite.min.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}.tooltip-arrow,.tooltip-arrow:before{background:inherit;height:8px;position:absolute;width:8px}.tooltip-arrow{visibility:hidden}.tooltip-arrow:before{content:"";transform:rotate(45deg);visibility:visible}[data-tooltip-style^=light]+.tooltip>.tooltip-arrow:before{border-color:#e5e7eb;border-style:solid}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=top]>.tooltip-arrow:before{border-bottom-width:1px;border-right-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=right]>.tooltip-arrow:before{border-bottom-width:1px;border-left-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=bottom]>.tooltip-arrow:before{border-left-width:1px;border-top-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=left]>.tooltip-arrow:before{border-right-width:1px;border-top-width:1px}.tooltip[data-popper-placement^=top]>.tooltip-arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.tooltip-arrow{top:-4px}.tooltip[data-popper-placement^=left]>.tooltip-arrow{right:-4px}.tooltip[data-popper-placement^=right]>.tooltip-arrow{left:-4px}.tooltip.invisible>.tooltip-arrow:before{visibility:hidden}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:8px;position:absolute;width:8px}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:after,[data-popper-arrow]:before{content:"";transform:rotate(45deg);visibility:visible}[data-popper-arrow]:after{background:inherit;height:9px;position:absolute;width:9px}[role=tooltip]>[data-popper-arrow]:before{border-color:#e5e7eb;border-style:solid}.dark [role=tooltip]>[data-popper-arrow]:before{border-color:#4b5563;border-style:solid}[role=tooltip]>[data-popper-arrow]:after{border-color:#e5e7eb;border-style:solid}.dark [role=tooltip]>[data-popper-arrow]:after{border-color:#4b5563;border-style:solid}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:before{border-left-width:1px;border-top-width:1px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:before{border-right-width:1px;border-top-width:1px}[datLine truncated

web/inc/classes/Page.class.php

@@ -46,6 +46,33 @@ class Page
         $this->menu_priority = 1;
     }
 
+    function addSubmenuItem($text, $action, $icon = '', $classes = '')
+    {
+        $active = $GLOBALS['url'][0];
+        if (!$active) $active = 'index';
+
+
+        if ($active == $action)
+            $act = 1;
+        else $act = 0;
+
+        $this->submenu[] = array('text' => $text, 'action' => $action, 'active' => $act, 'icon' => $icon, 'classes' => $classes);
+    }
+
+    function setSubmenu()
+    {
+        //run addsubmenuitem here
+    }
+
+    function getSubmenu($active = 0)
+    {
+        $prepare = array();
+        if (is_array($this->submenu))
+            foreach ($this->submenu as $key => $var)
+                $prepare[] = array('text' => $var['text'], 'base' => strtolower($this->_controller), 'action' => $var['action'], 'active' => $var['active']);
+        return $prepare;
+    }
+
     function redirect($url)
     {
         //header("Location: $url");

web/inc/core.php

@@ -107,6 +107,7 @@ function getMenu()
                 
                 $instance = new $file($file, 'index', false);
                 $instance->setMenu();
+                $instance->setSubmenu();
 
                 if($instance->maySeeThisPage()===true)
                 {
@@ -117,7 +118,7 @@ function getMenu()
                     {
                         while($arr[$menu_priority])
                             $menu_priority++;
-                        $arr[$menu_priority] = array('text'=>$menu_text,'image'=>$instance->menu_image, 'url'=>$file,'menu_class'=>$instance->menu_class);
+                        $arr[$menu_priority] = array('text'=>$menu_text,'image'=>$instance->menu_image, 'url'=>$file,'menu_class'=>$instance->menu_class,'submenu'=>$instance->submenu);
                     }
                 }
             }

web/index.php

@@ -24,7 +24,7 @@ else $url = array_filter(explode('/',ltrim(parse_url($_SERVER['REQUEST_URI'], PH
 if($url==[] && $_SERVER['HTTP_HX_CURRENT_URL'])
     $url = explode('/',ltrim(parse_url($_SERVER['HTTP_HX_CURRENT_URL'], PHP_URL_PATH),'/'));
 
-
+$GLOBALS['url'] = $url;
 //echo print_r(['url'=>$url,'server'=>$_SERVER,'request'=>$_REQUEST,'cookie'=>$_COOKIE,'session'=>$_SESSION],true);
 
 $response = callHook($url);

web/js/flowbite.min.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Flowbite",[],e):"object"==typeof exports?exports.Flowbite=e():t.Flowbite=e()}(self,(function(){return function(){"use strict";var t={647:function(t,e,i){i.r(e)},853:function(t,e,i){i.r(e),i.d(e,{afterMain:function(){return E},afterRead:function(){return _},afterWrite:function(){return x},applyStyles:function(){return S},arrow:function(){return Z},auto:function(){return a},basePlacements:function(){return c},beforeMain:function(){return b},beforeRead:function(){return m},beforeWrite:function(){return L},bottom:function(){return o},clippingParents:function(){return u},computeStyles:function(){return it},createPopper:function(){return St},createPopperBase:function(){return Pt},createPopperLite:function(){return Dt},detectOverflow:function(){return yt},end:function(){return d},eventListeners:function(){return ot},flip:function(){return _t},hide:function(){return Et},left:function(){return s},main:function(){return w},modifierPhases:function(){return k},offset:function(){return Lt},placements:function(){return v},popper:function(){return f},popperGenerator:function(){return jt},popperOffsets:function(){return Ot},preventOverflow:function(){return xt},read:function(){return y},reference:function(){return h},right:function(){return r},start:function(){return l},top:function(){return n},variationPlacements:function(){return g},viewport:function(){return p},write:function(){return O}});var n="top",o="bottom",r="right",s="left",a="auto",c=[n,o,r,s],l="start",d="end",u="clippingParents",p="viewport",f="popper",h="reference",g=c.reduce((function(t,e){return t.concat([e+"-"+l,e+"-"+d])}),[]),v=[].concat(c,[a]).reduce((function(t,e){return t.concat([e,e+"-"+l,e+"-"+d])}),[]),m="beforeRead",y="read",_="afterRead",b="beforeMain",w="main",E="afterMain",L="beforeWrite",O="write",x="afterWrite",k=[m,y,_,b,w,E,L,O,x];function A(t){return t?(t.nodeName||"").toLowerCase():null}function T(t){if(null==t)return window;if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function C(t){return t instanceof T(t).Element||t instanceof Element}function j(t){return t instanceof T(t).HTMLElement||t instanceof HTMLElement}function P(t){return"undefined"!=typeof ShadowRoot&&(t instanceof T(t).ShadowRoot||t instanceof ShadowRoot)}var S={name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var e=t.state;Object.keys(e.elements).forEach((function(t){var i=e.styles[t]||{},n=e.attributes[t]||{},o=e.elements[t];j(o)&&A(o)&&(Object.assign(o.style,i),Object.keys(n).forEach((function(t){var e=n[t];!1===e?o.removeAttribute(t):o.setAttribute(t,!0===e?"":e)})))}))},effect:function(t){var e=t.state,i={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,i.popper),e.styles=i,e.elements.arrow&&Object.assign(e.elements.arrow.style,i.arrow),function(){Object.keys(e.elements).forEach((function(t){var n=e.elements[t],o=e.attributes[t]||{},r=Object.keys(e.styles.hasOwnProperty(t)?e.styles[t]:i[t]).reduce((function(t,e){return t[e]="",t}),{});j(n)&&A(n)&&(Object.assign(n.style,r),Object.keys(o).forEach((function(t){n.removeAttribute(t)})))}))}},requires:["computeStyles"]};function D(t){return t.split("-")[0]}var I=Math.max,M=Math.min,q=Math.round;function H(){var t=navigator.userAgentData;return null!=t&&t.brands?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function B(){return!/^((?!chrome|android).)*safari/i.test(H())}function V(t,e,i){void 0===e&&(e=!1),void 0===i&&(i=!1);var n=t.getBoundingClientRect(),o=1,r=1;e&&j(t)&&(o=t.offsetWidth>0&&q(n.width)/t.offsetWidth||1,r=t.offsetHeight>0&&q(n.height)/t.offsetHeight||1);var s=(C(t)?T(t):window).visualViewport,a=!B()&&i,c=(n.left+(a&&s?s.offsetLeft:0))/o,l=(n.top+(a&&s?s.offsetTop:0))/r,d=n.width/o,u=n.height/r;return{width:d,height:u,top:l,right:c+d,bottom:l+u,left:c,x:c,y:l}}function W(t){var e=V(t),i=t.offsetWidth,n=t.offsetHeight;return Math.abs(e.width-i)<=1&&(i=e.width),Math.abs(e.height-n)<=1&&(n=e.height),{x:t.offsetLeft,y:t.offsetTop,width:i,height:n}}function z(t,e){var i=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(i&&P(i)){var n=e;do{if(n&&t.isSameNode(n))return!0;n=n.parentNode||n.host}while(n)}return!1}function R(t){return T(t).getComputedStyle(t)}function F(t){return["table","td","th"].indexOf(A(t))>=0}function N(t){return((C(t)?t.ownerDocument:t.document)||window.document).documentElement}function K(t){return"html"===A(t)?t:t.assignedSlot||t.parentNode||(P(t)?t.host:null)||N(t)}function U(t){return j(t)&&"fixed"!==R(t).position?t.offsetParent:null}function X(t){for(var e=T(t),i=U(t);i&&F(i)&&"static"===R(i).position;)i=U(i);return i&&("html"===A(i)||"body"===A(i)&&"static"===R(i).position)?e:i||function(t){var e=/firefox/i.test(H());if(/Trident/i.test(H())&&j(t)&&"Line truncated
+//# sourceMappingURL=flowbite.min.js.map

web/pages/err/notfound.html

@@ -1,4 +1,5 @@
 <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert"> 
   <p class="font-bold">404 - Not found</p>
   <p>I have no memory of <?= escape($page) ?></p>
+  <img src="https://pictshare.net/4s9gi3.gif" alt="Gandalf: I have no memory of this place"/>
 </div>

web/pages/login/controller.php

@@ -12,6 +12,17 @@ class Login extends Page {
         $this->menu_priority = 99;
     }
 
+    function setSubmenu()
+    {
+        if($_SESSION['user'])
+        {
+            $this->addSubmenuItem('Settings', '/settings', 'fas fa-cog');
+            $this->addSubmenuItem('Logout', '/login/logout', 'fas fa-sign-out-alt', 'bg-red-500');
+        }
+    }
+
+    
+
     function index()
     {
         $this->set('hello','world');
@@ -28,6 +39,12 @@ class Login extends Page {
         ],true));
     }
 
+    function logout()
+    {
+        session_destroy();
+        $this->redirect('/');
+    }
+
     function validate()
     {
         $email = $_REQUEST['email'];

web/templates/mainpage.html

@@ -7,7 +7,8 @@
     <title>Dogstats</title>
     <link href="/css/output.css" rel="stylesheet">
     <link href="/css/fontawesome.min.css" rel="stylesheet">
-    <script src="/js/htmx.min.js"></script>
+    <link href="/css/flowbite.min.css" rel="stylesheet">
+    
 </head>
 
 <body>
@@ -19,6 +20,9 @@
             <i id="spinner" class="fa-solid fa-spinner"></i>
         </div>
     </div>
+
+    <script src="/js/htmx.min.js"></script>
+    <script src="/js/flowbite.min.js"></script>
 </body>
 
 </html>

web/templates/menu.html

@@ -4,12 +4,39 @@
             <img class="h-8 w-auto" src="/imgs/dogstats-50.png" alt="">
             <span class="ml-3 text-xl">Dogstats</span>
         </a>
+        
         <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
             <?php foreach(getMenu() as $item) : ?>
-        <a href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main" class="mr-5 hover:text-gray-900"><i class="<?= $item['image'] ?>"></i> <?= $item['text'] ?></a>
+            <?php if (count($item['submenu'])) : ?>
+            <button id="dropdownDefaultButton-<?= $item['url'] ?>" data-dropdown-toggle="dropdown-<?= $item['url'] ?>" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
+                <?= $item['text'] ?> 
+                <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+                </svg>
+            </button>
+
+            <div id="dropdown-<?= $item['url'] ?>" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+                <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton-<?= $item['url'] ?>">
+                    <?php foreach($item['submenu'] as $sub) : ?>
+                        <li>
+                            <a href="<?= $sub['action'] ?>" hx-push-url="<?= $sub['action'] ?>" hx-get="<?= $sub['action'] ?>" hx-target="#main" class="<?= $sub['classes']?:'' ?> block px-4 py-2">
+                                <?php if($sub['icon']) : ?>
+                                <i class="<?= $sub['icon'] ?>"></i>
+                                <?php endif; ?>
+
+                                <?= $sub['text'] ?>
+                            </a>
+                        </li>
+                    <?php endforeach; ?>
+                </ul>
+            </div>
+            <?php else : ?>
+            <a href="/<?= $item['url'] ?>" hx-push-url="/<?= $item['url'] ?>" hx-get="/<?= $item['url'] ?>" hx-target="#main" class="mr-5 hover:text-gray-900"><i class="<?= $item['image'] ?>"></i>
+                <?= $item['text'] ?>
+            </a>
+            <?php endif; ?>
             <?php endforeach; ?>
         </nav>
 
     </div>
 </header>
-