Merge pull request #13 from HORNET-Storage/fix/header-fixes

Fix: visual bugs

src/components/common/BaseTable/BaseTable.styles.ts

@@ -67,6 +67,9 @@ export const Table = styled(AntdTable)`
   .ant-table-column-sort {
     background-color: transparent;
   }
+  .ant-table-column-title {
+    z-index: 0;
+  }
 
   .ant-pagination-item-container .ant-pagination-item-ellipsis {
     color: var(--disabled-color);

src/components/layouts/main/MainHeader/MainHeader.styles.ts

@@ -10,19 +10,23 @@ interface Header {
 
 export const Header = styled(BaseLayout.Header)<Header>`
   line-height: 1.5;
-  z-index: 100;
-  ${(props) =>
-    props.$isSiderOpened &&
-    css`
-      background-color: rgba(0, 0, 0, 0) !important;
-      z-index: 105;
-    `}
+ 
+  @media only screen and ${media.xs} {
+    ${(props) =>
+      props.$isSiderOpened &&
+      css`
+        background-color: rgba(0, 0, 0, 0) !important;
+        z-index: 105;
+      `}
+  }
   position: sticky;
   position: -webkit-sticky;
   top: 0;
 
   @media only screen and ${media.md} {
     display: block;
+     z-index: 100;
+
     padding: ${LAYOUT.desktop.paddingVertical} ${LAYOUT.desktop.paddingHorizontal};
     height: ${LAYOUT.desktop.headerHeight};
   }

src/components/layouts/main/sider/SiderMenu/SiderMenu.styles.ts

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
 import { FONT_SIZE } from '@app/styles/themes/constants';
 import { BaseMenu } from '@app/components/common/BaseMenu/BaseMenu';
+interface MenuProps {
+  $tabletOnly: boolean;
+}
 
-export const Menu = styled(BaseMenu)`
+export const Menu = styled(BaseMenu)<MenuProps>`
   background: transparent;
   border-right: 0;
 
@@ -56,6 +59,14 @@ export const Menu = styled(BaseMenu)`
     }
   }
 
+  ${(props) =>
+    props.$tabletOnly &&
+    `
+    .ant-menu-inline,
+    .ant-menu-item::after {
+      border-right: none;
+    }
+  `}
   .ant-menu-item-selected {
     background-color: transparent !important;
 

src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx

@@ -3,14 +3,15 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import * as S from './SiderMenu.styles';
 import { useSidebarNavigation, SidebarNavigationItem } from '../sidebarNavigation';
-
+import { useResponsive } from '@app/hooks/useResponsive';
 interface SiderContentProps {
   setCollapsed: (isCollapsed: boolean) => void;
 }
 
 const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
   const { t } = useTranslation();
   const location = useLocation();
+  const { tabletOnly } = useResponsive();
   const sidebarNavigation = useSidebarNavigation(); // Call the function to get the navigation items
 
   const sidebarNavFlat = sidebarNavigation.reduce(
@@ -31,6 +32,7 @@ const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
     <S.Menu
       style={{ zIndex: 3 }}
       mode="inline"
+      $tabletOnly={tabletOnly}
       defaultSelectedKeys={defaultSelectedKeys}
       defaultOpenKeys={defaultOpenKeys}
       onClick={() => setCollapsed(true)}

src/components/layouts/main/sider/sidebarNavigation.tsx

@@ -5,6 +5,7 @@ import { ReactComponent as BtcIcon } from '@app/assets/icons/btc.svg';
 import { ReactComponent as StatsIcon } from '@app/assets/icons/stats.svg';
 import { ReactComponent as StorageSettingsIcon } from '@app/assets/icons/storage-settings.svg';
 import { useResponsive } from '@app/hooks/useResponsive';
+import { table } from 'console';
 
 export interface SidebarNavigationItem {
   title: string;
@@ -15,7 +16,7 @@ export interface SidebarNavigationItem {
 }
 
 export const useSidebarNavigation = (): SidebarNavigationItem[] => {
-  const { mobileOnly } = useResponsive();
+  const { isDesktop } = useResponsive();
 
   const items: SidebarNavigationItem[] = [
     {
@@ -38,14 +39,13 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => {
     },
   ];
 
-  if (mobileOnly) {
+  if (!isDesktop) {
     items.push({
       title: 'common.wallet',
       key: 'wallet',
       url: '/wallet',
       icon: <BtcIcon />,
     });
   }
-
   return items;
 };

src/components/nft-dashboard/trending-creators/TrendingCreators.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Splide, SplideSlide, SplideTrack } from '@splidejs/react-splide';
 import profile1 from '@app/assets/images/profile1.webp';
-import profile2 from '@app/assets/images/profile2.webp';
+import profile2 from '@app/assets/images/profile2.jpg';
 import profile3 from '@app/assets/images/profile3.webp';
 import profile4 from '@app/assets/images/profile4.webp';
 import profile5 from '@app/assets/images/profile5.jpg';