fix: made the links width 100% (#1955)

Co-authored-by: Lukasz Gornicki <[email protected]>

components/navigation/DocsNavItem.js

@@ -1,25 +1,25 @@
 import Link from 'next/link';
 
 function isActiveSlug(slug, activeSlug, sectionSlug) {
-  if(slug === '/docs' || (sectionSlug !== undefined && slug === sectionSlug)) {
+  if (slug === '/docs' || (sectionSlug !== undefined && slug === sectionSlug)) {
     return (slug == activeSlug)
   }
-  
+
   const partialSlug = slug.split('/');
   const partialActiveSlug = activeSlug.split('/');
   const activeParts = partialActiveSlug.filter((a, idx) => a === partialSlug[idx]);
   return activeParts.length === partialSlug.length;
 }
 
-export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug, onClick = () => {}, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
+export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug, onClick = () => { }, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
   const isActive = isActiveSlug(slug, activeSlug, sectionSlug);
-  const classes = `${isActive ? activeClassName : inactiveClassName} ${defaultClassName} inline-block`;
+  const classes = `${isActive ? activeClassName : inactiveClassName} ${defaultClassName} inline-block w-full`;
 
   return (
-    <div className='inline-block'>
+    <div>
       <div className={classes}>
         <Link href={href || slug}>
-          <a href={href || slug} onClick={onClick}>
+          <a className='inline-block w-full' href={href || slug} onClick={onClick}>
             {bucket && (
               <div className={`${(slug === '/docs' ? slug === activeSlug : activeSlug.startsWith(slug)) ? bucket.className : ''} inline-block rounded`} style={{ marginRight: '5px', marginBottom: '-6px', padding: '2px' }}>
                 <bucket.icon className='h-5 w-5' />
@@ -31,4 +31,4 @@ export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug
       </div>
     </div>
   );
-}
+}