Merge pull request #14 from axone-protocol/feat/navigation

feat: added basic navigation and connected sidebar 'active' state to items

app/bridge/page.tsx

@@ -0,0 +1,12 @@
+import Box from '@/components/ui/box';
+import PageContainer from '@/components/ui/page-container';
+
+export default function Bridge () {
+  return (
+    <PageContainer>
+      <Box >
+        <h1 className='text-center text-white mb-5 text-3xl'>BRIDGE PAGE</h1>
+      </Box>
+    </PageContainer>
+  );
+}

app/globals.css

@@ -10,8 +10,9 @@
 .sidebar-item-active:before {
   content: '';
   width: 240px;
-  height: 46px;
+  height: 28px;
   position: absolute;
+  z-index: 10;
 }
 
 .sidebar-item-active:after {
@@ -29,7 +30,7 @@
   box-shadow: 0 14px 0 0 #071622; /* outer border */
   border-radius: 0 0 1.25rem 0;
   right: -2px;
-  top: -47px;
+  top: -27px;
 }
 
 /* Styles for active state of first item in sidebar (e.g Dashboard, removing outer rounding at the top */

app/governance/page.tsx

@@ -0,0 +1,12 @@
+import Box from '@/components/ui/box';
+import PageContainer from '@/components/ui/page-container';
+
+export default function Governance () {
+  return (
+    <PageContainer>
+      <Box >
+        <h1 className='text-center text-white mb-5 text-3xl'>GOVERNANCE PAGE</h1>
+      </Box>
+    </PageContainer>
+  );
+}

app/staking/page.tsx

@@ -0,0 +1,12 @@
+import Box from '@/components/ui/box';
+import PageContainer from '@/components/ui/page-container';
+
+export default function Staking () {
+  return (
+    <PageContainer>
+      <Box >
+        <h1 className='text-center text-white mb-5 text-3xl'>STAKING PAGE</h1>
+      </Box>
+    </PageContainer>
+  );
+}

app/wallet/page.tsx

@@ -0,0 +1,12 @@
+import Box from '@/components/ui/box';
+import PageContainer from '@/components/ui/page-container';
+
+export default function Wallet () {
+  return (
+    <PageContainer>
+      <Box >
+        <h1 className='text-center text-white mb-5 text-3xl'>WALLET PAGE</h1>
+      </Box>
+    </PageContainer>
+  );
+}

components/ui/button-with-icon.tsx

@@ -5,12 +5,13 @@ import { cn } from '@/lib/utils';
 
 type ButtonWithIconProps = {
   children: React.ReactNode;
+  iconClassName?: string;
 } & ButtonProps
 
-export function ButtonWithIcon ({ children, className, ...props }: ButtonWithIconProps) {
+export function ButtonWithIcon ({ children, className, iconClassName, ...props }: ButtonWithIconProps) {
   return (
-    <Button {...props}>
-      {children} <ArrowUpRight className={cn('ml-2 h-4 w-4 mb-0.5', className)} />
+    <Button className={className} {...props}>
+      {children} <ArrowUpRight className={cn('ml-2 h-4 w-4 mb-0.5', iconClassName)} />
     </Button>
   );
 }

components/ui/sidebar-nav-item.tsx

@@ -1,22 +1,24 @@
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { cn } from '@/lib/utils';
 
 type SidebarNavItemProps = {
   title: string;
-  isActive?: boolean;
   firstItem?: boolean;
   href?: string;
 };
 
-const SidebarNavItem = ({ title, isActive=false, href='/', firstItem=false }: SidebarNavItemProps) => {
-  const className = cn('text-base text-axone-khaki p-4 pl-10 cursor-pointer hover:text-white hover:z-20', {
-    'bg-axone-bg-dark  border-r-4 border-r-axone-bg-dark border-l-4 border-l-axone-orange -mr-1 pl-9 text-white font-bold sidebar-item-active': isActive,
+const SidebarNavItem = ({ title, href='/', firstItem=false }: SidebarNavItemProps) => {
+  const pathname = usePathname();
+  const isActive: boolean = firstItem ? pathname === '/' : pathname === href;
+  const className: string = cn('text-base uppercase text-axone-khaki p-4 pl-10 cursor-pointer hover:text-white hover:z-20', {
+    'bg-axone-bg-dark border-r-4 border-r-axone-bg-dark border-l-4 border-l-axone-orange -mr-1 pl-9 text-white font-bold sidebar-item-active': isActive,
     'sidebar-item-active-first': (firstItem && isActive),
   });
   return (
     <Link href={href} className={className}>
-      {title.toUpperCase()}
+      {title}
     </Link>
   );
 };

components/ui/sidebar.tsx

@@ -9,9 +9,11 @@ import SidebarWelcomeAxoneBox from './sidebar-welcome-box';
 import { Switch } from './switch';
 import Text from '../typography/text';
 
+
 const WIDTH = 'w-64';
 
 const Sidebar = () => {
+
   return (
     <Column className={cn('justify-between pt-5 bg-axone-dark-blue min-h-screen border-r border-r-axone-box-border', WIDTH)}>
       <Column>
@@ -20,12 +22,12 @@ const Sidebar = () => {
           <LogoDark className='mb-5' />
         </div>
         {/* Navigation items */}
-        <SidebarNavItem title='Dashboard' firstItem isActive />
-        <SidebarNavItem title='Wallet'  />
-        <SidebarNavItem title='Bridge' />
-        <SidebarNavItem title='Staking' isActive  />
-        <SidebarNavItem title='Governance' />
-        <SidebarNavItem title='FAQ' href='faq'  />
+        <SidebarNavItem title='Dashboard' firstItem />
+        <SidebarNavItem title='Wallet' href='/wallet' />
+        <SidebarNavItem title='Bridge' href='/bridge' />
+        <SidebarNavItem title='Staking' href='/staking'  />
+        <SidebarNavItem title='Governance' href='/governance'  />
+        <SidebarNavItem title='FAQ' href='/faq'  />
 
         {/* Welcome block */}
         <SidebarWelcomeAxoneBox />