From 9b8584413ab516222c81563104f211227aac19a9 Mon Sep 17 00:00:00 2001
From: Elex <developer@elex-project.com>
Date: Fri, 21 Jun 2024 13:36:10 +0900
Subject: [PATCH] 2024-06-21

---
 src/grid-layout.html | 188 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 src/grid-layout.html
diff --git a/src/grid-layout.html b/src/grid-layout.html
new file mode 100644
index 0000000..6d25601
--- /dev/null
+++ b/src/grid-layout.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>App Layout</title>
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+            html, body {
+                width: 100%; height: 100%;
+                margin:0; border:0; padding: 0;
+            }
+            main {
+                margin: 0;
+            }
+            #app-layout{
+                width: 100%; height: 100%;
+                margin:0; border:0; padding: 0;
+                display: grid;
+                grid-template-areas:    "header header"
+                                        "sidebar main-content";
+                grid-template-columns: 280px 1fr;
+                grid-template-rows: 64px 1fr;
+                transition-property: all;
+                transition-duration: .5s;
+            }
+            #app-layout.closed{
+                grid-template-columns: 0px 1fr;
+            }
+            #header{
+                height: 64px;
+                grid-area: header;
+                background-color: teal;
+                box-shadow: 0 1px 2px 1px rgb(0, 0, 0, .2);
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+            }
+            #sidebar{
+                width: 280px;
+                grid-area: sidebar;
+                overflow-y: scroll;
+                transition-property: all;
+                transition-duration: .5s;
+                background-color: gray;
+            }
+            .closed #sidebar{                
+                margin-left: -280px;
+            }
+            #sidebar ul {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                list-style-position: inside;
+                list-style-type: none;
+                margin: 0; padding: 0;
+            }
+            #sidebar li {
+                height: 48px;
+                width: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                justify-content: start;
+            }
+            #sidebar li:hover {
+                background-color: aliceblue;
+            }
+            #sidebar li a {
+                overflow: hidden;
+            }
+            #main-content {
+                grid-area: main-content;
+                overflow-y: scroll;
+                
+                display: flex;
+                flex-direction: column;
+
+                
+            }
+            #main-content .page-layout {
+                width: 100%;
+                max-width: 960px;
+                margin: 0 auto;
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                box-shadow: 2px 0 2px 1px rgb(0,0,0, .4),
+                    -2px 0 2px 1px rgb(0,0,0, .4);;
+            }
+            #main-content main{
+                background-color: lightgray;
+                min-height: 300px;
+                flex-grow: 1;
+            }
+            #main-content footer{
+                background-color: darkslategray;
+                flex-grow: 0;
+            }
+            #mob-menu {
+                display: block;
+                width: 100%; height: 100%;
+                margin: 0; padding: 0; border: 0;
+                background-color: rgb(0, 0, 0, .2);
+                position: absolute;
+                top: 0; left: 0;
+            }
+            #mob-menu ul {
+                background-color: wheat;
+                width: 85%; height: 100%;
+                list-style-type: none;
+                margin: 0; padding: 0;
+            }
+        </style>
+        <script>
+            let toggle = function(){
+                document.querySelector("#app-layout").classList.toggle("closed");
+            };
+            let toggle2 = function(){
+                let elem = document.querySelector("#mob-menu");
+                if (null == elem){
+                    let mnu = document.createElement("div");
+                    mnu.setAttribute("id", "mob-menu");
+                    mnu.onclick = function(){
+                        toggle2();
+                    };
+                    mnu.appendChild(document.querySelector("#sidebar ul").cloneNode(true));
+                    document.querySelector("body").append(mnu);
+                } else {
+                    document.querySelector("body").removeChild(elem);
+                }
+                
+            };
+        </script>
+    </head>
+    <body>
+        <div id="app-layout">
+            <header id="header">
+                <button onclick="toggle();">Toggle</button> <button onclick="toggle2();">Mobile</button><span>Header</span>
+            </header>
+            <aside id="sidebar">
+                <ul>
+                    <li><a href="">Menu 1</a></li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                    <li>Menu 1</li>
+                </ul>
+            </aside>
+            <div id="main-content">
+                <div class="page-layout">
+                    <main>
+                        <article>
+                            <p>Main</p>
+                        <p>
+                            ...
+                        </p>
+                        </article>
+                        
+                    </main>
+                    <footer>
+                        Footer
+                    </footer>
+                </section>
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
