update mobile ui

src/css/header.css

@@ -116,7 +116,7 @@ body {
   color: #333;
   font-family: inherit;
   font-size: 0.95rem;
-  width: 120px;
+  /* width: 120px; */
   height: 45px;
   border: 1px solid #dbdbdb;
   border-radius: 28px;
@@ -305,19 +305,27 @@ body {
 }
 
 @media screen and (max-width: 768.5px) {
+  .navbar-brand .navbar-item.search {
+    display: none;
+  }
+
   .mobile-menu-item > a {
     width: 100%;
     justify-content: center;
   }
 
+  .mobile-toolbar .field {
+    width: 100%;
+  }
+
   #search-input {
     width: 100%;
   }
 }
 
 @media screen and (min-width: 769px) {
-  #search-input {
-    width: 100%;
+  .mobile-toolbar .field {
+    display: none;
   }
 }
 
@@ -334,10 +342,6 @@ body {
   .navbar-menu {
     display: none;
   }
-
-  .navbar-brand .navbar-item.search {
-    display: none;
-  }
 }
 
 @media screen and (min-width: 1024px) {

src/css/nav.css

@@ -248,7 +248,6 @@
   position: relative;
   border-radius: 0.5rem;
   border: 2px solid var(--color-smoke-90);
-  transition: all 0.15s ease-in-out;
   z-index: var(--z-index-page-version-menu);
 }
 

src/css/toc.css

@@ -313,7 +313,8 @@
   font-weight: 300;
 }
 
-#expand-btn {
+#expand-btn,
+#close-btn {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -324,12 +325,18 @@
   transition: 300ms ease;
 }
 
-#expand-btn:hover {
+#close-btn {
+  display: none;
+}
+
+#expand-btn:hover,
+#close-btn:hover {
   cursor: pointer;
   background-color: #005bb5;
 }
 
-#expand-btn:active svg {
+#expand-btn:active svg,
+#close-btn:active svg {
   transform: scale(0.9);
 }
 
@@ -506,3 +513,55 @@
     background: var(--color-bwg-main);
   }
 }
+
+@media screen and (max-width: 768.5px) {
+  .chat {
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .chat.expand {
+    width: 100%;
+    height: 100%;
+  }
+  .chat .chat-head .chat-logo {
+    margin-top: 3px;
+    width: 30px;
+    height: 30px;
+  }
+  .chat-logo-title-contents .chat-logo-title.main{
+    font-size: 20px;
+  }
+  .chat-logo-title-contents .chat-logo-title.sub {
+    font-size: 10px;
+  }
+  #expand-btn {
+    display: none;
+  }
+  #close-btn {
+    display: flex;
+  }
+  .chat .chat-body {
+    height: 100%;
+  }
+  .chat .chat-area textarea {
+    font-size: 13px;
+  }
+  .chat .chat-body > ul {
+    max-width: 90%;
+  }
+  .chat .chat-body .message {
+    font-size: 12px;
+  }
+  .chat .chat-head .model {
+    top: 60px;
+  }
+  .chat-head .model .tooltip .tooltip-text {
+    font-size: 12px;
+    width: 200px;
+  }
+}

src/css/toolbar.css

@@ -16,11 +16,11 @@
 .mobile-toolbar {
   width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 
-.nav-toggle {
+.nav-toggle,
+#collapse-panel-btn {
   border: none;
   outline: none;
   line-height: inherit;
@@ -35,16 +35,10 @@
   margin-right: 10px;
 }
 
-.nav-toggle:active {
+.nav-toggle:active,
+#collapse-panel-btn:active {
   background-color: rgba(0, 0, 0, 0.1);
 }
-.mobile-toolbar .field {
-  width: 100%;
-}
-
-.mobile-toolbar .field input {
-  width: 100%;
-}
 
 @media screen and (min-width: 1024px) {
   .mobile-toolbar {
@@ -55,11 +49,6 @@
   } */
 }
 
-.nav-toggle.is-active {
-  background-image: url(../img/back.svg);
-  background-size: 41.5%;
-}
-
 .home-link {
   display: block;
   background: url(../img/home-o.svg) no-repeat center;
@@ -87,6 +76,11 @@
   font-weight: 600;
 }
 
+.panel-toolbar {
+  margin-top: 17px;
+  padding-left: 20px;
+}
+
 @media screen and (min-width: 1024px) {
   .edit-this-page {
     display: block;

src/js/01-nav.js

@@ -6,6 +6,7 @@
   var navContainer = document.querySelector('.nav-container')
   if (!navContainer) return
   var navToggle = document.querySelector('.nav-toggle')
+  var panelToggle = document.getElementById('collapse-panel-btn')
   var nav = navContainer.querySelector('.nav')
   var navMenuToggle = navContainer.querySelector('.nav-menu-toggle')
 
@@ -95,6 +96,10 @@
     if (e.detail > 1) e.preventDefault()
   })
 
+  panelToggle.addEventListener('click', () => {
+    navContainer.classList.remove('is-active')
+  })
+
   function onHashChange () {
     var navLink
     var hash = window.location.hash
@@ -165,7 +170,7 @@
     // trapEvent(e)
     // var html = document.documentElement
     // html.classList.add('is-clipped--nav')
-    navToggle.classList.add('is-active')
+    // navToggle.classList.add('is-active')
     navContainer.classList.add('is-active')
     // var bounds = nav.getBoundingClientRect()
     // var expectedHeight = window.innerHeight - Math.round(bounds.top)

src/js/08-chat.js

@@ -10,6 +10,7 @@
   const stopButton = document.getElementById('stop-btn')
   const chatBody = document.querySelector('.chat .chat-body')
   const expandButton = document.querySelector('#expand-btn svg')
+  const closeButton = document.getElementById('close-btn')
   const productButton = document.getElementById('model-toggle')
   const productList = document.getElementById('model-popover')
   const backdrop = document.querySelector('.model .backdrop')
@@ -106,6 +107,10 @@
     }
   })
 
+  closeButton.addEventListener('click', () => {
+    chat.classList.remove('show')
+  })
+
   productButton.addEventListener('click', () => {
     if (productList.classList.contains('show')) {
       productList.classList.remove('show')

src/partials/chat.hbs

@@ -15,6 +15,11 @@
           <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
         </svg>
       </div>
+      <div id="close-btn">
+        <svg data-slot='icon' fill='none' strokeWidth='1.5' stroke='#fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='30' height='30'>
+          <path strokeLinecap='round' strokeLinejoin='round' d='M6 18 18 6M6 6l12 12'></path>
+        </svg>
+      </div>
       <div class="model">
         <div class="backdrop"></div>
         <button id="model-toggle">전체</button>

src/partials/nav.hbs

 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
-      {{!-- <button>
-        <svg stroke="#0072ce" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
-          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
-          <path d="M9 3v18"></path>
-          <path d="m16 15-3-3 3-3"></path>
-        </svg>
-      </button> --}}
+      {{> panel-toolbar}}
       {{> nav-explore}}
       {{> nav-menu}}
     </div>

src/partials/panel-toolbar.hbs

+<div class="panel-toolbar">
+  <button id="collapse-panel-btn">
+    <svg stroke="#0072ce" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+      <path d="M9 3v18"></path>
+      <path d="m16 15-3-3 3-3"></path>
+    </svg>
+  </button>
+</div>