Fix album sidebar

ui/src/components/header/Header.tsx

@@ -1,11 +1,21 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import SearchBar from './Searchbar'
 
 import logoPath from '../../assets/photoview-logo.svg'
 import { authToken } from '../../helpers/authentication'
+import { SidebarContext } from '../sidebar/Sidebar'
+import classNames from 'classnames'
 
-const Header = () => (
+const Header = () => {
-  <div className="sticky top-0 z-10 bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none">
+  const { pinned } = useContext(SidebarContext)
+
+  return (
+    <div
+      className={classNames(
+        'sticky top-0 z-10 bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none',
+        { 'mr-[404px]': pinned }
+      )}
+    >
       <h1 className="mr-4 lg:mr-8 flex-shrink-0 flex items-center">
         <img className="h-12 lg:h-10" src={logoPath} alt="logo" />
         <span className="hidden lg:block ml-2 text-2xl font-light">
@@ -15,5 +25,6 @@ const Header = () => (
       {authToken() ? <SearchBar /> : null}
     </div>
   )
+}
 
 export default Header

ui/src/components/sidebar/AlbumSidebar.tsx

@@ -2,6 +2,11 @@ import React from 'react'
 import { useQuery, gql } from '@apollo/client'
 import { SidebarAlbumShare } from './Sharing'
 import { useTranslation } from 'react-i18next'
+import SidebarHeader from './SidebarHeader'
+import {
+  getAlbumSidebar,
+  getAlbumSidebarVariables,
+} from './__generated__/getAlbumSidebar'
 
 const albumQuery = gql`
   query getAlbumSidebar($id: ID!) {
@@ -18,7 +23,10 @@ type AlbumSidebarProps = {
 
 const AlbumSidebar = ({ albumId }: AlbumSidebarProps) => {
   const { t } = useTranslation()
-  const { loading, error, data } = useQuery(albumQuery, {
+  const { loading, error, data } = useQuery<
+    getAlbumSidebar,
+    getAlbumSidebarVariables
+  >(albumQuery, {
     variables: { id: albumId },
   })
 
@@ -27,10 +35,16 @@ const AlbumSidebar = ({ albumId }: AlbumSidebarProps) => {
 
   return (
     <div>
-      <p>{t('sidebar.album.title', 'Album options')}</p>
+      {/* <p>{t('sidebar.album.title', 'Album options')}</p> */}
-      <div>
+      <SidebarHeader
-        <h1>{data.album.title}</h1>
+        title={
-        <SidebarAlbumShare id={data.album.id} />
+          data?.album.title ??
+          t('sidebar.album.title_placeholder', 'Album title')
+        }
+      />
+      <div className="mt-8">
+        {/* <h1 className="text-3xl font-semibold">{data.album.title}</h1> */}
+        <SidebarAlbumShare id={albumId} />
       </div>
     </div>
   )

ui/src/components/sidebar/Sidebar.tsx

@@ -93,7 +93,7 @@ export const Sidebar = () => {
       className={`fixed top-[72px] bg-white bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
         content == null && !pinned ? 'translate-x-full' : 'translate-x-0'
       } ${
-        pinned ? 'lg:mt-[62px]' : 'lg:shadow-separator'
+        pinned ? 'lg:border-l' : 'lg:shadow-separator'
       } lg:w-[420px] lg:right-0 lg:top-0 lg:z-40`}
     >
       {content && (

ui/src/components/sidebar/SidebarHeader.tsx

@@ -15,7 +15,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
   const PinIcon = pinned ? PinIconFilled : PinIconOutline
 
   return (
-    <div className="m-2 flex items-center gap-2">
+    <div className="m-2 flex items-center">
       <button
         className={`${pinned ? 'lg:hidden' : ''}`}
         title="Close sidebar"
@@ -23,7 +23,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
       >
         <CloseIcon className="m-2" />
       </button>
-      <span className="flex-grow -mt-1">{title}</span>
+      <span className="flex-grow -mt-1 ml-2">{title}</span>
       <button
         className="hidden lg:block"
         title="Pin sidebar"