WIP

portone-io · Sep 25, 2024 · e4c81a3 · e4c81a3
1 parent 91be652
commit e4c81a3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 13 deletions.
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
@@ -93,7 +93,7 @@ export default function TableOfContents(props: Props) {
  const activeId = useActiveId(() => props.headings, childActiveId);
 
  return (
- <ul class="m-0 flex flex-col list-none gap-6px p-0">
+ <ul class="m-0 flex flex-col list-none gap-1 p-0">
  <For each={props.headings}>
  {(heading) => (
  <Item
@@ -126,7 +126,7 @@ function Item(props: {
  <a
  href={`#${props.heading.id}`}
  class={clsx(
- "py-6px block break-keep text-sm font-semibold",
+ "py-1 block break-keep text-.8125rem leading-5 font-500",
  props.isActive ? "text-slate-8" : "text-slate-4",
  )}
  >
@@ -168,14 +168,14 @@ function SubItem(props: {
  return (
  <li
  class={clsx(
- "text-sm transition-colors duration-300",
+ "text-.8125rem leading-5 transition-colors duration-300",
  // props.isActive && "bg-slate-100",
  )}
  >
  <a
  href={`#${props.heading.id}`}
  class={clsx(
- "py-6px block break-keep font-medium text-sm transition-[padding-top,padding-bottom] duration-300",
+ "py-1 block break-keep font-medium text-.8125rem leading-5 transition-[padding-top,padding-bottom] duration-300 hover:text-portone",
  props.isActive
  ? "text-portone py-8px"
  : props.isParentActive

diff --git a/src/layouts/sidebar/DocsNavMenu.tsx b/src/layouts/sidebar/DocsNavMenu.tsx
@@ -48,7 +48,7 @@ export default function DocsNavMenu(props: Props) {
  <SearchButton lang={props.lang} />
  </div>
  <nav id="nav-menu" class="relative flex-1 overflow-y-scroll">
- <ul class="flex flex-col gap-1 px-2 pb-4">
+ <ul class="flex flex-col gap-1 px-4 pb-4">
  <For each={navMenuItems()}>
  {(item) => {
  if (item.type === "group") {
@@ -61,7 +61,7 @@ export default function DocsNavMenu(props: Props) {
  >
  <li class="[&:not(:last-child)]:mb-4">
  <h4 class="p-2 text-lg font-bold first:mt-0">
- <span>{item.label}</span>
+ <span class="font-500">{item.label}</span>
  </h4>
  <ul class="flex flex-col gap-1">
  <For each={item.items}>

diff --git a/src/layouts/sidebar/LeftSidebar.tsx b/src/layouts/sidebar/LeftSidebar.tsx
@@ -6,12 +6,12 @@ export default function LeftSidebar(props: { children: JSXElement }) {
  const sidebarOpen = useSidebarContext();
 
  return (
- <aside class="pointer-events-none absolute w-65 shrink-0 text-slate-700 z-left-sidebar md:relative md:block">
+ <aside class="pointer-events-none absolute w-70 shrink-0 text-slate-700 z-left-sidebar md:relative md:block">
  <div
  style={{
  transform: sidebarOpen.get() ? "none" : "translateX(-100%)",
  }}
- class="pointer-events-auto fixed h-[calc(100vh-3.5rem)] w-inherit flex flex-col border-r bg-white pl-1 transition-transform md:!transform-none"
+ class="pointer-events-auto fixed h-[calc(100vh-3.5rem)] w-inherit flex flex-col border-r bg-white transition-transform md:!transform-none"
  >
  {props.children}
  </div>

diff --git a/src/layouts/sidebar/LeftSidebarItem.tsx b/src/layouts/sidebar/LeftSidebarItem.tsx
@@ -92,6 +92,7 @@ function FolderLink(props: NavMenuPage & { isActive: boolean }) {
  </button>
  </div>
  <div class="pl-2" classList={{ block: isOpen(), hidden: !isOpen() }}>
+ {/* TODO: 각 Depth마다 선택된 항목에 대해 브랜드 컬러 border를 적용하도록 수정 */}
  <ul class="flex flex-col gap-1 border-l pl-2">
  <For each={props.items}>
  {(item) => (
@@ -156,7 +157,7 @@ export function JustLink(props: JustLinkProps) {
 export function getLinkStyle(isActive: boolean): string {
  return `px-2 block text-sm rounded ${
  isActive
- ? "font-bold text-orange-600 bg-orange-1"
+ ? "font-500 text-portone bg-orange-1"
  : "text-slate-500 hover:bg-slate-1"
  }`;
 }

diff --git a/src/layouts/sidebar/RightSidebar.tsx b/src/layouts/sidebar/RightSidebar.tsx
@@ -43,12 +43,15 @@ function RightSidebar(_props: RightSidebarProps) {
  <div class="hidden min-w-0 w-56 shrink-0 text-slate-7 lg:block">
  <Show when={toc()}>
  <nav class="fixed h-[calc(100%-56px)] w-inherit overflow-y-auto px-2 py-[28px]">
- <h2 class="mb-2 px-2 font-bold">{t(props.lang, "toc")}</h2>
+ <h2 class="mb-2 px-2 font-500">{t(props.lang, "toc")}</h2>
  <ul>
  <For each={toc()}>
  {(item) => (
- <SidebarItem href={`#${item.slug}`} label={item.text}>
- <ul class="pl-2">
+ <SidebarItem
+ href={`#${item.slug}`}
+ label={<span class="font-500">{item.text}</span>}
+ >
+ <ul class="pl-3">
  <For each={item.children}>
  {(item) => (
  <SidebarItem href={`#${item.slug}`} label={item.text} />
@@ -96,7 +99,7 @@ function SidebarItem(props: LinkProps) {
  document.getElementById(slug)?.scrollIntoView({ behavior: "smooth" });
  }}
  >
- <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-sm text-slate-5 hover:bg-slate-1">
+ <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-.8125rem text-slate-4 leading-5 hover:bg-slate-1 hover:text-portone">
  <Show when={props.icon}>
  <>
  <i class={`${props.icon} inline-block align-top text-lg`}></i>{" "}