TOC and share buttons styles

alexcss · alexcss · commit a72988549ed2 · 2024-06-07T16:05:37.000+03:00
diff --git a/src/components/ShareButtons/index.js b/src/components/ShareButtons/index.js
@@ -26,52 +26,66 @@ export const ShareButtons = () => {
   }
 
   return (
-    <div className={styles.main}>
-      <a
-        className="zg-share-links__link"
-        href={`https://twitter.com/intent/tweet?url=${url}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Share on Twitter"
-      >
-        <svg width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M17.7114 0.94043H18.0703C18.1103 0.94543 18.1495 0.953421 18.1885 0.956421C18.2975 0.965421 18.4071 0.969422 18.5161 0.982422C19.7054 1.12165 20.8127 1.65953 21.6572 2.50842C21.6891 2.55042 21.7335 2.58097 21.7842 2.5954C21.8349 2.60983 21.8893 2.60738 21.9385 2.58844H21.9482C22.8299 2.39821 23.6835 2.09572 24.4883 1.68842C24.6693 1.59742 24.8454 1.49643 25.0244 1.40143C25.0554 1.38543 25.0823 1.35642 25.1313 1.37042C25.1223 1.40642 25.1165 1.43746 25.1055 1.47046C24.8542 2.18797 24.452 2.84333 23.9263 3.39246C23.6323 3.70022 23.3027 3.97177 22.9443 4.20142C22.9223 4.21542 22.9011 4.23345 22.8691 4.25745C22.8971 4.25745 22.906 4.25745 22.916 4.25745C23.6781 4.1617 24.4275 3.98091 25.1494 3.71844C25.3864 3.63244 25.6171 3.52841 25.8491 3.43341V3.47345C25.8291 3.49945 25.8081 3.52543 25.7881 3.55243C25.1275 4.51296 24.3173 5.36139 23.3882 6.06543C23.1952 6.21243 23.2123 6.14344 23.2173 6.41644C23.236 7.10752 23.2083 7.79909 23.1343 8.48645C23.0129 9.54405 22.7836 10.5864 22.4502 11.5974C22.1402 12.5389 21.7431 13.4496 21.2642 14.3174C20.592 15.5396 19.7571 16.6648 18.7822 17.6624C18.4334 18.018 18.0662 18.3552 17.6821 18.6724C16.3687 19.762 14.8695 20.6056 13.2563 21.1624C12.3823 21.4642 11.4821 21.6842 10.5674 21.8195C10.0934 21.8905 9.61816 21.9424 9.13916 21.9664C9.01816 21.9724 8.89641 21.9884 8.77441 22.0004H7.47412C7.43212 21.9944 7.38917 21.9864 7.34717 21.9824C7.00917 21.9534 6.67047 21.9334 6.33447 21.8954C5.59755 21.8109 4.86798 21.6706 4.15234 21.4755C3.28567 21.2399 2.4417 20.9276 1.63037 20.5424C1.09905 20.2896 0.582947 20.0061 0.0844727 19.6934C0.0554727 19.6754 0.028 19.6534 0 19.6324C0.00312557 19.6239 0.00609679 19.6152 0.00830078 19.6064C0.91994 19.704 1.83983 19.6899 2.74805 19.5645C3.66087 19.4362 4.55318 19.1884 5.40137 18.8275C6.25283 18.4675 7.05296 17.9968 7.78125 17.4274C7.73625 17.4184 7.71534 17.4134 7.69434 17.4114C7.56234 17.3994 7.42943 17.3904 7.29443 17.3754C6.67525 17.3045 6.0734 17.1233 5.51807 16.8405C4.71309 16.4327 4.0249 15.827 3.51807 15.0804C3.25669 14.6987 3.04743 14.2836 2.896 13.8464C2.8864 13.8107 2.88019 13.7742 2.87646 13.7374C2.8897 13.7323 2.90297 13.7286 2.91699 13.7264C2.94044 13.7274 2.96413 13.7298 2.9873 13.7335C3.32874 13.7886 3.67429 13.8117 4.02002 13.8024C4.38571 13.7923 4.74979 13.744 5.10547 13.6584C5.12654 13.6512 5.14649 13.6421 5.16602 13.6314C5.15502 13.6204 5.151 13.6144 5.146 13.6124L5.04639 13.5875C3.95765 13.3249 2.98074 12.7224 2.25732 11.8674C1.61081 11.1208 1.19161 10.2047 1.04932 9.22742C1.01232 8.98142 1.00435 8.72746 0.985352 8.48346C0.987196 8.44163 0.993293 8.40006 1.00342 8.35944C1.05142 8.38144 1.08423 8.39444 1.11523 8.41144C1.52599 8.62557 1.96285 8.78493 2.41504 8.88544C2.67441 8.94495 2.93841 8.98242 3.2041 8.99744C3.23742 8.99907 3.27089 8.99907 3.3042 8.99744L3.31201 8.97345C2.76881 8.59415 2.30046 8.11781 1.93018 7.56842C1.56166 7.02211 1.29888 6.41158 1.15527 5.76843C1.00872 5.12153 0.98641 4.45268 1.08936 3.79742C1.1872 3.14368 1.41459 2.51606 1.7583 1.95142C1.76726 1.95486 1.77559 1.95961 1.7832 1.96545C1.8022 1.98445 1.81943 2.00545 1.83643 2.02545C2.36881 2.66831 2.95352 3.266 3.58447 3.81244C4.61813 4.7094 5.76931 5.46102 7.00635 6.04645C8.09789 6.56404 9.24766 6.94812 10.4312 7.19043C11.021 7.31016 11.6175 7.39531 12.2173 7.44543C12.3453 7.45643 12.4765 7.46441 12.6055 7.46741C12.6705 7.46741 12.6813 7.4514 12.6743 7.3894C12.6726 7.37623 12.6696 7.36326 12.666 7.35046C12.5798 6.91675 12.5466 6.47417 12.5664 6.03241C12.5855 5.57017 12.6657 5.11255 12.8052 4.67145C13.1094 3.69675 13.6919 2.83202 14.4805 2.18341C15.2807 1.51082 16.2636 1.09297 17.3032 0.983459C17.4482 0.963459 17.5794 0.95243 17.7114 0.94043Z" fill="white"/>
-        </svg>
+    <div className={styles.shareWrap}>
+		 <div className="d-flex gap-10 mb-20">
+			 <a
+				 className="zg-share-links__link"
+				 href={`https://twitter.com/intent/tweet?url=${url}`}
+				 target="_blank"
+				 rel="noopener noreferrer"
+				 title="Share on Twitter"
+			 >
+				 <svg width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+					 <path
+						 d="M17.7114 0.94043H18.0703C18.1103 0.94543 18.1495 0.953421 18.1885 0.956421C18.2975 0.965421 18.4071 0.969422 18.5161 0.982422C19.7054 1.12165 20.8127 1.65953 21.6572 2.50842C21.6891 2.55042 21.7335 2.58097 21.7842 2.5954C21.8349 2.60983 21.8893 2.60738 21.9385 2.58844H21.9482C22.8299 2.39821 23.6835 2.09572 24.4883 1.68842C24.6693 1.59742 24.8454 1.49643 25.0244 1.40143C25.0554 1.38543 25.0823 1.35642 25.1313 1.37042C25.1223 1.40642 25.1165 1.43746 25.1055 1.47046C24.8542 2.18797 24.452 2.84333 23.9263 3.39246C23.6323 3.70022 23.3027 3.97177 22.9443 4.20142C22.9223 4.21542 22.9011 4.23345 22.8691 4.25745C22.8971 4.25745 22.906 4.25745 22.916 4.25745C23.6781 4.1617 24.4275 3.98091 25.1494 3.71844C25.3864 3.63244 25.6171 3.52841 25.8491 3.43341V3.47345C25.8291 3.49945 25.8081 3.52543 25.7881 3.55243C25.1275 4.51296 24.3173 5.36139 23.3882 6.06543C23.1952 6.21243 23.2123 6.14344 23.2173 6.41644C23.236 7.10752 23.2083 7.79909 23.1343 8.48645C23.0129 9.54405 22.7836 10.5864 22.4502 11.5974C22.1402 12.5389 21.7431 13.4496 21.2642 14.3174C20.592 15.5396 19.7571 16.6648 18.7822 17.6624C18.4334 18.018 18.0662 18.3552 17.6821 18.6724C16.3687 19.762 14.8695 20.6056 13.2563 21.1624C12.3823 21.4642 11.4821 21.6842 10.5674 21.8195C10.0934 21.8905 9.61816 21.9424 9.13916 21.9664C9.01816 21.9724 8.89641 21.9884 8.77441 22.0004H7.47412C7.43212 21.9944 7.38917 21.9864 7.34717 21.9824C7.00917 21.9534 6.67047 21.9334 6.33447 21.8954C5.59755 21.8109 4.86798 21.6706 4.15234 21.4755C3.28567 21.2399 2.4417 20.9276 1.63037 20.5424C1.09905 20.2896 0.582947 20.0061 0.0844727 19.6934C0.0554727 19.6754 0.028 19.6534 0 19.6324C0.00312557 19.6239 0.00609679 19.6152 0.00830078 19.6064C0.91994 19.704 1.83983 19.6899 2.74805 19.5645C3.66087 19.4362 4.55318 19.1884 5.40137 18.8275C6.25283 18.4675 7.05296 17.9968 7.78125 17.4274C7.73625 17.4184 7.71534 17.4134 7.69434 17.4114C7.56234 17.3994 7.42943 17.3904 7.29443 17.3754C6.67525 17.3045 6.0734 17.1233 5.51807 16.8405C4.71309 16.4327 4.0249 15.827 3.51807 15.0804C3.25669 14.6987 3.04743 14.2836 2.896 13.8464C2.8864 13.8107 2.88019 13.7742 2.87646 13.7374C2.8897 13.7323 2.90297 13.7286 2.91699 13.7264C2.94044 13.7274 2.96413 13.7298 2.9873 13.7335C3.32874 13.7886 3.67429 13.8117 4.02002 13.8024C4.38571 13.7923 4.74979 13.744 5.10547 13.6584C5.12654 13.6512 5.14649 13.6421 5.16602 13.6314C5.15502 13.6204 5.151 13.6144 5.146 13.6124L5.04639 13.5875C3.95765 13.3249 2.98074 12.7224 2.25732 11.8674C1.61081 11.1208 1.19161 10.2047 1.04932 9.22742C1.01232 8.98142 1.00435 8.72746 0.985352 8.48346C0.987196 8.44163 0.993293 8.40006 1.00342 8.35944C1.05142 8.38144 1.08423 8.39444 1.11523 8.41144C1.52599 8.62557 1.96285 8.78493 2.41504 8.88544C2.67441 8.94495 2.93841 8.98242 3.2041 8.99744C3.23742 8.99907 3.27089 8.99907 3.3042 8.99744L3.31201 8.97345C2.76881 8.59415 2.30046 8.11781 1.93018 7.56842C1.56166 7.02211 1.29888 6.41158 1.15527 5.76843C1.00872 5.12153 0.98641 4.45268 1.08936 3.79742C1.1872 3.14368 1.41459 2.51606 1.7583 1.95142C1.76726 1.95486 1.77559 1.95961 1.7832 1.96545C1.8022 1.98445 1.81943 2.00545 1.83643 2.02545C2.36881 2.66831 2.95352 3.266 3.58447 3.81244C4.61813 4.7094 5.76931 5.46102 7.00635 6.04645C8.09789 6.56404 9.24766 6.94812 10.4312 7.19043C11.021 7.31016 11.6175 7.39531 12.2173 7.44543C12.3453 7.45643 12.4765 7.46441 12.6055 7.46741C12.6705 7.46741 12.6813 7.4514 12.6743 7.3894C12.6726 7.37623 12.6696 7.36326 12.666 7.35046C12.5798 6.91675 12.5466 6.47417 12.5664 6.03241C12.5855 5.57017 12.6657 5.11255 12.8052 4.67145C13.1094 3.69675 13.6919 2.83202 14.4805 2.18341C15.2807 1.51082 16.2636 1.09297 17.3032 0.983459C17.4482 0.963459 17.5794 0.95243 17.7114 0.94043Z"
+						 fill="white"/>
+				 </svg>
 
-      </a>
-      <a
-        className="zg-share-links__link"
-        href={`https://www.linkedin.com/shareArticle?mini=true&url=${url}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Share on Linkedin"
-      >
-        <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M21.1991 0H2.49912C1.58245 0 0.849121 0.736402 0.849121 1.56485V20.4351C0.849121 21.2636 1.58245 22 2.49912 22H21.1991C22.1158 22 22.8491 21.2636 22.8491 20.4351V1.56485C22.8491 0.736402 22.1158 0 21.1991 0ZM7.35745 18.7782H4.14912V8.28452H7.35745V18.7782ZM5.79912 6.81172C4.79079 6.81172 3.87412 5.98326 3.87412 4.87866C3.87412 3.77406 4.69912 2.94561 5.79912 2.94561C6.80745 2.94561 7.72412 3.77406 7.72412 4.87866C7.72412 5.98326 6.80745 6.81172 5.79912 6.81172ZM19.6408 18.6862H16.4325V13.5314C16.4325 12.3347 16.4325 10.6778 14.6908 10.6778C12.9491 10.6778 12.7658 12.0586 12.7658 13.3473V18.5941H9.55746V8.28452H12.5825V9.66527H12.6741C13.1325 8.83682 14.2325 7.91632 15.7908 7.91632C19.0908 7.91632 19.7325 10.1255 19.7325 12.9791V18.6862H19.6408Z" fill="white"/>
-        </svg>
+			 </a>
+			 <a
+				 className="zg-share-links__link"
+				 href={`https://www.linkedin.com/shareArticle?mini=true&url=${url}`}
+				 target="_blank"
+				 rel="noopener noreferrer"
+				 title="Share on Linkedin"
+			 >
+				 <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+					 <path
+						 d="M21.1991 0H2.49912C1.58245 0 0.849121 0.736402 0.849121 1.56485V20.4351C0.849121 21.2636 1.58245 22 2.49912 22H21.1991C22.1158 22 22.8491 21.2636 22.8491 20.4351V1.56485C22.8491 0.736402 22.1158 0 21.1991 0ZM7.35745 18.7782H4.14912V8.28452H7.35745V18.7782ZM5.79912 6.81172C4.79079 6.81172 3.87412 5.98326 3.87412 4.87866C3.87412 3.77406 4.69912 2.94561 5.79912 2.94561C6.80745 2.94561 7.72412 3.77406 7.72412 4.87866C7.72412 5.98326 6.80745 6.81172 5.79912 6.81172ZM19.6408 18.6862H16.4325V13.5314C16.4325 12.3347 16.4325 10.6778 14.6908 10.6778C12.9491 10.6778 12.7658 12.0586 12.7658 13.3473V18.5941H9.55746V8.28452H12.5825V9.66527H12.6741C13.1325 8.83682 14.2325 7.91632 15.7908 7.91632C19.0908 7.91632 19.7325 10.1255 19.7325 12.9791V18.6862H19.6408Z"
+						 fill="white"/>
+				 </svg>
 
-      </a>
-      <a
-        className="zg-share-links__link"
-        href={`https://www.facebook.com/sharer.php?&u=${url}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Share on Facebook"
-      >
-        <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M21.63 0H2.06829C1.74569 0.00239863 1.43698 0.131616 1.20886 0.359737C0.980737 0.587857 0.85152 0.896565 0.849121 1.21917V20.7808C0.85152 21.1034 0.980737 21.4121 1.20886 21.6403C1.43698 21.8684 1.74569 21.9976 2.06829 22H12.6008V13.4933H9.74079V10.1658H12.6008V7.71833C12.6008 4.87667 14.3333 3.3275 16.8816 3.3275C17.7341 3.3275 18.5866 3.3275 19.4391 3.45583V6.41667H17.6883C16.3041 6.41667 16.0383 7.07667 16.0383 8.03917V10.1567H19.3383L18.9075 13.4842H16.0383V22H21.63C21.9526 21.9976 22.2613 21.8684 22.4894 21.6403C22.7175 21.4121 22.8467 21.1034 22.8491 20.7808V1.21917C22.8467 0.896565 22.7175 0.587857 22.4894 0.359737C22.2613 0.131616 21.9526 0.00239863 21.63 0Z" fill="white"/>
-        </svg>
+			 </a>
+			 <a
+				 className="zg-share-links__link"
+				 href={`https://www.facebook.com/sharer.php?&u=${url}`}
+				 target="_blank"
+				 rel="noopener noreferrer"
+				 title="Share on Facebook"
+			 >
+				 <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+					 <path
+						 d="M21.63 0H2.06829C1.74569 0.00239863 1.43698 0.131616 1.20886 0.359737C0.980737 0.587857 0.85152 0.896565 0.849121 1.21917V20.7808C0.85152 21.1034 0.980737 21.4121 1.20886 21.6403C1.43698 21.8684 1.74569 21.9976 2.06829 22H12.6008V13.4933H9.74079V10.1658H12.6008V7.71833C12.6008 4.87667 14.3333 3.3275 16.8816 3.3275C17.7341 3.3275 18.5866 3.3275 19.4391 3.45583V6.41667H17.6883C16.3041 6.41667 16.0383 7.07667 16.0383 8.03917V10.1567H19.3383L18.9075 13.4842H16.0383V22H21.63C21.9526 21.9976 22.2613 21.8684 22.4894 21.6403C22.7175 21.4121 22.8467 21.1034 22.8491 20.7808V1.21917C22.8467 0.896565 22.7175 0.587857 22.4894 0.359737C22.2613 0.131616 21.9526 0.00239863 21.63 0Z"
+						 fill="white"/>
+				 </svg>
 
-      </a>
-      <button
-        className="btn-link zg-share-links__link position-relative"
-        onClick={() => {
-          copyLink();
-        }}
-      >
-        Copy link
-        {showTip && (<span>Copied!</span>)}
-      </button>
-    </div>
+			 </a>
+		 </div>
+
+		 <button
+			 className="btn-outline btn position-relative"
+			 onClick={() => {
+				 copyLink();
+			 }}
+		 >
+			<span>
+				<svg width={12} height={12}>
+					<use xlinkHref="#icon-copy"/>
+				</svg>
+				Copy link
+			</span>
+			 {showTip && (<span className={`position-absolute top-100 end-0 mt-12 text-body`}>Copied!</span>)}
+		 </button>
+	 </div>
   )
 }
diff --git a/src/components/ShareButtons/styles.module.css b/src/components/ShareButtons/styles.module.css
@@ -1,6 +1,2 @@
-.main {
-  display: flex;
-  align-items: center;
-  gap:12px;
-  padding: 2rem 0;
+.shareWrap{
 }
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
@@ -119,7 +119,7 @@ $grid-breakpoints: (
   xs: 0,
   //sm: 576px,
   md: 640px,
-  lg: 992px,
+  lg: 997px,
   xl: 1200px,
   xxl: 1400px,
   x2l: 1600px,
@@ -435,17 +435,17 @@ $input-btn-font-family:       $font-family-base;
 $input-btn-font-size:         18px;
 $input-btn-line-height:       1.2;
 
-$btn-padding-y:               8px;
-$btn-padding-x:               12px;
-$btn-font-family:             $headings-font-family;
-$btn-font-size:               $f14;
+$btn-padding-y:               5px;
+$btn-padding-x:               10px;
+$btn-font-family:             $font-family-base;
+$btn-font-size:               $f12;
 $btn-line-height:             1;
 $btn-white-space:             nowrap; // Set to `nowrap` to prevent text wrapping
 
 
 $btn-border-width:            1px;
 
-$btn-font-weight:             500;
+$btn-font-weight:             400;
 $btn-box-shadow:              3px 4px 0 0 $gray-600;
 $btn-focus-width:             $input-btn-focus-width;
 $btn-focus-box-shadow:        1px 2px 0 0 $black-800;
diff --git a/src/scss/base/_base.scss b/src/scss/base/_base.scss
@@ -170,4 +170,6 @@ a, button {
   --rsk-color-mode-bg: var(--bs-brand-2);
   --rsk-color-mode-btn-bg: #7247D9;
 
+  //Aside
+  --ifm-toc-border-color:rgba(var(--bs-body-color-rgb), 0.4);
 }
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
@@ -69,3 +69,6 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
 a{
   color: var(--rsk-color-main);
 }
+text-body{
+  color: var(--bs-body-color) !important;
+}
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
@@ -1,26 +1,34 @@
 .btn{
   letter-spacing: -0.02em;
-  box-shadow: var(--bs-btn-box-shadow);
-  --bs-btn-color: #{$black-800};
-  --bs-btn-bg: #{$gray-200};
-  --bs-btn-hover-bg: #{$gray-200};
-  --bs-btn-border-color: #{$gray-600};
-  --bs-btn-hover-border-color: #{$gray-600};
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-bg: var(--bs-body-bg);;
+  --bs-btn-border-color: var(--bs-body-color);;
+
+  --bs-btn-hover-color: var(--bs-body-bg);
+  --bs-btn-hover-bg: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-body-color);
+
+  --bs-btn-active-color: var(--bs-body-bg);
+  --bs-btn-active-bg: var(--bs-body-color);
+
   --bs-btn-focus-box-shadow: #{$btn-focus-box-shadow};
   --bs-btn-active-box-shadow: #{$btn-active-box-shadow};
+
+  & > span{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    position: relative;
+    z-index: 1;
+  }
   &:hover, &:focus{
     box-shadow: var(--bs-btn-focus-box-shadow);
   }
   &:active{
     box-shadow: var(--bs-btn-active-box-shadow);
   }
 }
-.btn-flat{
-  --bs-btn-box-shadow: none;
-  &.active{
-  --bs-btn-box-shadow: #{$btn-focus-box-shadow};
-  }
-}
+
 .btn-ghost{
   --bs-btn-box-shadow: none;
   --bs-btn-border-color: transparent;
@@ -32,26 +40,7 @@
     box-shadow: var(--bs-btn-active-box-shadow);
   }
 }
-.btn-play{
-  width: 44px;
-  height: 44px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  color: $black-800;
-  background: $gray-200;
-  border: 1px solid $black-800;
-  border-radius: 4px;
-  svg{
-    margin-left: 4px;
-  }
-  &:hover, &:focus{
-    box-shadow: var(--bs-btn-focus-box-shadow);
-  }
-  &:active{
-    box-shadow: var(--bs-btn-active-box-shadow);
-  }
-}
+
 .btn-close{
   --bs-btn-close-color: var(--bs-forest-green);
   --bs-btn-close-hover-color: var(--bs-lime-green);
@@ -128,3 +117,31 @@
     }
   }
 }
