feat: responsive design WIP

aleph-im · Dec 19, 2023 · 3eb0e57 · 3eb0e57
1 parent d022d6a
commit 3eb0e57
Show file tree

Hide file tree

Showing 12 changed files with 243 additions and 327 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/aleph-core": "^1.13.1",
+    "@aleph-front/aleph-core": "^1.13.11",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@helia/unixfs": "^1.4.1",
     "@hookform/resolvers": "^3.1.1",
@@ -21,7 +21,7 @@
     "@types/node": "18.14.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
-    "aleph-sdk-ts": "^3.7.0",
+    "aleph-sdk-ts": "^3.8.0",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.1",
     "ethers": "^6.6.2",

diff --git a/src/components/common/Content/styles.tsx b/src/components/common/Content/styles.tsx
@@ -2,5 +2,5 @@ import styled from 'styled-components'
 import tw from 'twin.macro'
 
 export const StyledContent = styled.div`
-  ${tw`flex-1 px-4 lg:px-16 pb-16 mx-auto w-full max-w-[90rem]`}// @note: 1440px max-width
+  ${tw`flex-1 px-5 md:px-16 pb-16 mx-auto w-full max-w-[90rem]`}// @note: 1440px max-width
 `
diff --git a/src/components/common/Header/cmp.tsx b/src/components/common/Header/cmp.tsx
@@ -1,9 +1,10 @@
-import { Button, Icon } from '@aleph-front/aleph-core'
+import { Button, Icon, LinkComponent } from '@aleph-front/aleph-core'
 import {
-  StyledHeader,
+  StyledNavbarDesktop,
   StyledButton,
   StyledWalletPicker,
-  StyledNavbar,
+  StyledNavbarMobile,
+  StyledHeader,
 } from './styles'
 import { ellipseAddress } from '@/helpers/utils'
 import {
@@ -14,6 +15,7 @@ import {
 import AutoBreadcrumb from '@/components/common/AutoBreadcrumb'
 import { memo } from 'react'
 import { createPortal } from 'react-dom'
+import Link from 'next/link'
 
 export type AccountButtonProps = UseAccountButtonProps & {
   isMobile?: boolean
@@ -101,24 +103,36 @@ export const AccountButton = ({ isMobile, ...rest }: AccountButtonProps) => {
 AccountButton.displayName = 'AccountButton'
 
 export const Header = () => {
-  const { hasBreadcrumb, breadcrumbNames, ...accountProps } = useHeader()
-  const $breakpoint = 'lg'
+  const { pathname, routes, breadcrumbNames, ...accountProps } = useHeader()
+  const breakpoint = 'lg'
 
   return (
     <>
-      <StyledNavbar
-        $breakpoint={$breakpoint}
-        mobileTopContent={<AccountButtonMemo {...accountProps} isMobile />}
-      ></StyledNavbar>
-      <StyledHeader $breakpoint={$breakpoint}>
-        <div>{hasBreadcrumb && <AutoBreadcrumb names={breadcrumbNames} />}</div>
-        <div tw="relative flex items-center justify-center gap-7">
-          <StyledButton key="link" forwardedAs="button" disabled>
-            <Icon name="ethereum" />
-          </StyledButton>
-          <AccountButtonMemo {...accountProps} />
-        </div>
+      <StyledHeader>
+        <StyledNavbarMobile
+          {...{
+            routes,
+            pathname,
+            Link: Link as LinkComponent,
+            breakpoint: 'lg',
+            mobileTopContent: <AccountButtonMemo {...accountProps} isMobile />,
+          }}
+        ></StyledNavbarMobile>
+        <StyledNavbarDesktop $breakpoint={breakpoint}>
+          <div>
+            <AutoBreadcrumb names={breadcrumbNames} />
+          </div>
+          <div tw="relative flex items-center justify-center gap-7">
+            <StyledButton key="link" forwardedAs="button" disabled>
+              <Icon name="ethereum" />
+            </StyledButton>
+            <AccountButtonMemo {...accountProps} />
+          </div>
+        </StyledNavbarDesktop>
       </StyledHeader>
+      <div tw="block lg:hidden my-6 px-5 md:px-16">
+        <AutoBreadcrumb names={breadcrumbNames} />
+      </div>
     </>
   )
 }

diff --git a/src/components/common/Header/styles.tsx b/src/components/common/Header/styles.tsx
@@ -2,33 +2,13 @@ import {
   BreakpointId,
   Button,
   FloatPosition,
-  Navbar,
+  RouterNavbar,
   WalletPicker,
   getResponsiveCss,
 } from '@aleph-front/aleph-core'
 import styled, { css } from 'styled-components'
 import tw from 'twin.macro'
 
-export type StyledHeaderProps = {
-  $breakpoint?: BreakpointId
-}
-
-export const StyledHeader = styled.header<StyledHeaderProps>`
-  ${({ $breakpoint }) => css`
-    ${tw`hidden sticky flex-initial shrink-0 m-0 px-16 w-full top-0 z-10 items-center justify-between`}
-    height: 6.5rem;
-    backdrop-filter: blur(50px);
-
-    /* MOBILE LAYOUT */
-    ${getResponsiveCss(
-      $breakpoint,
-      css`
-        ${tw`flex`}
-      `,
-    )}
-  `}
-`
-
 export const StyledButton = styled(Button).attrs((props) => {
   return {
     ...props,
@@ -60,27 +40,58 @@ export const StyledWalletPicker = styled(WalletPicker)<{
   }}
 `
 
-export type StyledNavbarProps = {
+// --------------------------------------------
+
+export type StyledNavbarDesktopProps = {
   $breakpoint?: BreakpointId
 }
 
-export const StyledNavbar = styled(Navbar).attrs<StyledNavbarProps>(
-  ({ $breakpoint, ...rest }) => {
-    return {
-      ...rest,
-      breakpoint: $breakpoint,
-    }
-  },
-)<StyledNavbarProps>`
+export const StyledNavbarDesktop = styled.div<StyledNavbarDesktopProps>`
   ${({ $breakpoint }) => css`
-    ${tw`block z-10`}
+    ${tw`hidden sticky flex-initial shrink-0 m-0 px-16 w-full top-0 z-10 items-center justify-between`}
+    height: 6.5rem;
+    backdrop-filter: blur(50px);
 
     /* MOBILE LAYOUT */
     ${getResponsiveCss(
       $breakpoint,
+      css`
+        ${tw`flex`}
+      `,
+    )}
+  `}
+`
+
+// --------------------------------------------
+
+export type StyledNavbarMobileProps = {
+  $breakpoint?: BreakpointId
+}
+
+export const StyledNavbarMobile = styled(RouterNavbar)<StyledNavbarMobileProps>`
+  ${({ breakpoint }) => css`
+    ${tw`relative block z-10`}
+
+    /* MOBILE LAYOUT */
+    ${getResponsiveCss(
+      breakpoint,
       css`
         ${tw`hidden`}
       `,
     )}
   `}
 `
+
+// --------------------------------------------
+
+export const StyledHeader = styled.header`
+  font-size: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  /* background-color: #141327CC; */
+`
diff --git a/src/components/common/NodesTable/styles.tsx b/src/components/common/NodesTable/styles.tsx
@@ -8,7 +8,7 @@ export type StyledTableProps<T extends AlephNode> = Omit<
   'borderType' | 'oddRowNoise'
 >
 
-export const StyledTable = styled(Table<any>).attrs(
+export const StyledTable = styled(Table as any).attrs(
   (props: StyledTableProps<any>) => {
     return {
       borderType: 'solid',