make coupon book and make navigation bar

@@ -6,7 +6,7 @@ ul.sidenav {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  width: 10%;
+  width: 15%;
   background-color: #f1f1f1;
   height: 100%;
   position: fixed;
@@ -17,7 +17,6 @@ ul.sidenav li a {
   color: #000;
   padding: 8px 16px;
   text-decoration: none;
-  transition: 0.3s;
 }
 ul.sidenav li a.active {
   background-color: #4caf50;
@@ -27,19 +26,33 @@ ul.sidenav li a:hover:not(.active) {
   background-color: #555;
   color: #fff;
 }
+#title {
+  text-align: center;
+  width: 100%;
+  font-size: 50px;
+  padding-bottom: 30px;
+}
 #content {
   margin-left: 25%;
-  padding: 1px 16px;
+  padding: 10px 16px;
   height: 100%;
 }
 table {
-  display: block;
   width: 70%;
-  height: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  vertical-align: middle;
 }
 td {
+  vertical-align: middle;
   text-align: center;
-  display: block;
+  border: 1px solid #ddd;
+  width: 10%;
+  height: 0%;
+  padding-bottom: 20%;
+  background-image: url("/images/stamp.jpg");
+  background-repeat: no-repeat;
+  background-position: center top;
 }
 .bold {
   color: #ffc0cb;
@@ -49,8 +62,26 @@ td {
   color: #808080;
   font-size: 8pt;
 }
-#map {
-  width: 100%;
-  height: 400px;
-  background-color: grey;
+#show {
+  width: 15%;
+  display: inline-block;
+  float: left;
+  position: fixed;
+  overflow: auto;
+}
+#maintitle {
+  text-align: center;
+  background: #ffc0cb;
+  padding: 8px 16px;
+  margin-left: 15%;
+}
+#mynav {
+  display: block;
+  margin-left: -250px;
+  transition: all 0.4s ease-in-out 0s;
+}
+#mynav.open {
+  transition: all 0.4s ease-in-out 0s;
+  float: left;
+  margin-left: 0px;
 }

 body
 
+
+
+
 a
   color: gray;
 
@@ -7,7 +10,7 @@ ul.sidenav
     list-style-type: none;
     margin: 0;
     padding: 0;
-    width: 10%;
+    width: 15%;
     background-color: #f1f1f1;
     height: 100%;
     position : fixed;
@@ -18,7 +21,6 @@ ul.sidenav li a
     color: #000;
     padding: 8px 16px;
     text-decoration: none;
-    transition: 0.3s;
 
 
 ul.sidenav li a.active
@@ -31,21 +33,33 @@ ul.sidenav li a:hover:not(.active)
     color: white;
 
 
+#title
+    text-align : center;
+    width : 100%
+    font-size : 50px;
+    padding-bottom : 30px;
+
 #content
 
     margin-left: 25%;
-    padding: 1px 16px;
+    padding: 10px 16px;
     height: 100%;
 
 table
-    display : block
-    width : 70%
-    height : 100%
-
-
+    width : 70%;
+    border-collapse: collapse;
+    text-align : center;
+    vertical-align : middle;
 td
+    vertical-align: middle;
     text-align : center;
-    display : block
+    border: 1px solid #ddd;
+    width : 10%;
+    height : 0%;
+    padding-bottom: 20%;
+    background-image : url("/images/stamp.jpg");
+    background-repeat: no-repeat;
+    background-position: center top;
 
 .bold
     color : pink;
@@ -53,3 +67,25 @@ td
 .small
     color : grey;
     font-size : 8pt;
+#show
+    width: 15%;
+    display : inline-block;
+    float : left;
+    position : fixed;
+    overflow : auto;
+
+#maintitle
+    text-align : center;
+    background : pink;
+    padding: 8px 16px;
+    margin-left : 15%;
+
+#mynav
+    display: block;
+    margin-left: -250px;
+    transition:all 0.4s ease-in-out 0s;
+
+#mynav.open
+    transition:all 0.4s ease-in-out 0s;
+    float:left;
+    margin-left : 0px;

@@ -20,6 +20,9 @@ router.get('/home', function(req,res,next){
 
   res.render('main', {title: '맛집견문록'});
 });