+.btn-outline {
+  position: relative;
+  border-radius: 40px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    height: 100%;
+    width: 100%;
+    padding: inherit;
+    border-radius: 40px;
+    border: 1px solid $white;
+    z-index: -1;
+    background-color: $black;
+  }
+
+  &--alt{
+    &:after{
+      content: none;
+    }
+  }
+  &--xs{
+    padding: 2px 12px;
+  }
+}
+
diff --git a/src/theme/DocItem/Aside/index.js b/src/theme/DocItem/Aside/index.js
@@ -18,11 +18,16 @@ const DocTOCDesktop = () => {
 }
 export default function DocItemAside() {
 
-	return <div className={clsx(styles.docItemAside, `h-100 border-start ps-30`)}>
-		<div className={clsx(styles.docItemAsideInner)}>
+	return <div className={clsx(styles.docItemAside, `h-100 pt-40 pt-lg-0 ps-lg-30`)}>
+		<div className={clsx(styles.docItemAsideInner, `d-flex flex-column gap-32 justify-content-between`)}>
 			{DocTOCDesktop()}
 
-			<ShareButtons url={`#`}/>
+			<div className={`flex-grow-1 position-relative d-flex flex-column`}>
+				<div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
+					<ShareButtons />
+				</div>
+			</div>
+
  		</div>
 	</div>
 }
