menu activeness and contentelement completnesses

app/modules/filesinfolders.php

                 break;
                 
             case 'devide':
-                $new = "<div>";
+                $new = '<div class="content_element_devided">';
                 $contents = explode($request[1],implode("\n",$body));
                 $counter=0;
                 foreach($contents as $part) {

app/views/header.htm

     <img class="logo" src="{{@RESOURCES}}img/logo.png" />
   </check>
   <h1><img class="text" src="/{{ @banner }}" alt="{{ @title }}" /></h1>
+  <nav id="languages">
+    <include href="navigation.htm" with="menu={{ @navi.languages }}" />
+  </nav>
 </a>

app/views/navigation.htm

-<ul>
+<ul class="nav level{{ @level }}">
     <repeat group="{{ @menu }}" key="{{ @key }}" value="{{ @item }}">
         
-        <li><a href="{{ @item.href }}" >{{ @item.name }}</a>
+        <li class="{{ @item.class }}"><a href="{{ @item.href }}">{{ @item.name }}</a>
             <check if="{{ is_array(@item.submenu) }}">
-                <include href="navigation.htm" with="menu={{ @item.submenu }}" />
+                <include href="navigation.htm" with="menu={{ @item.submenu }},level={{ @level + 1 }}" />
             </check>
         </li>
 
     </repeat>
 </ul>
 
+
+
 <check if="{{ false }}">
 <ul>
   <repeat group="{{ @menu }}" key="{{ @key }}" value="{{ @item }}">

app/views/tpl/index.html

                 <nav>
                     <include href="navigation.htm" with="menu={{ @navi.footer }}" />
                 </nav>
-                <nav id="languages">
-                    <include href="navigation.htm" with="menu={{ @navi.languages }}" />
-                </nav>
+                
             </footer>
 
         </div> <!-- #page-wrap -->

index.php

 
 function menu_recursion($m,$root="") {
     $f3 = \Base::instance();
+    //$url = explode("/", $f3->get('url'));
     $out=[];
     foreach ($m as $key=>$value) {
         $folder = $key == "index" ? "" : "/".$key;
         $path = $root.$folder;
 
         if (is_array($value)) {
+            # submenu
             $submenu=menu_recursion($value,$path);
             $out[$path]=$submenu[$path];
             unset($submenu[$path]);
             $out[$path]['submenu']=$submenu;
         } else {
+            $class="";
             $ex = explode(":=", $value);
             if (count($ex) > 1) {
                 # external link
             } else {
                 # internal link
                 $href = $f3->get('SITE_URL').$path;
+                $class .= in_array($path,$f3->get('url')) ? ' active' : ' away';
             }
             $out[$path]['name']=$ex[0];
             $out[$path]['href']=$href;
-            
-            //print($path." - ".$ex[0]." - ".$href."<br>");
+            $out[$path]['class']=$class;
         }
     }
     return $out;
     }
 
     if (is_array($menu)) {
-        //var_dump($menu);
-        //print("<br>");
         $menu=menu_recursion($menu);
     }
 
     $f3->set('navi.'.$menu_name, $menu);
-    //var_dump($f3->get('navi.'.$menu_name));
-    //print("<br>");
 }
 
+// this is needed so the menu can compare the current page with a link to it
+// and use this information to determine the active state
+$tmp_url = substr($_SERVER['REQUEST_URI'],1);
+$url=substr($tmp_url,0,(strpos($tmp_url,'?') === false) ? 999 : strpos($tmp_url,'?'));
+$url_ex=explode('/',$url);
+$url=array();
+for ($i=1;$i<=count($url_ex);$i++) {
+    $url[]="/".implode("/",array_slice($url_ex,0,$i));
+}
+$f3->set('url', $url);
+$f3->set('level', 1); // this is for templates, to be abl to count nesting
 read_menu("main");
 read_menu("footer");
 read_menu("network");
 read_menu("languages");
 
-// this is needed so the menu can compare the current page with a link to it
-// and use this information to determine the active state
-$tmp_url = substr($_SERVER['REQUEST_URI'],strlen($f3->get('SITE_URL'))+1);
-$url=substr($tmp_url,0,(strpos($tmp_url,'?') === false) ? 999 : strpos($tmp_url,'?'));
-$f3->set('url', explode("/", $url));
 
 
 ///////////////////////////////////

rsc/sass/_design.scss

         text-decoration: underline;
     }
 }
+
+ul.nav {
+    list-style: none;
+    
+    li { margin:0; }
+    .active>a {
+        font-weight: bold;
+    }
+}
+
+#main-nav {
+    background: #eec;
+    border-radius:1.2em 1.2em 0 0;
+    
+    ul { padding-left: 1.5em; }
+    .level1>li,.level2>li { margin-top: 1em; }
+}

rsc/sass/_freaCMSfeatures.scss

 .content_elment_box_body {
     display: none;
 }
- 
+
+
+// devided
+.content_element_devided {
+    display: grid;
+    grid-template-columns:50% 50%;
+}
+
 // lightbox -----------------------
 
 .featherlight .featherlight-content {

rsc/sass/_structure.scss

 //    margin:0;
 //    padding:0;
 }
-
+html,body {
+    height:100%;
+    margin:0;
+    padding:0;
+}
 
 
 
         height:100px;
     }
 }
