From cb5354b1db4dfa6e511734253cab670efe9995d9 Mon Sep 17 00:00:00 2001
From: Shubham Sharma <shubhamku044@gmail.com>
Date: Wed, 26 Jul 2023 20:43:16 +0530
Subject: [PATCH] fix: made the links width 100% (#1955)

Co-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>
---
 components/navigation/DocsNavItem.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/navigation/DocsNavItem.js b/components/navigation/DocsNavItem.js
index dcf17037f70..7f32090de04 100644
--- a/components/navigation/DocsNavItem.js
+++ b/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>
   );
-}
\ No newline at end of file
+}