diff --git a/src/theme/DocItem/Aside/styles.module.scss b/src/theme/DocItem/Aside/styles.module.scss
@@ -1,7 +1,20 @@
 .docItemAside {
-  --bs-border-color: var(--ifm-toc-border-color)
+
+  @media (min-width: 997px) {
+    border-left: 1px solid var(--ifm-toc-border-color);
+  }
 }
+
 .docItemAsideInner{
-  position: sticky;
-  top: 96px;
+
+  @media (min-width: 997px) {
+    position: sticky;
+    top: 96px;
+    min-height: calc(100vh - 96px);
+  }
+}
+.docItemAsideBottom{
+  @media (min-width: 997px) {
+    bottom: 32px;
+  }
 }
diff --git a/src/theme/DocItem/TOC/Desktop/index.js b/src/theme/DocItem/TOC/Desktop/index.js
@@ -6,7 +6,7 @@ import Translate from '@docusaurus/Translate';
 
 export default function DocItemTOCDesktop() {
   const {toc, frontMatter} = useDoc();
-  return <>
+  return <div>
 	  <h4 className={`title-s mb-30 text-uppercase`}>
 		  <Translate
 			  id="theme.TOCCollapsible.toggleButtonLabel"
@@ -20,5 +20,5 @@ export default function DocItemTOCDesktop() {
 		  maxHeadingLevel={frontMatter.toc_max_heading_level}
 		  className={ThemeClassNames.docs.docTocDesktop}
 	  />
-  </>
+  </div>
 }
diff --git a/src/theme/Layout/SVGSprite/index.js b/src/theme/Layout/SVGSprite/index.js
diff --git a/src/theme/TOCItems/styles.module.scss b/src/theme/TOCItems/styles.module.scss

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,2 @@`
`1`		`-.main {`
`2`		`- display: flex;`
`3`		`- align-items: center;`
`4`		`- gap:12px;`
`5`		`- padding: 2rem 0;`
	`1`	`+.shareWrap{`
`6`	`2`	`}`
Original file line number	Diff line number	Diff line change
`@@ -170,4 +170,6 @@ a, button {`
`170`	`170`	`--rsk-color-mode-bg: var(--bs-brand-2);`
`171`	`171`	`--rsk-color-mode-btn-bg: #7247D9;`
`172`	`172`
	`173`	`+ //Aside`
	`174`	`+ --ifm-toc-border-color:rgba(var(--bs-body-color-rgb), 0.4);`
`173`	`175`	`}`
Original file line number	Diff line number	Diff line change
`@@ -69,3 +69,6 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {`
`69`	`69`	`a{`
`70`	`70`	`color: var(--rsk-color-main);`
`71`	`71`	`}`
	`72`	`+text-body{`
	`73`	`+ color: var(--bs-body-color) !important;`
	`74`	`+}`