+
+#page-wrap {
+    display: grid;
+    grid-template-columns:250px auto;
+    grid-template-rows:200px 100fr 3em;
+    height:100vh;
+    overflow: hidden;
+    max-width:1300px;
+    margin:0 auto;
+    
+    >header {
+        grid-column:1 / -1;
+    }
+    #main-nav {
+        grid-column:1 / span 1;
+        grid-row:2 / -1;
+    }
+    
+    #content {
+        grid-column: 2 / -1;
+        grid-row: 2 / 3;
+        overflow-y: auto;
+    }
+    #main-footer {
+        grid-column: 2 / -1;
+        grid-row: -2 / -1;
+    }
+}
+
+
+#main-nav {
+    .level2 .away ul {
+        display: none;
+    }
+}
+
+#content {
+    img {
+        max-width: 100%;
+    }
+}

rsc/style.css

 .content_elment_box_body {
   display: none; }
 
+.content_element_devided {
+  display: grid;
+  grid-template-columns: 50% 50%; }
+
 .featherlight .featherlight-content {
   background: none;
   overflow: visible; }
   #mobile-nav.open a.menu-toggle {
     background-position: bottom; }
 
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0; }
+
 .content_element_page.wall a.content_element_box {
   float: left; }
 .content_element_page.wall:after {
 .content_element_page.wall div.content_element_box {
   height: 100px; }
 
+#page-wrap {
+  display: grid;
+  grid-template-columns: 250px auto;
+  grid-template-rows: 200px 100fr 3em;
+  height: 100vh;
+  overflow: hidden;
+  max-width: 1300px;
+  margin: 0 auto; }
+  #page-wrap > header {
+    grid-column: 1 / -1; }
+  #page-wrap #main-nav {
+    grid-column: 1 / span 1;
+    grid-row: 2 / -1; }
+  #page-wrap #content {
+    grid-column: 2 / -1;
+    grid-row: 2 / 3;
+    overflow-y: auto; }
+  #page-wrap #main-footer {
+    grid-column: 2 / -1;
+    grid-row: -2 / -1; }
+
+#main-nav .level2 .away ul {
+  display: none; }
+
+#content img {
+  max-width: 100%; }
+
 a {
   text-decoration: none; }
   a:hover {
     text-decoration: underline; }
 
+ul.nav {
+  list-style: none; }
+  ul.nav li {
+    margin: 0; }
+  ul.nav .active > a {
+    font-weight: bold; }
+
+#main-nav {
+  background: #eec;
+  border-radius: 1.2em 1.2em 0 0; }
+  #main-nav ul {
+    padding-left: 1.5em; }
+  #main-nav .level1 > li, #main-nav .level2 > li {
+    margin-top: 1em; }
+
 /*# sourceMappingURL=style.css.map */

rsc/style.css.map

 {
 "version": 3,
-"mappings": "AAUA,CAAE;EACE,UAAU,EAAC,UAAU;;ACJzB,IAAK;EACD,KAAK,EALH,IAAI;EAMN,UAAU,EARP,IAAI;;AAWX,CAAE;EACE,KAAK,EAVH,IAAI;;ACCN,4BAAO;EACC,OAAO,EAAE,IAAI;AAGjB,kCAAO;EACH,OAAO,EAAE,MAAM;AAEnB,qCAAU;EACN,OAAO,EAAE,IAAI;AAGrB,6CAAwB;EACpB,OAAO,EAAE,YAAY;EACrB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,MAAM,EAAC,GAAG;EAEV,oDAAO;IAAE,MAAM,EAAC,IAAI;EACpB,iDAAI;IACA,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;EAEf,sDAAS;IACL,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,MAAM,EAAC,CAAC;IACR,KAAK,EAAC,CAAC;IACP,UAAU,EAAE,wBAAqB;;AAI7C,wBAAyB;EACrB,OAAO,EAAE,IAAI;;AAKjB,mCAAoC;EAChC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,OAAO;EACjB,4DAAyB;IACrB,KAAK,ED5CN,IAAI;IC6CH,UAAU,EAAE,IAAI;IAChB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,KAAK;EAEpB,yCAAuB;IACnB,0CAAO;MAAE,KAAK,EAAC,IAAI;MAAE,MAAM,EAAC,IAAI;;AASpC,yCAAuB;EAD3B,SAAU;IAEF,OAAO,EAAE,IAAI;;AAIrB,WAAY;EACR,OAAO,EAAE,IAAI;EACb,yCAAuB;IAF3B,WAAY;MAGJ,OAAO,EAAE,KAAK;MACd,yBAAc;QACV,OAAO,EAAE,KAAK;EAGtB,qBAAU;IACN,OAAO,EAAE,IAAI;EAEjB,0BAAiB;IACb,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,IAAI,EAAC,CAAC;IACN,OAAO,EAAC,EAAE;IACV,UAAU,EAAE,wBAAqB;IACjC,MAAM,EAAC,IAAI;IACX,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,MAAM;EAEpB,yBAAc;IACV,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,KAAK,EAAC,CAAC;IACP,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,GAAG;IACX,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,wBAAqB;IACjC,gBAAgB,EAAE,oBAAoB;IACtC,mBAAmB,EAAE,GAAG;IACxB,eAAe,EAAE,IAAI;EAEzB,8BAAqB;IACjB,mBAAmB,EAAE,MAAM;;AC3F/B,gDAAsB;EAClB,KAAK,EAAE,IAAI;AAEf,gCAAQ;EACJ,OAAO,EAAC,EAAE;EACV,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;AAEf,kDAAwB;EACpB,MAAM,EAAC,KAAK;;ACpBpB,CAAE;EACE,eAAe,EAAE,IAAI;EACrB,OAAQ;IACJ,eAAe,EAAE,SAAS",
+"mappings": "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",
 "sources": ["sass/main.scss","sass/_colours.scss","sass/_freaCMSfeatures.scss","sass/_structure.scss","sass/_design.scss"],
 "names": [],
 "file": "style.css"