Style tweaks (shuding#1362)

* style tweaks

* add changeset

.changeset/fluffy-zebras-taste.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+style improvements

packages/nextra-theme-docs/css/styles.css

@@ -135,3 +135,32 @@ input[type='search'] {
 .nextra-banner-hidden .nextra-banner-container {
   @apply nx-hidden;
 }
+
+.nextra-sidebar-container {
+  [data-toggle-animation='show'] button {
+    opacity: 0;
+    animation: nextra-fadein 1s ease 0.2s forwards;
+  }
+  [data-toggle-animation='hide'] button {
+    opacity: 0;
+    animation: nextra-fadein2 1s ease 0.2s forwards;
+  }
+}
+
+@keyframes nextra-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes nextra-fadein2 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

packages/nextra-theme-docs/src/components/collapse.tsx

@@ -67,7 +67,7 @@ export function Collapse({
       <div
         ref={innerRef}
         className={cn(
-          'nx-p-2 nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none',
+          'nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none',
           isOpen ? 'nx-opacity-100' : 'nx-opacity-0',
           className
         )}

packages/nextra-theme-docs/src/components/navbar.tsx

@@ -57,7 +57,7 @@ function NavbarMenu({
           leaveTo="nx-opacity-0"
         >
           <Menu.Items
-            className="nx-absolute nx-right-0 nx-z-20 nx-mt-1 nx-max-h-64 nx-min-w-full nx-overflow-auto nx-rounded-md nx-border nx-border-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-border-white/10 dark:nx-bg-neutral-800"
+            className="nx-absolute nx-right-0 nx-z-20 nx-mt-1 nx-max-h-64 nx-min-w-full nx-overflow-auto nx-rounded-md nx-ring-1 nx-ring-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-ring-white/20 dark:nx-bg-neutral-800"
             tabIndex={0}
           >
             {Object.entries(items || {}).map(([key, item]) => (

packages/nextra-theme-docs/src/components/select.tsx

@@ -64,7 +64,7 @@ export function Select({
               ref={container}
               show={open}
               as={Listbox.Options}
-              className="nx-z-20 nx-max-h-64 nx-overflow-auto nx-rounded-md nx-border nx-border-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-border-white/10 dark:nx-bg-neutral-800"
+              className="nx-z-20 nx-max-h-64 nx-overflow-auto nx-rounded-md nx-ring-1 nx-ring-black/5 nx-bg-white nx-py-1 nx-text-sm nx-shadow-lg dark:nx-ring-white/20 dark:nx-bg-neutral-800"
               leave="nx-transition-opacity"
               leaveFrom="nx-opacity-100"
               leaveTo="nx-opacity-0"

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -165,7 +165,7 @@ function FolderImpl({ item, anchors }: FolderProps): ReactElement {
       <Collapse className="ltr:nx-pr-0 rtl:nx-pl-0" isOpen={open}>
         {Array.isArray(item.children) ? (
           <Menu
-            className={cn(classes.border, 'ltr:nx-ml-1 rtl:nx-mr-1')}
+            className={cn(classes.border, 'ltr:nx-ml-3 rtl:nx-mr-3')}
             directories={item.children}
             base={item.route}
             anchors={anchors}
@@ -258,9 +258,7 @@ function File({
                 className={cn(
                   classes.link,
                   'nx-flex nx-gap-2 before:nx-opacity-25 before:nx-content-["#"]',
-                  activeAnchor[id]?.isActive
-                    ? classes.active
-                    : classes.inactive
+                  activeAnchor[id]?.isActive ? classes.active : classes.inactive
                 )}
                 onClick={() => {
                   setMenu(false)
@@ -328,6 +326,7 @@ export function Sidebar({
   const router = useRouter()
   const [focused, setFocused] = useState<null | string>(null)
   const [showSidebar, setSidebar] = useState(true)
+  const [showToggleAnimation, setToggleAnimation] = useState(false)
 
   const anchors = useMemo(() => headings.filter(v => v.depth === 2), [headings])
   const sidebarRef = useRef<HTMLDivElement>(null)
@@ -415,7 +414,7 @@ export function Sidebar({
               className={cn(
                 'nx-overflow-y-auto nx-p-4',
                 'nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-3.75rem)]',
-                showSidebar ? 'nextra-scrollbar' : 'no-scrollbar'
+                showSidebar ? 'nextra-scrollbar nx-pr-2' : 'no-scrollbar'
               )}
               ref={sidebarRef}
             >
@@ -449,28 +448,34 @@ export function Sidebar({
             className={cn(
               'nx-sticky nx-bottom-0',
               'nx-bg-white dark:nx-bg-dark', // when banner is showed, sidebar links can be behind menu, set bg color as body bg color
-              'nx-mx-4 nx-border-t nx-py-4 nx-shadow-[0_-12px_16px_#fff]',
+              'nx-mx-4 nx-py-4 nx-shadow-[0_-12px_16px_#fff]',
               'nx-flex nx-items-center nx-gap-2',
               'dark:nx-border-neutral-800 dark:nx-shadow-[0_-12px_16px_#111]',
               'contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-shadow-none',
               showSidebar
-                ? [hasI18n && 'nx-justify-end']
+                ? cn(hasI18n && 'nx-justify-end', 'nx-border-t')
                 : 'nx-py-4 nx-flex-wrap nx-justify-center'
             )}
+            data-toggle-animation={
+              showToggleAnimation ? (showSidebar ? 'show' : 'hide') : 'off'
+            }
           >
             {hasI18n && (
               <LocaleSwitch
                 options={config.i18n}
                 lite={!showSidebar}
-                className={showSidebar ? 'nx-grow' : 'max-md:nx-grow'}
+                className={cn(showSidebar ? 'nx-grow' : 'max-md:nx-grow')}
               />
             )}
             {config.darkMode && <ThemeSwitch lite={!showSidebar || hasI18n} />}
             {config.sidebar.toggleButton && (
               <button
                 title={showSidebar ? 'Hide sidebar' : 'Show sidebar'}
                 className="max-md:nx-hidden nx-h-7 nx-rounded-md nx-transition-colors nx-text-gray-600 dark:nx-text-gray-400 nx-px-2 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50"
-                onClick={() => setSidebar(!showSidebar)}
+                onClick={() => {
+                  setSidebar(!showSidebar)
+                  setToggleAnimation(true)
+                }}
               >
                 <ExpandIcon isOpen={showSidebar} />
               </button>