live-web-view: Navigation style updates.

Author: dinusv

packages/live-web-view/navigation/NavContentToggle.lv

@@ -1,5 +1,5 @@
 import live-web.dom
 
 component NavContentToggle < Div{
-    classes: ['nav-content-toggle']
+    classes: ['nav-content', 'nav-content-toggle']
 }

packages/live-web-view/navigation/NavFixed.lv

@@ -0,0 +1,3 @@
+component NavFixed{
+    classes: ['nav-fixed']
+}

packages/live-web-view/navigation/NavSections.lv

@@ -5,7 +5,7 @@ import .overlay
 component NavSections < Div{
     id: navSections
 
-    classes: ['nav-sections', 'cols-' + this.children.length]
+    classes: ['nav-sections', 'cols-' + this.children.length, 'cols-toggle-' + this.children.filter(c => c.classes.includes('nav-content-toggle')).length]
     Object data
     string active: ''
 

packages/live-web-view/navigation/style/topnav.css

@@ -1,10 +1,13 @@
 &TopNav{
-    @apply flex flex-col justify-between w-full min-h-[3rem] bg-white dark:bg-mono-1 text-[#555] dark:text-mono-e md:items-center;
+    @apply relative flex flex-col justify-between w-full min-h-[3rem] bg-white dark:bg-mono-1 text-[#555] dark:text-mono-e md:items-center;
     @apply border-b border-mono-c dark:border-mono-4;
 }
 &TopNav&.position-static{
     @apply static;
 }
+&TopNav .nav-fixed{
+    @apply fixed w-full h-12;
+}
 &TopNav .nav-content{
     @apply flex items-center h-full px-4 min-h-[3rem] space-x-1 justify-between md:justify-start;
 }
@@ -27,13 +30,20 @@
     @apply w-full grid;
 }
 &TopNav .nav-sections.cols-2{
-    @apply flex justify-between;
+    @apply grid;
+    grid-template-columns: 1fr auto;
+}
+&TopNav .nav-sections.cols-2.cols-toggle-1{
+    @apply block md:grid;
 }
 &TopNav .nav-sections.cols-3{
     /* @apply grid grid-cols-3; */
     display: grid;
     grid-template-columns: 1fr auto 1fr;;
 }
+&TopNav .nav-sections.cols-3.cols-toggle-1{
+    @apply grid-cols-2 md:grid-cols-3;
+}
 &TopNav .nav-sections.cols-3 .nav-content:last-child{
     justify-self: end;
 }