sample 파일 생성

This commit is contained in:
2022-12-29 13:37:18 +09:00
parent aa00780914
commit 921ecbde11
8 changed files with 45 additions and 66 deletions
File diff suppressed because one or more lines are too long
@@ -22,7 +22,7 @@
width: 15rem; width: 15rem;
} }
#page-content-wrapper { #container {
min-width: 100vw; min-width: 100vw;
} }
@@ -35,7 +35,7 @@ body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
margin-left: 0; margin-left: 0;
} }
#page-content-wrapper { #container {
min-width: 0; min-width: 0;
width: 100%; width: 100%;
} }
@@ -321,4 +321,17 @@ function getParam(sname) {
return sval; return sval;
} }
//Toggle Menu 버튼
window.addEventListener('DOMContentLoaded', event => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
File diff suppressed because one or more lines are too long
+15 -42
View File
@@ -8,45 +8,19 @@
<jsp:include page="/WEB-INF/view/include/inc_head.jsp"/> <jsp:include page="/WEB-INF/view/include/inc_head.jsp"/>
</head> </head>
<body> <body>
<!-- wrapper : s -->
<div class="d-flex" id="wrapper"> <div class="d-flex" id="wrapper">
<!-- Sidebar--> <!-- Sidebar : s-->
<div class="border-end bg-white" id="sidebar-wrapper"> <jsp:include page="/WEB-INF/view/include/inc_body_sidebar.jsp"/>
<div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div> <!-- Sidebar : e-->
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a> <!-- container : s-->
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a> <div id="container">
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a> <!-- header : s-->
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a> <jsp:include page="/WEB-INF/view/include/inc_body_header.jsp"/>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a> <!-- header : e-->
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
</div> <div class="container-fluid" id="vueApp">
</div>
<!-- Page content wrapper-->
<div id="page-content-wrapper">
<!-- Top navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page content-->
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1> <h1 class="mt-4">Simple Sidebar</h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p> <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p> <p>
@@ -58,10 +32,9 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<!-- Bootstrap core JS--> <!-- container : e-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="/res/front/js/biz/home/index.js?v=${timestamp}"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body> </body>
</html> </html>
@@ -2,21 +2,7 @@
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%> <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="urlPath" value="${requestScope['javax.servlet.forward.servlet_path']}" />
<!-- Sidebar-->
<div class="border-end bg-white" id="sidebar-wrapper">
<div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
</div>
</div>
<!-- header : s -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid"> <div class="container-fluid">
@@ -39,5 +25,3 @@
</div> </div>
</div> </div>
</nav> </nav>
<!-- header : e -->
@@ -3,3 +3,14 @@
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div class="border-end bg-white" id="sidebar-wrapper">
<div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
</div>
</div>
@@ -12,7 +12,7 @@
<script type="text/javascript" src="/res/front/js/lib/axios-config.js?v=1"></script> <script type="text/javascript" src="/res/front/js/lib/axios-config.js?v=1"></script>
<script type="text/javascript" src="/res/front/js/lib/vue.js?v=<%=java.time.LocalDateTime.now()%>"></script> <script type="text/javascript" src="/res/front/js/lib/vue.js?v=<%=java.time.LocalDateTime.now()%>"></script>
<script type="text/javascript" src="/res/front/js/lib/vue.common.js?v=<%=java.time.LocalDateTime.now()%>"></script> <script type="text/javascript" src="/res/front/js/lib/vue.common.js?v=<%=java.time.LocalDateTime.now()%>"></script>
<script type="text/javascript" src="/res/front/js/lib/bootstrap.min.js?v=<%=java.time.LocalDateTime.now()%>"></script> <script type="text/javascript" src="/res/front/js/lib/bootstrap.bundle.min.js?v=<%=java.time.LocalDateTime.now()%>"></script>
<script type="text/javascript" src="/res/front/js/lib/jquery-3.5.1.min.js?v=<%=java.time.LocalDateTime.now()%>"></script> <script type="text/javascript" src="/res/front/js/lib/jquery-3.5.1.min.js?v=<%=java.time.LocalDateTime.now()%>"></script>
<script src="/res/front/js/biz/common/common.js"></script> <script src="/res/front/js/biz/common/common.js"></script>