Merge pull request #23 from lorenzolewis/feat/refactor-horizontal-styles

Refactor Default Styles

.changeset/friendly-sloths-cough.md

@@ -0,0 +1,7 @@
+---
+"@lorenzo_lewis/starlight-multi-sidebar": patch
+---
+
+Refactor horizontal tab styles.
+
+If you are familiar with Astro docs prior to the Starlight migration this may look familiar 😉

docs/astro.config.mjs

@@ -8,7 +8,7 @@ export default defineConfig({
   site: "https://starlight-multi-sidebar.pages.dev",
   integrations: [
     starlight({
-      title: "🗃️ Starlight Multi-Sidebar",
+      title: "🗄️ Starlight Multi-Sidebar",
       social: {
         github: "https://github.com/lorenzolewis/starlight-multi-sidebar",
       },
@@ -24,7 +24,7 @@ export default defineConfig({
         },
       ],
       plugins: [
-        starlightMultiSidebar({ switcherStyle: "dropdown" }),
+        starlightMultiSidebar({ switcherStyle: "horizontalList" }),
         starlightLinksValidatorPlugin(),
       ],
     }),

docs/src/content/docs/index.mdx

@@ -1,8 +1,8 @@
 ---
-title: 🗃️ Starlight Multi-Sidebar
-description: Use multiple sidebars with your Starlight site.
+title: 🗄️ Starlight Multi-Sidebar
+description: Enable multiple sidebars with your Starlight site.
 hero:
-  tagline: Use multiple sidebars with your Starlight site.
+  tagline: Enable multiple sidebars with your Starlight site.
   image:
     file: ../../assets/houston.webp
   actions:

packages/starlight-multi-sidebar/CHANGELOG.md

@@ -30,7 +30,7 @@
   export default defineConfig({
     integrations: [
       starlight({
-        title: "🗃️ Starlight Multi-Sidebar",
+        title: "🗄️ Starlight Multi-Sidebar",
   +     plugins: [starlightMultiSidebar()],
   -     plugins: [starlightMultiSidebar],
       }),
@@ -44,7 +44,7 @@
   export default defineConfig({
     integrations: [
       starlight({
-        title: "🗃️ Starlight Multi-Sidebar",
+        title: "🗄️ Starlight Multi-Sidebar",
         plugins: [
           starlightMultiSidebar({
             switcherStyle: "dropdown",

packages/starlight-multi-sidebar/components/HorizontalList.astro

@@ -70,17 +70,6 @@ const sidebars = Astro.props.multiSidebarData.map((sidebar) => {
     ))
   }
 </starlight-multi-sidebar-tabs>
-<style>
-  .__collapse > input {
-    /* Layout */
-    position: relative;
-    display: inline-flex;
-    grid-row-start: 1;
-    appearance: none;
-    width: 100%;
-    min-height: fit-content;
-  }
-</style>
 <style>
   starlight-tabs {
     display: block;
@@ -91,26 +80,30 @@ const sidebars = Astro.props.multiSidebarData.map((sidebar) => {
   }
 
   [role="tablist"] {
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    justify-content: space-around;
     list-style: none;
-    padding: 0;
-    margin-bottom: var(--sl-nav-pad-y);
+    padding-inline: 0.5rem;
+    padding-block-end: var(--sl-nav-pad-y);
   }
 
   .tab > [role="tab"] {
     display: block;
-    border-radius: 0.25rem;
-    padding-inline: 0.5rem;
-    font-size: var(--sl-text-lg);
-    font-weight: 600;
-    cursor: pointer;
+    text-align: center;
+    font-size: var(--sl-text-base);
+    font-weight: 400;
     text-decoration: none;
-    color: canvastext;
-    min-height: fit-content;
+    color: var(--sl-color-gray-2);
+    border-bottom: 1px solid var(--sl-color-gray-5);
+    padding-inline: 0.2rem;
   }
   .tab [role="tab"][aria-selected="true"] {
-    color: var(--sl-color-text-invert);
-    background-color: var(--sl-color-text-accent);
+    font-weight: 600;
+    border-width: 2px;
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-white);
   }
 </style>
 

packages/starlight-multi-sidebar/package.json

@@ -3,7 +3,7 @@
   "author": "Lorenzo Lewis",
   "version": "0.1.2",
   "license": "MIT",
-  "description": "Use multiple sidebars with your Starlight site.",
+  "description": "Enable multiple sidebars with your Starlight site.",
   "type": "module",
   "exports": {
     ".": "./index.ts",