fix: update sidenav to use resize and toggle

frankpagan · frankpagan · commit 616ef9a365e6 · 2021-09-12T04:40:17.000Z
diff --git a/demo/index.html b/demo/index.html
@@ -16,7 +16,7 @@
 
 
         <!-- CoCreate SideNav Right -->
-        <div id="menuR" class="cocreate-sidenav sidenav-right background:gainsboro" data-main_content="canvas" sidenav-default_desktop="expanded" sidenav-default_tablet="expanded" sidenav-default_phone="expanded">
+        <sidenav id="menuR" class="position:fixed top:0px right:0px direction:rtl overflow:hidden background:gainsboro height:100vh width:300px" resizable resize-target="[content_id='content']" resize-property="margin-right" resize-value="width">        
             <h1 id="new" class="background:green">testing</h1>
             <div class="padding:5px height:100vh overflow:auto">
                 <form>
@@ -109,8 +109,8 @@ <h1 id="new" class="background:green">testing</h1>
 
                 </form>
             </div>
-            <div class="resizeHandler"></div>
-        </div>
+            <div resize="left"></div>
+        </sidenav>
         <!-- End CoCreate SideNav Right -->
 
         <!-- end floating btn -->
diff --git a/docs/index.html b/docs/index.html
@@ -17,13 +17,13 @@
 </head>
 
 <body>
-    <nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" main-content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
+    <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
     </nav>
-    <sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
+    <sidenav id="menuL" class="position:fixed top:0px left:0px background:whitesmoke height:100vh width:300px width:300px:hover width:0px@xs" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
         <menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
-        <div class="resizeHandler"></div>
+        <div resize="right"></div>
     </sidenav>
-    <main class="padding-top:15px padding:15px@lg@xl" main-content_id="content" id="cocreate-domEditorPanel">
+    <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-domEditorPanel">
         <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
             <div class="display:flex align-items:center">
                 <h2>CoCreate-domEditorPanel</h2>
