refactor the full layout

packages/apps/docs/src/components/Layout/Full/Full.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '@kadena/react-ui';
 
-import { basebackgroundClass } from '../basestyles.css';
+import { basebackgroundClass, baseGridClass } from '../basestyles.css';
 import {
   articleClass,
   contentClass,
@@ -9,15 +9,14 @@ import {
 import { Template } from '../components/Template';
 import { globalClass } from '../global.css';
 
+import { AsideList, ListItem } from './components/Aside';
 import {
-  Aside,
-  AsideList,
-  ListItem,
-  StickyAside,
-  StickyAsideWrapper,
-} from './components/Aside';
-import { PageGrid } from './styles';
-import { asidebackgroundClass } from './styles.css';
+  asidebackgroundClass,
+  asideClass,
+  pageGridClass,
+  stickyAsideClass,
+  stickyAsideWrapperClass,
+} from './styles.css';
 
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
@@ -84,8 +83,10 @@ export const Full: FC<IPageProps> = ({
     asidebackgroundClass,
   );
 
+  const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass);
+
   return (
-    <PageGrid className={globalClass}>
+    <div className={gridClassNames}>
       <Template menuItems={leftMenuTree}>
         <div className={contentClassNames} id="maincontent">
           <article className={articleClass} ref={scrollRef}>
@@ -99,10 +100,10 @@ export const Full: FC<IPageProps> = ({
           </article>
         </div>
         <div className={backgroundClassnames} />
-        <Aside data-cy="aside">
+        <aside className={asideClass} data-cy="aside">
           {showSideMenu && (
-            <StickyAsideWrapper>
-              <StickyAside>
+            <div className={stickyAsideWrapperClass}>
+              <div className={stickyAsideClass}>
                 <Heading as="h6" transform="uppercase">
                   On this page
                 </Heading>
@@ -120,12 +121,12 @@ export const Full: FC<IPageProps> = ({
                     );
                   })}
                 </AsideList>
-              </StickyAside>
-            </StickyAsideWrapper>
+              </div>
+            </div>
           )}
-        </Aside>
+        </aside>
       </Template>
-    </PageGrid>
+    </div>
   );
 };
 

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx

@@ -1,5 +1,11 @@
-import { AsideItem, AsideItemLink } from './AsideStyles';
+import {
+  asideItemClass,
+  asideItemLinkActiveVariants,
+  asideItemLinkClass,
+} from './styles.css';
 
+import classNames from 'classnames';
+import Link from 'next/link';
 import React, { FC, MouseEventHandler, ReactNode } from 'react';
 
 interface IProps {
@@ -17,12 +23,17 @@ export const AsideLink: FC<IProps> = ({
   isActive,
   onClick,
 }) => {
+  const linkClass = classNames(
+    asideItemLinkClass,
+    asideItemLinkActiveVariants[isActive ? 'true' : 'false'],
+  );
+
   return (
-    <AsideItem>
-      <AsideItemLink href={href} onClick={onClick} isActive={isActive}>
+    <li className={asideItemClass}>
+      <Link href={href} onClick={onClick} className={linkClass}>
         {label}
-      </AsideItemLink>
+      </Link>
       {children}
-    </AsideItem>
+    </li>
   );
 };

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx

@@ -0,0 +1,22 @@
+import { asideListClass, asideListInnerVariants } from './styles.css';
+
+import classNames from 'classnames';
+import React, { FC, ReactNode } from 'react';
+
+interface IProps {
+  children: ReactNode;
+  inner?: boolean;
+  ref?: React.MutableRefObject<HTMLUListElement | null>;
+}
+
+export const AsideList: FC<IProps> = ({ children, inner = false, ref }) => {
+  const classes = classNames(
+    asideListClass,
+    asideListInnerVariants[inner ? 'true' : 'false'],
+  );
+  return (
+    <ul ref={ref} className={classes}>
+      {children}
+    </ul>
+  );
+};

packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts

@@ -1,3 +1,3 @@
 export * from './AsideLink';
-export * from './AsideStyles';
+export * from './AsideList';
 export * from './ListItem';

packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts

@@ -0,0 +1,61 @@
+import { sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const asideItemLinkClass = style([
+  sprinkles({
+    textDecoration: 'none',
+  }),
+  {
+    selectors: {
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  },
+]);
+
+export const asideItemLinkActiveVariants = styleVariants({
+  true: {
+    color: vars.colors.$neutral6,
+    textDecoration: 'underline',
+  },
+  false: {
+    color: vars.colors.$primaryHighContrast,
+  },
+});
+
+export const asideItemClass = style([
+  sprinkles({
+    lineHeight: '$base',
+  }),
+  {
+    selectors: {
+      '&::marker': {
+        color: vars.colors.$primaryHighContrast,
+        fontWeight: vars.fontWeights.$bold,
+        display: 'inline-block',
+        width: vars.sizes.$4,
+        margin: `0 ${vars.sizes.$1}`,
+      },
+    },
+  },
+]);
+
+export const asideListClass = style([
+  sprinkles({
+    margin: 0,
+    padding: 0,
+  }),
+  {
+    listStyle: 'initial',
+    listStylePosition: 'outside',
+  },
+]);
+
+export const asideListInnerVariants = styleVariants({
+  true: {
+    paddingLeft: vars.sizes.$4,
+  },
+  false: {},
+});