diff --git a/App.razor b/App.razor index 6fd3ed1..b43127c 100644 --- a/App.razor +++ b/App.razor @@ -1,8 +1,10 @@  + - - + + + Not found diff --git a/Program/Layout/MainLayout.razor b/Program/Layout/MainLayout.razor index 76eb725..1d07228 100644 --- a/Program/Layout/MainLayout.razor +++ b/Program/Layout/MainLayout.razor @@ -1,16 +1,24 @@ @inherits LayoutComponentBase
- diff --git a/Program/Layout/MainLayout.razor.css b/Program/Layout/MainLayout.razor.css index ecf25e5..74ffa3a 100644 --- a/Program/Layout/MainLayout.razor.css +++ b/Program/Layout/MainLayout.razor.css @@ -1,77 +1,93 @@ .page { - position: relative; display: flex; flex-direction: column; -} - -main { - flex: 1; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + height: 100vh; + overflow: hidden; } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; + position: fixed; + top: 0; + left: 0; + right: 0; height: 3.5rem; display: flex; align-items: center; + background-color: #f7f7f7; + border-bottom: 1px solid #ddd; + z-index: 100; + padding: 0 1rem; } - .top-row ::deep a, .top-row ::deep .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - text-decoration: none; - } +.top-title { + width: 250px; + font-weight: bold; +} - .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { - text-decoration: underline; - } +.top-menu { + flex: 1; + display: flex; + justify-content: flex-end; + gap: 1rem; +} - .top-row ::deep a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } +/* 본문 구조 */ +main { + display: flex; + flex: 1; + margin-top: 3.5rem; + overflow: hidden; + /*height: calc(100vh - 3.5rem);*/ +} -@media (max-width: 640.98px) { +.side-menu { + width: 250px; + background: linear-gradient(180deg, rgb(5, 39, 103), #3a0647); + color: white; + padding: 1rem; + overflow-y: auto; + flex-shrink: 0; +} + +.content { + flex: 1; + padding: 1.5rem; + overflow-y: auto; + background-color: #fff; +} + +/* ✅ 모바일 대응 */ +@media (max-width: 768px) { .top-row { + flex-direction: row; justify-content: space-between; } - .top-row ::deep a, .top-row ::deep .btn-link { - margin-left: 0; + .top-title { + width: auto; + font-size: 1rem; } -} -@media (min-width: 641px) { - .page { + .top-menu { + justify-content: flex-end; + } + + main { + flex-direction: column; + height: calc(100vh - 3.5rem); + } + + .side-menu { + display: flex; flex-direction: row; + overflow-x: auto; + width: 100%; + white-space: nowrap; + padding: 0.5rem 1rem; } - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row.auth ::deep a:first-child { + .content { flex: 1; - text-align: right; - width: 0; - } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; + padding: 1rem; } } diff --git a/Program/Layout/TopMenu.razor b/Program/Layout/TopMenu.razor new file mode 100644 index 0000000..1c788bc --- /dev/null +++ b/Program/Layout/TopMenu.razor @@ -0,0 +1 @@ +

TopMenu

\ No newline at end of file diff --git a/Program/Layout/TopMenu.razor.css b/Program/Layout/TopMenu.razor.css new file mode 100644 index 0000000..e69de29 diff --git a/wwwroot/index.html b/wwwroot/index.html index 10f3555..e1a6f39 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -7,7 +7,7 @@ - Front + AcaMate