chore: sidebar temp

GDSC-Hongik · Nov 10, 2024 · dd1c460 · dd1c460
1 parent 556268f
commit dd1c460
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/apps/wow-docs/app/layout.tsx b/apps/wow-docs/app/layout.tsx
@@ -1,5 +1,6 @@
 import "@/globals.css";
 
+import Sidebar from "components/Sidebar";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
@@ -16,7 +17,8 @@ const RootLayout = ({
   children: React.ReactNode;
 }): JSX.Element => {
   return (
-    <html lang="en">
+    <html lang="kr">
+      <Sidebar />
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/apps/wow-docs/components/Sidebar.tsx b/apps/wow-docs/components/Sidebar.tsx
@@ -0,0 +1,40 @@
+import { css } from "@styled-system/css";
+import type { CSSProperties } from "react";
+import { GdscLogo } from "wowds-icons";
+
+/**
+ * @description Sidebar 컴포넌트는 탭을 통해 페이지 내비게이션을 제공하는 컴포넌트입니다.
+ */
+export interface SidebarProps {
+  style?: CSSProperties;
+}
+
+const Sidebar = ({ style }: SidebarProps) => {
+  return (
+    <aside
+      aria-label="client navigation bar"
+      className={sidebarContainerStyle}
+      style={style}
+    >
+      <GdscLogo />
+      <div className={titleTextStyle}>Wow Design System</div>
+    </aside>
+  );
+};
+
+export default Sidebar;
+
+const sidebarContainerStyle = css({
+  width: 250,
+  height: "100%",
+  flexShrink: 0,
+});
+
+const titleTextStyle = css({
+  color: "textBlack",
+  fontFamily: "Product Sans",
+  fontSize: "20px",
+  fontWeight: 700,
+  lineHeight: "130%",
+  letterSpacing: "-0.2px",
+});
diff --git a/apps/wow-docs/constants/navMenu.ts b/apps/wow-docs/constants/navMenu.ts
@@ -0,0 +1,53 @@
+import { Folder, Home } from "wowds-icons";
+export const navMenu = [
+  {
+    href: "/overview",
+    icon: Home,
+    alt: "home icon",
+    label: "Overview",
+  },
+  {
+    href: "/foundation",
+    icon: Folder,
+    alt: "folder icon",
+    label: "Foundation",
+    children: [
+      { href: "/color", label: "Color" },
+      { href: "/typography", label: "Typography" },
+      { href: "/grid", label: "Grid" },
+      { href: "/spacing", label: "Spacing" },
+      { href: "/icon", label: "Icon" },
+      { href: "/graphic", label: "Graphic" },
+    ],
+  },
+  {
+    href: "/component",
+    icon: Folder,
+    alt: "folder icon",
+    label: "Component",
+    children: [
+      { label: "Avatar", href: "/avatar" },
+      { label: "Box", href: "/box" },
+      { label: "Button", href: "/button" },
+      { label: "Checkbox", href: "/checkbox" },
+      { label: "Chip", href: "/chip" },
+      { label: "Divider", href: "/divider" },
+      { label: "DropDown", href: "/dropdown" },
+      { label: "Header", href: "/header" },
+      { label: "MultiGroup", href: "/multigroup" },
+      { label: "Pagination", href: "/pagination" },
+      { label: "Picker", href: "/picker" },
+      { label: "RadioGroup", href: "/radiogroup" },
+      { label: "SearchBar", href: "/searchbar" },
+      { label: "Spinner", href: "/spinner" },
+      { label: "Stepper", href: "/stepper" },
+      { label: "Switch", href: "/switch" },
+      { label: "Table", href: "/table" },
+      { label: "Tabs", href: "/tabs" },
+      { label: "Tag", href: "/tag" },
+      { label: "TextButton", href: "/textbutton" },
+      { label: "TextField", href: "/textfield" },
+      { label: "Toast", href: "/toast" },
+    ],
+  },
+];