topMenu, leftMenu, tabMenu, page style custom

[hbkim]

레이아웃 구성 요소

YAML 파일을 통해 탑메뉴, 왼쪽 메뉴, 탭메뉴, 페이지 등의 스타일을 설정할 수 있습니다.

layout:
  topMenu:
  leftMenu:
  tabMenu:
  page:

Top 메뉴바 설정 (topMenu)

• 최상단 메뉴의 레이아웃을 정의합니다.
• logoTemplate을 사용하여 커스텀 로고 및 타이틀을 설정할 수 있습니다.

layout:
  topMenu:
    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

• 아이콘과 Admin 텍스트를 포함한 로고 영역이 생성됩니다.
• hover:bg-white/10를 통해 마우스 호버 효과를 추가합니다.
• logoTemplate 안에서 <svg>를 활용할 수 있습니다.

    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2" fill="transparent"/>
            <circle cx="12" cy="12" r="4" fill="white"/>
          </svg>
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

---

사이드 메뉴 (Left Menu)

• 왼쪽 사이드바 스타일 및 레이아웃을 설정할 수 있습니다.

layout:
  leftMenu:
    containerClass: bg-slate-50 border-r border-slate-200 text-slate-600
    containerStyle:
      width: 250px
    itemClass: >
      text-sm font-bold text-sm rounded-lg
      hover:text-blue-600/90
    linkClass: > 
      py-3 no-underline hover:bg-slate-200 rounded-lg transition

• containerClass: 배경색, 테두리 스타일 지정 (bg-slate-50)
• containerStyle: 사이드바 너비 지정 (250px)
• itemClass: 메뉴 항목 디자인 (글꼴 크기, 둥근 모서리, hover 효과)
• linkClass: 메뉴 링크 스타일, 마우스 오버 시 배경 변경

---

탭 메뉴 (Tab Menu)

• 페이지 내 상단 탭 스타일을 설정합니다.

layout:
  tabMenu:
    containerClass: bg-white text-slate-600 font-bold text-sm px-3
    itemClass: p-3 px-4 rounded-lg mt-3 hover:text-blue-600/90
    itemActiveClass: bg-blue-200/30 text-blue-600/90

• containerClass: 배경을 하얀색 (bg-white)으로 설정
• itemActiveClass: 선택된 탭의 배경색을 연한 파란색 (bg-blue-200/30)으로 표시

---

페이지 컨텐츠 영역 (page)

• 메인 페이지의 여백 및 스타일을 설정합니다.

layout:
  page:
    containerStyle:
      marginTop: 55px
      marginLeft: 250px
    contentClass: p-6
    contentStyle: 
      minHeight: calc(100vh - 98px)

• marginTop: 상단 메뉴바의 높이(55px)만큼 마진 추가
• marginLeft: 사이드 메뉴바(250px)만큼 마진 추가
• minHeight: 화면 높이(100vh)에서 헤더 높이를 제외한 높이 자동 조정

---

위 설정들을 통해 필요에 따라 색상, 간격, 아이콘 등을 커스텀하여 더 나은 사용자 경험(UX)을 제공해보세요.

이해가 어렵거나 도움이 필요하시면 편하게 문의주시기 바랍니다.
감사합니다.

[jhlee]

예제1

layout:
  topMenu:
    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

예제2

layout:
  head:
  - tag: script
    # src: https://cdn.tailwindcss.com
    src: https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.10/tailwindcss.js

  leftMenu:
    containerClass: bg-slate-50 border-r border-slate-200 text-slate-600
    containerStyle:
      width: 250px
    itemClass: >
      text-sm font-bold text-sm rounded-lg
      hover:text-blue-600/90
      [&>.router-link-active]:!text-blue-600/90
    linkClass: > 
      py-3 no-underline hover:bg-slate-200 rounded-lg transition
  tabMenu:
    containerClass: bg-white text-slate-600 font-bold text-sm px-3
    containerStyle: none
    itemClass: p-3 px-4 rounded-lg mt-3 hover:text-blue-600/90
    itemActiveClass: bg-blue-200/30 text-blue-600/90
  page:
    containerStyle:
      marginTop: 55px
      marginLeft: 250px
    contentClass: p-6
    contentStyle: 
      minHeight: calc(100vh - 98px)
    
  topMenu:
    containerClass: fixed w-screen z-30 bg-white text-slate-600 border-b border-slate-200 px-2 [&>a]:text-zinc-800
    logoClass: text-slate-600
    itemClass: font-medium 
    linkClass: p-3 text-slate-700 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100
    logoTemplate: |
      <div class="flex text-zinc-800 hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
          
          </svg>
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

예제3

layout:
  head:
  - tag: script
    # src: https://cdn.tailwindcss.com
    src: https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.10/tailwindcss.js

  
  leftMenu:
    containerClass: bg-white shadow-lg
    containerStyle:
      width: 200px
    itemClass: >
      text-xs text-slate-800 font-medium hover:bg-slate-100
      [&>.router-link-active]:font-bold 
      [&>.router-link-active]:bg-slate-50
      [&>.router-link-active]:!text-indigo-700
    linkClass: no-underline text-slate-800 hover:text-indigo-700
  tabMenu:
    containerClass: bg-slate-50  border-b border-slate-200 text-xs font-bold
    itemClass: text-indigo-500 p-3 px-4
    itemActiveClass: bg-indigo-600/90 text-slate-50
  page:
    containerStyle:
      marginLeft: 200px

  topMenu:
    containerClass: fixed w-screen z-30 bg-slate-800 px-2
    logoClass: text-slate-50
    itemClass: font-medium text-xs
    linkClass: p-3 text-slate-100 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100/10
    navClass: font-medium text-xs p-3 text-slate-100 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100/10