Change position of options/action menu

src/app.scss

@@ -73,7 +73,7 @@ html {
     --chatInputPaddingRight: 20px;
     --chatInputPaddingLeft: 20px;
   }
-  .main-menu .gpt-logo {
+  .main-menu .menu-nav-bar {
     display: none;
   }
   .main-menu .level-right {
@@ -445,12 +445,23 @@ aside.menu.main-menu .menu-expanse {
   margin: 5px;
 }
 
-.main-menu .gpt-logo .icon {
+.main-menu .menu-nav-bar .gpt-logo .icon {
   display: inline-block;
   margin-top: 8px;
   margin-left: 8px;
 }
 
+.main-menu .menu-nav-bar .chat-option-menu {
+  padding-right: 2px;
+}
+
+@media only screen and (max-width: 900px) {
+  .main-menu .dropdown.is-right .dropdown-menu {
+    right:auto;
+    left:0;
+  }
+}
+
 .message-body {
   z-index: 1;
 }

src/lib/Navbar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  // import { params } from 'svelte-spa-router'
+  import { params } from 'svelte-spa-router'
   import { pinMainMenu } from './Storage.svelte'
   import logo from '../assets/logo.svg'
-  // import ChatOptionMenu from './ChatOptionMenu.svelte'
+  import ChatOptionMenu from './ChatOptionMenu.svelte'
   import Fa from 'svelte-fa/src/fa.svelte'
   import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons/index'
 
-// $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
+$: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
 </script>
 
 <nav class="navbar is-fixed-top" aria-label="main navigation">
@@ -31,8 +31,8 @@
       <img src={logo} alt="ChatGPT-web" width="24" height="24" />
       <p class="ml-2 is-size-6 has-text-weight-bold">ChatGPT-web</p>
     </a>
-    <!-- <div class="chat-option-menu navbar-item is-pulled-right">
+    <div class="chat-option-menu navbar-item is-pulled-right">
       <ChatOptionMenu bind:chatId={activeChatId} />
-    </div> -->
+    </div>
   </div>
 </nav>

src/lib/Sidebar.svelte

@@ -16,11 +16,14 @@
 
 <aside class="menu main-menu" class:pinned={$pinMainMenu} use:clickOutside={() => { $pinMainMenu = false }}>
   <div class="menu-expanse">
-      <div class="gpt-logo navbar-brand">
-        <a class="navbar-item" href={'#/'}>
+      <div class="navbar-brand menu-nav-bar">
+        <a class="navbar-item gpt-logo" href={'#/'}>
           <img src={logo} alt="ChatGPT-web" width="24" height="24" />
           <p class="ml-2 is-size-5 has-text-weight-bold">ChatGPT-web</p>
         </a>
+        <div class="chat-option-menu navbar-item is-pulled-right">
+          <ChatOptionMenu bind:chatId={activeChatId} />
+        </div>
       </div>
     <ul class="menu-list menu-expansion-list">
       {#if sortedChats.length === 0}
@@ -46,9 +49,6 @@
               ><span class="greyscale mr-2"><Fa icon={faSquarePlus} /></span> New chat</a
             ></div>
           {/if}
-          <div class="level-item">
-            <ChatOptionMenu bind:chatId={activeChatId} style="is-right is-up" />
-          </div>
         </div>
       </li>
     </ul>