+
+
+
 router.get('/mybook', function(req, res, next){
 
   var rows = new Array();
@@ -35,15 +38,24 @@ router.get('/mybook', function(req, res, next){
   var temp5 = {name : "와장창창", place : "윌집앞"}
   var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
   var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
+  var temp7 = {name : "스타벅스", place : "서울특별시 영등포구 여의도동"}
 
   rows.push(temp1);
   rows.push(temp2);
-  rows.push(temp3);
-  rows.push(temp4);
-  rows.push(temp5);
+//  rows.push(temp3);
+//  rows.push(temp4);
+//  rows.push(temp5);
   rows.push(temp6);
+  rows.push(temp7);
 
   res.render('mybook', {title: '견문록 보기', rows : rows});
 
 });
+
+router.get('/test', function(req, res, next){
+
+res.render('test', {title: 'test'});
+
+});
+
 module.exports = router;

@@ -10,11 +10,18 @@
   <script>
 
         $(document).ready(function() {
-          $('.sidenav').hide();
+
+
+
+
+
 
           $('#show').click(function() {
 
-                  $('.sidenav').slideToggle("fast");
+                  //$('.sidenav').slideToggle("fast");
+                  $this = $(this);
+                  $nav = $('#mynav');
+                  $nav.toggleClass('open');
           });
       });
 
@@ -24,22 +31,22 @@
 
 
 
-    <div id ="menu">
       <div id ="show">clickmenu</div>
+      <div id ="maintitle">맛집견문록</div>
 
+      <div id ="mynav">
          <ul class="sidenav">
               <li><a class="active" href="home">home</a></li>
               <li><a href="map">맛집도장찍기</a></li>
               <li><a href="mybook">견문록확인</a></li>
 
          </ul>
-
-
     </div>
 
 
-    <div id = "header"> </div>
 
+
+    <div id= "title"></div>
     <div id ="content">
 
         <h1><%= title %></h1>

@@ -9,11 +9,14 @@
   <script>
 
         $(document).ready(function() {
-          $('.sidenav').hide();
+        //  $('.sidenav').hide();
 
           $('#show').click(function() {
 
-                  $('.sidenav').slideToggle("fast");
+                  //$('.sidenav').slideToggle("fast");
+                  $this = $(this);
+                  $nav = $('#mynav');
+                  $nav.toggleClass('open');
           });
       });
 
@@ -22,22 +25,20 @@
 
 
 
-
-    <div id ="menu">
   <div id ="show">clickmenu</div>
+  <div id ="maintitle">맛집견문록</div>
 
+  <div id ="mynav">
      <ul class="sidenav">
           <li><a class="active" href="home">home</a></li>
           <li><a href="map">맛집도장찍기</a></li>
           <li><a href="mybook">견문록확인</a></li>
 
      </ul>
+</div>
 
 
-    </div>
-
-
-    <div id = "header"> </div>
+    <div id = "title"> </div>
 
     <div id ="content">
 

@@ -9,11 +9,14 @@
   <script>
 
         $(document).ready(function() {
-          $('.sidenav').hide();
+          //$('.sidenav').hide();
 
           $('#show').click(function() {
 
-                  $('.sidenav').slideToggle("fast");
+                  //$('.sidenav').slideToggle("fast");
+                  $this = $(this);
+                  $nav = $('#mynav');
+                  $nav.toggleClass('open');
           });
       });
 
@@ -22,22 +25,24 @@
 
 
 
-
-    <div id ="menu">
   <div id ="show">clickmenu</div>
+  <div id ="maintitle">맛집견문록</div>
 
+  <div id ="mynav">
      <ul class="sidenav">
           <li><a class="active" href="home">home</a></li>
           <li><a href="map">맛집도장찍기</a></li>
           <li><a href="mybook">견문록확인</a></li>
 
      </ul>
+</div>
 
 
-    </div>
+    <div id = "title">
 
+      ㅇㅇㅇ님의 맛집 견문록<br/>
 
-    <div id = "header"> </div>
+    </div>
 
     <div id ="content">
 
@@ -45,31 +50,39 @@
 
 
       <%
-                        for( var i=0;  i<rows.length; i++)
+          for(var i=0; i<rows.length; i++)
           {
 
+              var oneItem = rows[i];
 
-                          for( var j  = 0; j<3; j++){
-                              num = i * 3 + j;
-                              var item = rows[num];
+      %>
 
+      <%if(i==0){ %>
 
+              <tr>
+                <td><p class="bold"><%=i%>:a <%=oneItem.name%></p>
+                <p class="small"><%=oneItem.place%></p></td>
 
-                      %>
+     <%} else if (i%3==0){%>
+              </tr>
                    <tr>
-                          <td><p class="bold"><%=num%> : <%=item.name%></p>
+                     <td><p class="bold"><%=i%>:b <%=oneItem.name%></p>
+                     <p class="small"><%=oneItem.place%></p></td>
 
-                            <p class="small"><%=item.place%></p></td>
 
+     <%}else if(i%3!=0 && i!=rows.length-1){%>
 
-                            <% }  %>
+                    <td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
+                    <p class="small"><%=oneItem.place%></p></td>
 
-                      </tr>
+    <%}else{%>
+
+    <td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
+    <p class="small"><%=oneItem.place%></p></td></tr>
+
+      <%}}%>
 
 
-                      <%
-                       }
-                      %>
       </table>
 
 
@@ -83,6 +96,7 @@
 
 
 
+
   </body>
 
 </html>