Inbox attriubute bar (#2907)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/theme/styles/panel.scss

@@ -88,10 +88,12 @@
       min-width: 0;
       min-height: 3rem;
       background-color: var(--board-card-bg-color);
+      &:not(.embedded) {
         border: 1px solid var(--divider-color);
         border-bottom: none;
         border-radius: .5rem .5rem 0 0;
       }
+    }
     &__content {
       flex-grow: 1;
       margin: 0 .75rem;

packages/ui/src/components/Panel.svelte

@@ -86,10 +86,12 @@
     checkPanel()
   }}
 >
-  {#if !embedded}
-    <div class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}">
+  <div
+    class="popupPanel-title__bordered {twoRows && !withoutTitle ? 'flex-col flex-no-shrink' : 'flex-row-center'}"
+    class:embedded
+  >
     <div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
-        {#if allowClose}
+      {#if allowClose && !embedded}
         <Button
           icon={IconClose}
           kind={'transparent'}
@@ -99,7 +101,9 @@
           }}
         />
       {/if}
+      {#if !embedded}
         {#if $$slots.navigator}<slot name="navigator" />{/if}
+      {/if}
       <div class="popupPanel-title__content">
         {#if !twoRows && !withoutTitle}<slot name="title" />{/if}
       </div>
@@ -149,7 +153,6 @@
       <div class="popupPanel-title row-bottom"><slot name="title" /></div>
     {/if}
   </div>
-  {/if}
   <div class="popupPanel-body {$deviceInfo.isMobile ? 'mobile' : 'main'}" class:asideShown class:embedded>
     {#if $deviceInfo.isMobile}
       <Scroller horizontal padding={'.5rem .75rem'}>

plugins/notification-resources/src/components/Inbox.svelte

@@ -22,6 +22,8 @@
   import view from '@hcengineering/view'
   import NotificationView from './NotificationView.svelte'
 
+  export let visibileNav: boolean
+
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const query = createQuery()
@@ -73,12 +75,14 @@
 </script>
 
 <div class="flex h-full">
+  {#if visibileNav}
     <div class="antiPanel-component border-right filled indent aside">
-    <div class="antiNav-header bottom-divider">
+      <div class="header">
         <span class="fs-title overflow-label">
           <Label label={notification.string.Inbox} />
         </span>
       </div>
+      <div class="top-divider">
         <Scroller>
           {#if loading}
             <Loading />
@@ -89,9 +93,21 @@
           {/if}
         </Scroller>
       </div>
+    </div>
+  {/if}
   {#if loading}
     <Loading />
   {:else if component && _id && _class}
     <Component is={component} props={{ embedded: true, _id, _class }} />
   {/if}
 </div>
+
+<style lang="scss">
+  .header {
+    min-height: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1.5rem;
+  }
+</style>