fix: update sidenav to use resize and toggle

frankpagan · frankpagan · commit 66fe5c62047e · 2021-09-12T04:40:19.000Z
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-kanban">
+        <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="cocreate-kanban">
             <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
                 <div class="display:flex align-items:center">
                     <h2>CoCreate-kanban</h2>
@@ -148,16 +148,9 @@ <h2 class="padding:5px_0px">Demo</h2>
 		        <i class="fas fa-pencil-alt"></i>
 	        </button>
 		</main>
-        <script>
-            var config = {
-                apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
-                organization_Id: '5de0387b12e200ea63204d6c',
-                host: 'wss://server.cocreate.app:8088'
-            }
-        </script>
-
-    
-        <!--CoCreateJS-->
-        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
+		
+ 		<script src="./apikey.js"></script>
+        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+        
     </body>
 </html>
diff --git a/src/kanban-form.html b/src/kanban-form.html
@@ -60,7 +60,7 @@
 		<div id="modal-viewport" class="hidden"></div>
 
 		<!-- Navbar -->
-		<nav class="nav display:flex align-items:center background:whitesmoke" main-content_id="content" scroll="sticky-nav, hide-nav" scroll-up="5" scroll-down="5">
+		<nav class="nav display:flex align-items:center background:whitesmoke" content_id="content" scroll="sticky-nav, hide-nav" scroll-up="5" scroll-down="5">
 
 			<!-- Horizontal Scroll Nav/Tabs -->
 			<ul class="display:inline-flex direction:rtl overflow:overlay font-size:20px align-items:center list-style-type:none width:100% height:50px">
@@ -108,7 +108,7 @@
 		</nav>
 
 		<!-- Main Content -->
-		<main class="padding:10px" main-content_id="content">
+		<main class="padding:10px" content_id="content">
 
             <form realtime="true" collection="module_activity" pass_id="form-fields">
 
diff --git a/src/kanban.html b/src/kanban.html
@@ -11,7 +11,7 @@
 
 	<body>
 		<div id="modal-viewport" class="hidden"></div>
-		<div class="nav display:flex align-items:center background:whitesmoke" main-content_id="content" scroll-effect="hide-nav" scroll-up="1" scroll-down="1">
+		<div class="nav display:flex align-items:center background:whitesmoke" content_id="content" scroll-effect="hide-nav" scroll-up="1" scroll-down="1">
 
 			<!-- Horizontal Scroll Nav/Tabs -->
 			<ul class="overflow:overlay display:inline-flex direction:rtl font-size:20px align-items:center list-style-type:none width:100% height:50px">
@@ -38,7 +38,7 @@
 				</li>
 			</ul>
 		</div>
-		<div main-content_id="content">
+		<div content_id="content">
 
 			<div id="board" class="display:flex overflow:overlay height:90vh">
 
