Updated side menu

Author: estruyf

components/Page/DocsLayout.tsx

@@ -18,9 +18,9 @@ export const DocsLayout: React.FunctionComponent<React.PropsWithChildren<IDocsLa
   const mendableRef = React.useRef<HTMLDivElement>(null);
 
   return (
-    <div className={`lg:ml-72 xl:ml-80`}>
+    <div className={`lg:ml-72 xl:ml-96`}>
 
-      <aside className={`fixed bg-vulcan-600 inset-y-0 left-0 z-40 contents w-72 overflow-y-auto px-6 pt-4 pb-8 lg:block xl:w-80 lg:pr-8 lg:border-r lg:border-vulcan-300`}>
+      <aside className={`fixed bg-vulcan-600 inset-y-0 left-0 z-40 contents w-72 overflow-y-auto px-6 pt-4 pb-8 lg:block xl:w-96 lg:pr-8 lg:border-r lg:border-vulcan-300`}>
         <div className='ml-auto'>
           <Header navItems={navItems} />
         </div>

components/Page/Header.tsx

@@ -12,19 +12,19 @@ export interface IHeaderProps {
   navItems?: PageFrontMatter[];
 }
 
-const Header: React.FunctionComponent<IHeaderProps> = forwardRef(({navItems}: React.PropsWithChildren<IHeaderProps>, ref: ForwardedRef<HTMLElement>
-  ) => {
+const Header: React.FunctionComponent<IHeaderProps> = forwardRef(({ navItems }: React.PropsWithChildren<IHeaderProps>, ref: ForwardedRef<HTMLElement>
+) => {
   const router = useRouter();
 
   const isDocs = useMemo(() => {
     return router.pathname.startsWith('/docs');
   }, [router.pathname]);
-  
+
   return (
     <>
       <header
-        ref={ref} 
-        className={`fixed inset-x-0 top-0 z-50 flex h-16 lg:h-20 items-center justify-between px-4 transition sm:px-6 lg:z-30 lg:px-8 bg-vulcan-500/80 backdrop-blur-lg ${isDocs ? "right-0 lg:left-72 xl:left-80" : ""}`}>
+        ref={ref}
+        className={`fixed inset-x-0 top-0 z-50 flex h-16 lg:h-20 items-center justify-between px-4 transition sm:px-6 lg:z-30 lg:px-8 bg-vulcan-500/80 backdrop-blur-lg ${isDocs ? "right-0 lg:left-72 xl:left-96" : ""}`}>
 
         <div className="flex items-center justify-between lg:hidden w-full">
           <Home className='h-12' />
@@ -35,12 +35,12 @@ const Header: React.FunctionComponent<IHeaderProps> = forwardRef(({navItems}: Re
 
           <div className={`flex items-center gap-4`}>
             <Searchbox />
-            
+
             <MobileNavigation navItems={navItems} />
           </div>
         </div>
 
-        <div className={`hidden lg:flex items-center w-full ${ isDocs ? "" : "max-w-7xl mx-auto"}`}>
+        <div className={`hidden lg:flex items-center w-full ${isDocs ? "" : "max-w-7xl mx-auto"}`}>
           <div className="flex items-center justify-between w-full">
             {
               !isDocs && (
@@ -49,8 +49,8 @@ const Header: React.FunctionComponent<IHeaderProps> = forwardRef(({navItems}: Re
             }
 
             <div className="flex items-center gap-6 ml-auto">
-              <GlobalNavigation 
-                listClassName='flex gap-6'/>
+              <GlobalNavigation
+                listClassName='flex gap-6' />
 
               <SocialNavigation />