feat: add AsideHeader (#5)

gravity-ui · Dec 19, 2024 · 1ef44e2 · 1ef44e2
1 parent 39839cf
commit 1ef44e2
Show file tree

Hide file tree

Showing 5 changed files with 298 additions and 68 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -7,7 +7,7 @@ import {
     Scripts,
     ScrollRestoration as ScrollRestorationRemix,
 } from '@remix-run/react';
-import {getInitialRootClassName} from '@gravity-ui/uikit';
+import {DEFAULT_BODY_CLASSNAME} from './components/Wrapper';
 
 import './styles/globals.scss';
 import '@gravity-ui/uikit/styles/fonts.css';
@@ -20,9 +20,6 @@ export const meta: MetaFunction = () => [
     },
 ];
 
-const theme = 'dark';
-const rootClassName = getInitialRootClassName({theme});
-
 const App = () => {
     return (
         <html lang="en">
@@ -32,7 +29,7 @@ const App = () => {
                 <Meta />
                 <Links />
             </head>
-            <body className={rootClassName}>
+            <body className={DEFAULT_BODY_CLASSNAME}>
                 <Outlet />
                 <ScrollRestorationRemix />
                 <Scripts />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,11 +1,21 @@
+import {Ghost} from '@gravity-ui/icons';
+import {AsideHeader} from '@gravity-ui/navigation';
+
 import {InfoButtons} from '../components/InfoButtons';
 import {Wrapper} from '../components/Wrapper';
 
 const Index = () => {
     return (
-        <Wrapper>
-            <InfoButtons />
-        </Wrapper>
+        <AsideHeader
+            logo={{icon: Ghost, text: 'remix-example'}}
+            compact={true}
+            hideCollapseButton={true}
+            renderContent={() => (
+                <Wrapper>
+                    <InfoButtons />
+                </Wrapper>
+            )}
+        />
     );
 };