+
{{ authUser.data.attributes.name }}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 6c181ec..394d433 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -8,9 +8,10 @@
@import "components/elements";
@import "components/main";
@import "components/nav";
-@import "components/sidebar";
+@import "components/topbar";
@import "components/avatar";
@import "components/alert_box";
+@import "components/search_box";
@import "pages/auth";
@import "pages/memos";
diff --git a/resources/sass/components/avatar.scss b/resources/sass/components/avatar.scss
index 98e8aa8..61f5f9c 100644
--- a/resources/sass/components/avatar.scss
+++ b/resources/sass/components/avatar.scss
@@ -6,7 +6,7 @@
border-radius: 50%;
color: $light;
font-weight: bold;
- text-underline: none;
+ text-decoration: none;
&-small {
$size: 3rem;
@@ -29,3 +29,7 @@
font-size: $size *2/3;
}
}
+
+.avatar-box {
+ text-decoration: none;
+}
diff --git a/resources/sass/components/nav.scss b/resources/sass/components/nav.scss
index 3ef0c9f..2a2d96a 100644
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -1,16 +1,67 @@
nav {
- background-color: $medium;
- height: 4.5rem;
+ background-color: $mediumDark;
+ height: 100vh;
+ width: 15rem;
+ flex-shrink: 0;
+ box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
- .site-logo {
- width: 3rem;
- fill: $dark;
- transition: fill 0.2s;
+ hr {
+ width: 90%;
+ border-radius: 1px;
+ border: 1px solid $dark;
+ }
- &:hover {
- fill: $mediumDark;
+ .nav-item {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: $light;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+
+ svg {
+ margin: 0 1rem;
transition: fill 0.2s;
}
+
+ &:hover {
+ color: $dark;
+ background-color: $light;
+ transition: color 0.2s, background-color 0.2s;
+
+ svg {
+ fill: $dark;
+ transition: fill 0.2s;
+ }
+ }
+
+ //&:visited {
+ // color: $dark;
+ //}
+ }
+}
+
+.site-logo {
+ width: 3rem;
+ fill: $light;
+ transition: fill 0.2s;
+
+ &:hover {
+ fill: $dark;
+ transition: fill 0.2s;
+ }
+}
+
+
+.site-logo-main {
+ @extend .site-logo;
+ display: block;
+ padding: 1rem 2rem;
+ width: 100%;
+
+ svg {
+
+ width: 100%;
}
}
diff --git a/resources/sass/components/search_box.scss b/resources/sass/components/search_box.scss
new file mode 100644
index 0000000..e3a2446
--- /dev/null
+++ b/resources/sass/components/search_box.scss
@@ -0,0 +1,14 @@
+.search-box {
+ display: flex;
+ align-items: center;
+
+ button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ svg {
+ width: 2.4rem;
+ }
+}
diff --git a/resources/sass/components/sidebar.scss b/resources/sass/components/sidebar.scss
deleted file mode 100644
index 51e8d0d..0000000
--- a/resources/sass/components/sidebar.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-aside {
- background-color: $mediumLight;
- height: calc(100vh - 4.5rem);
- width: 15rem;
- flex-shrink: 0;
-}
diff --git a/resources/sass/components/topbar.scss b/resources/sass/components/topbar.scss
new file mode 100644
index 0000000..14036c1
--- /dev/null
+++ b/resources/sass/components/topbar.scss
@@ -0,0 +1,5 @@
+.topbar {
+ background-color: $medium;
+ width: calc(100vw - 15rem);
+ box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
+}