initial commit

app/assets/css/layout/_app.scss

@@ -0,0 +1,35 @@
+.main-container{
+  display: flex;
+  justify-content: center;
+  background-color: rgb(218, 218, 218);
+}
+
+.app-container{
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	background-color: rgb(236, 236, 236);
+	box-shadow: 0px 0px 15px rgb(136, 136, 136) ;
+	min-height: 100dvh;
+  width:100%;
+	max-width: 450px;
+	overflow: hidden;
+}
+
+.up{
+	height: 100%;
+	position:relative;
+	border:#f0f 3px solid;
+
+}
+
+.app-scroll-view{
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	max-width: 450px;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch; /* Fluidité pour iOS */
+	margin-inline:0.5em;
+}

app/assets/css/layout/_navBar.scss

@@ -0,0 +1,63 @@
+
+button.panel-item{
+	border-radius: 0.35em;
+  padding:0.5em 0.5em;
+  border:none;
+  font-size:1em;
+	text-align: center;
+	margin-block:0.25em;
+	width:88%;
+}
+
+.panel-nav {
+  //display: none;
+  position: absolute;
+  top:0;
+  right:0;
+  background: #aaaaaa80;
+  backdrop-filter: blur(5px);            /* flou du contenu derrière */
+  -webkit-backdrop-filter: blur(5px);    /* Safari */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-block: 2em;
+  gap: 0.75rem;
+  transform: translateX(100%);
+  opacity: 0;
+  transition: all 0.5s;
+  box-sizing: border-box;
+  z-index: 5;
+  &.open {
+    display: flex;
+    transform: translateX(1px);
+    opacity: 1;
+  }}
+  
+  div.nav-bar-up{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+  }
+  div.nav-bar-down{
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    text-align: right;
+  }
+
+.panel-item {
+  text-decoration: none;
+  font-weight: 500;
+  color: blueviolet;
+  padding: 0.5rem;
+  padding-left: 3.2em;
+  padding-right: 0.8em;
+  transition: color 0.2s;
+}
+
+.panel-item:hover {
+  color: hsl(271, 76%, 35%);
+  background-color: #aaaaaa80;
+}