サイドバーの作成

AyumuOgasawara commented 2 weeks ago

簡単でいいので、サイドバーの位置を決定する

AyumuOgasawara commented 1 week ago

サイドバーを作る際に、Drawerを使用した。そのコンポーネントの中にを追加することで、ヘッダーと被らずに使用することができるようになった

AyumuOgasawara commented 1 week ago

cssでサイズや、見た目、などを整えることはまだ実装していない。

AyumuOgasawara commented 1 week ago

layout.tsxにインポートする際にHeaderと同じようにインストールすることができなかった。なぜだろう。

import { Header } from '@/_components/layouts/Header/Header';
// NOTE: なんでSidebarはHeaderみたいにインポートできないの？
import Sidebar from "@/_components/layouts/Sidebar/Sidebar"

AyumuOgasawara commented 1 week ago

layout.tsxにインポートする際にHeaderと同じようにインストールすることができなかった。なぜだろう。
import { Header } from '@/_components/layouts/Header/Header';
// NOTE: なんでSidebarはHeaderみたいにインポートできないの？
import Sidebar from "@/_components/layouts/Sidebar/Sidebar"

Siderbarを以下のようにdefaultでエクスポートしていたためだった。defaultを削除すると、Headerと同じようにできた。どちらがいいんだろう

修正前

export default function Sidebar() {
  return (
    <Drawer
      variant="permanent"

修正後

export function Sidebar() {
  return (
    <Drawer
      variant="permanent"

AyumuOgasawara / receipt-scanner

サイドバーの作成 #14

修正前

修正後