From c0d336a8e0a7bc408771ac67c79d05a1781aff49 Mon Sep 17 00:00:00 2001
From: frederikpyt <frederikpyt@gmail.com>
Date: Thu, 20 Aug 2020 14:56:11 +0200
Subject: [PATCH] v0.10.11 - Collapse-able admin menu

---
 .idea/encodings.xml                           |  4 +
 skolehjem/public/css/admin.css                | 13 ++-
 skolehjem/public/images/icons/Menuplan.svg    | 10 ++-
 .../public/images/icons/Vejledninger.svg      | 80 +------------------
 skolehjem/public/images/icons/feedback.svg    | 55 +++++++++++++
 skolehjem/public/images/icons/location.svg    | 49 ++++++++++++
 skolehjem/public/images/icons/news.svg        |  3 +
 skolehjem/public/images/icons/phone.svg       | 54 +++++++++++++
 skolehjem/public/images/icons/role.svg        |  1 +
 skolehjem/public/images/icons/wash.svg        |  1 +
 skolehjem/public/images/icons/wash_res.svg    | 12 +++
 skolehjem/resources/sass/admin/nav/nav.scss   | 13 ++-
 .../views/admin/layout/base.blade.php         | 75 ++++++++++++++---
 13 files changed, 269 insertions(+), 101 deletions(-)
 create mode 100644 skolehjem/public/images/icons/feedback.svg
 create mode 100644 skolehjem/public/images/icons/location.svg
 create mode 100644 skolehjem/public/images/icons/news.svg
 create mode 100644 skolehjem/public/images/icons/phone.svg
 create mode 100644 skolehjem/public/images/icons/role.svg
 create mode 100644 skolehjem/public/images/icons/wash.svg
 create mode 100644 skolehjem/public/images/icons/wash_res.svg

diff --git a/.idea/encodings.xml b/.idea/encodings.xml
index f826775..648e66d 100644
--- a/.idea/encodings.xml
+++ b/.idea/encodings.xml
@@ -3,8 +3,12 @@
   <component name="Encoding">
     <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/backpack-hvid.svg" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/eye-dark.svg" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/feedback.svg" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/food.svg" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/location.svg" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/phone.svg" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/print-hvid.svg" charset="UTF-8" />
     <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/users-hvid.svg" charset="UTF-8" />
+    <file url="file://$PROJECT_DIR$/skolehjem/public/images/icons/wash.svg" charset="UTF-8" />
   </component>
 </project>
\ No newline at end of file
diff --git a/skolehjem/public/css/admin.css b/skolehjem/public/css/admin.css
index d2faecf..5bc1a23 100644
--- a/skolehjem/public/css/admin.css
+++ b/skolehjem/public/css/admin.css
@@ -6656,7 +6656,8 @@ main {
 .nav {
   width: 15%;
   height: 100%;
-  min-width: 194px;
+  min-width: calc(1.5em + 4rem);
+  transition: width 0.5s;
 }
 
 .segment > h3 {
@@ -6669,14 +6670,18 @@ main {
 
 .segment > h3 > a {
   padding: 1rem 2rem;
-  display: block;
+  display: flex;
+}
+
+.segment > h3 > a > img {
+  width: 1.5em;
 }
 
 .segment > div {
-  padding: 0 1.25rem 0 1.25rem;
+  /*padding: 0 1.25rem 0 1.25rem;
   width: calc(100% - 2.5rem);
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: .5rem;*/
 }
 
 .segment > h3:hover {
diff --git a/skolehjem/public/images/icons/Menuplan.svg b/skolehjem/public/images/icons/Menuplan.svg
index 5fdc5a0..643334e 100644
--- a/skolehjem/public/images/icons/Menuplan.svg
+++ b/skolehjem/public/images/icons/Menuplan.svg
@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 24.73"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Artboard 2</title><path class="cls-1" d="M19.27,20.3H.88a.89.89,0,0,1,0-1.77H19.27a.89.89,0,0,1,0,1.77Z"/><path class="cls-1" d="M10.08,6.35A10.09,10.09,0,0,0,0,16.43a.88.88,0,0,0,.88.88H19.27a.88.88,0,0,0,.88-.88A10.09,10.09,0,0,0,10.08,6.35Zm0,1.48C7.87,7.83,4.83,9,3.56,11.2a.44.44,0,0,1-.38.22A.4.4,0,0,1,3,11.36a.43.43,0,0,1-.16-.6C4.25,8.26,7.57,7,10.09,7a.44.44,0,0,1,.44.44A.44.44,0,0,1,10.09,7.83Z"/><path class="cls-1" d="M20.15,21.73l-.36,1.39a2.1,2.1,0,0,1-2,1.57H2.39a2.11,2.11,0,0,1-2-1.57L0,21.73Z"/><path class="cls-1" d="M30,.88A.82.82,0,0,0,29.27,0H14a.82.82,0,0,0-.73.88.84.84,0,0,0,.63.87l.35,3.6a11.83,11.83,0,0,1,6.56,6.08,17.16,17.16,0,0,1,1.32,8,21,21,0,0,1-.64,4.15A3.47,3.47,0,0,1,21,24.73h5a1.23,1.23,0,0,0,1.23-1.12L29.37,1.75A.84.84,0,0,0,30,.88Z"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 30 25">
+    <defs>
+        <style>.cls-1{fill:#fff;}</style>
+    </defs>
+    <title>Artboard 2</title>
+    <path class="cls-1" d="M19.27,20.3H.88a.89.89,0,0,1,0-1.77H19.27a.89.89,0,0,1,0,1.77Z"/>
+    <path class="cls-1" d="M10.08,6.35A10.09,10.09,0,0,0,0,16.43a.88.88,0,0,0,.88.88H19.27a.88.88,0,0,0,.88-.88A10.09,10.09,0,0,0,10.08,6.35Zm0,1.48C7.87,7.83,4.83,9,3.56,11.2a.44.44,0,0,1-.38.22A.4.4,0,0,1,3,11.36a.43.43,0,0,1-.16-.6C4.25,8.26,7.57,7,10.09,7a.44.44,0,0,1,.44.44A.44.44,0,0,1,10.09,7.83Z"/><path class="cls-1" d="M20.15,21.73l-.36,1.39a2.1,2.1,0,0,1-2,1.57H2.39a2.11,2.11,0,0,1-2-1.57L0,21.73Z"/><path class="cls-1" d="M30,.88A.82.82,0,0,0,29.27,0H14a.82.82,0,0,0-.73.88.84.84,0,0,0,.63.87l.35,3.6a11.83,11.83,0,0,1,6.56,6.08,17.16,17.16,0,0,1,1.32,8,21,21,0,0,1-.64,4.15A3.47,3.47,0,0,1,21,24.73h5a1.23,1.23,0,0,0,1.23-1.12L29.37,1.75A.84.84,0,0,0,30,.88Z"/>
+</svg>
diff --git a/skolehjem/public/images/icons/Vejledninger.svg b/skolehjem/public/images/icons/Vejledninger.svg
index d6fc7ff..76483d1 100644
--- a/skolehjem/public/images/icons/Vejledninger.svg
+++ b/skolehjem/public/images/icons/Vejledninger.svg
@@ -1,79 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 407.686 407.686" style="enable-background:new 0 0 407.686 407.686;" xml:space="preserve">
-    <style>#Capa_1{fill:#FFF;}</style>
-<g>
-	<path d="M400.186,92.376h-17.95V75.392c0-3.804-2.848-7.005-6.625-7.449L271.611,55.729c-23.323-2.74-46.669,1.16-67.769,11.282
-		c-21.101-10.122-44.443-14.023-67.769-11.282l-104,12.214c-3.777,0.444-6.625,3.645-6.625,7.449v16.984H7.5
-		c-4.143,0-7.5,3.358-7.5,7.5v245.432c0,4.142,3.357,7.5,7.5,7.5h392.686c4.143,0,7.5-3.358,7.5-7.5V99.876
-		C407.686,95.734,404.328,92.376,400.186,92.376z M269.861,70.627l97.374,11.436v223.057l-95.624-11.23
-		c-20.593-2.419-41.202,0.347-60.269,7.993V80.065C229.613,71.53,249.748,68.265,269.861,70.627z M137.824,70.627
-		c20.112-2.363,40.249,0.903,58.519,9.438v221.82c-14.584-5.848-30.068-8.847-45.758-8.847c-4.823,0-9.668,0.283-14.511,0.851
-		l-95.625,11.23V82.063L137.824,70.627z M392.686,337.808H15V107.376h10.449v206.176c0,2.142,0.915,4.181,2.516,5.604
-		c1.6,1.423,3.733,2.095,5.859,1.845l104-12.214c21.608-2.539,43.248,1.412,62.567,11.424c2.164,1.122,4.738,1.122,6.902,0
-		c19.318-10.012,40.95-13.963,62.567-11.424l103.999,12.214c0.292,0.034,0.584,0.051,0.875,0.051c1.827,0,3.604-0.668,4.984-1.896
-		c1.601-1.423,2.516-3.462,2.516-5.604V107.376h10.45V337.808z"/>
-	<path d="M228.616,112.878c13.442-3.652,27.276-4.679,41.107-3.056l78.085,9.168c0.298,0.035,0.593,0.052,0.885,0.052
-		c3.751,0,6.991-2.809,7.439-6.626c0.482-4.114-2.461-7.84-6.574-8.323l-78.086-9.168c-15.75-1.849-31.491-0.678-46.788,3.479
-		c-3.998,1.086-6.357,5.207-5.271,9.204C220.499,111.605,224.623,113.963,228.616,112.878z"/>
-	<path d="M58.714,119.042c0.292,0,0.588-0.017,0.885-0.052l78.078-9.167c13.813-1.609,27.808-0.558,41.109,3.065
-		c3.995,1.087,8.119-1.268,9.207-5.266c1.089-3.997-1.269-8.119-5.266-9.207c-15.144-4.125-31.062-5.323-46.794-3.49l-78.085,9.168
-		c-4.113,0.483-7.057,4.209-6.574,8.323C51.723,116.233,54.963,119.042,58.714,119.042z"/>
-	<path d="M228.616,147.279c13.442-3.652,27.274-4.679,41.107-3.056l78.085,9.168c0.298,0.035,0.593,0.052,0.885,0.052
-		c3.751,0,6.991-2.809,7.439-6.626c0.482-4.114-2.461-7.84-6.574-8.323l-78.086-9.168c-15.748-1.848-31.49-0.678-46.788,3.479
-		c-3.998,1.086-6.357,5.207-5.271,9.204C220.499,146.005,224.623,148.365,228.616,147.279z"/>
-	<path d="M58.714,153.442c0.292,0,0.588-0.017,0.885-0.052l78.078-9.167c13.804-1.608,27.807-0.558,41.109,3.065
-		c3.995,1.087,8.119-1.268,9.207-5.266c1.089-3.997-1.269-8.119-5.266-9.207c-15.146-4.125-31.069-5.323-46.794-3.49l-78.085,9.168
-		c-4.113,0.483-7.057,4.209-6.574,8.323C51.723,150.633,54.963,153.442,58.714,153.442z"/>
-	<path d="M228.616,181.679c13.442-3.652,27.274-4.679,41.107-3.056l78.085,9.168c0.298,0.035,0.593,0.052,0.885,0.052
-		c3.751,0,6.991-2.809,7.439-6.626c0.482-4.114-2.461-7.84-6.574-8.323l-78.086-9.168c-15.748-1.848-31.49-0.677-46.788,3.479
-		c-3.998,1.086-6.357,5.207-5.271,9.204C220.499,180.406,224.623,182.765,228.616,181.679z"/>
-	<path d="M58.714,187.843c0.292,0,0.588-0.017,0.885-0.052l78.078-9.167c13.803-1.608,27.807-0.558,41.109,3.065
-		c3.995,1.088,8.119-1.268,9.207-5.266c1.089-3.997-1.269-8.119-5.266-9.207c-15.145-4.125-31.068-5.323-46.794-3.491l-78.085,9.168
-		c-4.113,0.483-7.057,4.209-6.574,8.323C51.723,185.034,54.963,187.843,58.714,187.843z"/>
-	<path d="M228.616,216.079c13.44-3.652,27.272-4.68,41.107-3.056l78.085,9.168c0.298,0.035,0.593,0.052,0.885,0.052
-		c3.751,0,6.991-2.809,7.439-6.626c0.482-4.114-2.461-7.84-6.574-8.323l-78.086-9.168c-15.748-1.847-31.489-0.678-46.788,3.479
-		c-3.998,1.086-6.357,5.207-5.271,9.204C220.499,214.806,224.623,217.166,228.616,216.079z"/>
-	<path d="M58.714,222.243c0.292,0,0.588-0.017,0.885-0.052l78.078-9.167c13.8-1.609,27.805-0.559,41.109,3.065
-		c3.995,1.087,8.119-1.268,9.207-5.266c1.089-3.997-1.269-8.119-5.266-9.207c-15.145-4.125-31.072-5.323-46.794-3.49l-78.085,9.168
-		c-4.113,0.483-7.057,4.209-6.574,8.323C51.723,219.434,54.963,222.243,58.714,222.243z"/>
-	<path d="M349.559,241.694l-78.086-9.168c-15.751-1.848-31.492-0.677-46.788,3.479c-3.998,1.086-6.357,5.207-5.271,9.204
-		c1.086,3.998,5.21,6.358,9.203,5.271c13.442-3.651,27.276-4.678,41.107-3.056l78.085,9.168c0.298,0.035,0.593,0.052,0.885,0.052
-		c3.751,0,6.991-2.809,7.439-6.626C356.615,245.904,353.672,242.177,349.559,241.694z"/>
-	<path d="M58.714,256.644c0.292,0,0.588-0.017,0.885-0.052l78.078-9.167c13.804-1.608,27.807-0.558,41.109,3.065
-		c3.995,1.088,8.119-1.268,9.207-5.266c1.089-3.997-1.269-8.119-5.266-9.207c-15.146-4.125-31.069-5.323-46.794-3.49l-78.085,9.168
-		c-4.113,0.483-7.057,4.209-6.574,8.323C51.723,253.835,54.963,256.644,58.714,256.644z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<svg id="Capa_1" fill="#fff" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m91.159 369.237v-369.237h-24.59c-36.228 0-65.702 29.474-65.702 65.702v324.398c15.051-12.985 34.624-20.864 56.015-20.864h34.277z"/><g><path d="m397.975 254.95c3.229 0 6.431.118 9.607.33v-255.28h-286.478v369.237h136.746c13.34-65.139 71.101-114.287 140.125-114.287zm-185.991-166.779h100.22v29.945h-100.22zm-33.853 65.01h167.926v29.945h-167.926z"/><path d="m274.506 470.091h-197.755v-29.945h184.546c-4.099-13.257-6.318-27.33-6.344-41.909h-198.071c-31.365 0-56.882 25.517-56.882 56.881 0 31.365 25.517 56.882 56.882 56.882h254.858c-14.991-11.365-27.678-25.611-37.234-41.909z"/></g></g><g><path d="m397.975 283.95c-62.874 0-114.026 51.151-114.026 114.025s51.152 114.025 114.026 114.025c62.873 0 114.025-51.152 114.025-114.025 0-62.874-51.152-114.025-114.025-114.025zm-.011 45.762c8.409 0 14.636 6.873 15 15 .363 8.101-7.154 15-15 15-8.409 0-14.636-6.873-15-15-.363-8.101 7.154-15 15-15zm15.034 126.723h-30v-76.799h30z"/></g></svg>
diff --git a/skolehjem/public/images/icons/feedback.svg b/skolehjem/public/images/icons/feedback.svg
new file mode 100644
index 0000000..ffe8847
--- /dev/null
+++ b/skolehjem/public/images/icons/feedback.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 fill="#fff" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M462.75,210.479c-3.979-1.656-8.583-0.74-11.625,2.313l-65.854,65.833c-4.479,4.49-10.146,7.51-16.333,8.75
+				l-53.333,10.667c-10.625,2.146-21.375-1.229-28.896-8.74c-7.583-7.594-10.854-18.406-8.75-28.906l9.408-47.063H117.333
+				c-5.896,0-10.667-4.771-10.667-10.667c0-5.896,4.771-10.667,10.667-10.667h179.061c0.371-0.411,0.587-0.928,0.98-1.323
+				l41.35-41.344H117.333c-5.896,0-10.667-4.771-10.667-10.667c0-5.896,4.771-10.667,10.667-10.667H352
+				c2.271,0,4.259,0.866,5.988,2.074l69.22-69.21c5.833-5.844,12.896-10.438,21-13.667c3.688-1.469,6.25-4.875,6.646-8.823
+				c0.417-3.958-1.417-7.802-4.729-9.99c-7.021-4.615-15.125-7.052-23.458-7.052h-384C19.146,21.333,0,40.469,0,64v416
+				c0,4.313,2.604,8.208,6.583,9.854c1.313,0.552,2.708,0.813,4.083,0.813c2.771,0,5.5-1.083,7.542-3.125L121.75,384h304.917
+				c23.521,0,42.667-19.135,42.667-42.667v-121C469.333,216.021,466.729,212.125,462.75,210.479z M245.333,277.333h-128
+				c-5.896,0-10.667-4.771-10.667-10.667c0-5.896,4.771-10.667,10.667-10.667h128c5.896,0,10.667,4.771,10.667,10.667
+				C256,272.563,251.229,277.333,245.333,277.333z"/>
+			<path d="M471.167,64c-10.771,0-21.292,4.365-28.875,11.958L312.458,205.771c-1.5,1.49-2.5,3.385-2.917,5.448l-10.667,53.354
+				c-0.708,3.5,0.396,7.115,2.917,9.635c2.021,2.021,4.75,3.125,7.542,3.125c0.688,0,1.396-0.073,2.083-0.208l53.313-10.667
+				c2.083-0.417,3.979-1.427,5.458-2.917l129.854-129.833c0,0,0,0,0-0.01c7.604-7.604,11.958-18.125,11.958-28.865
+				C512,82.313,493.688,64,471.167,64z M454.249,149.332l-27.587-27.587l15.083-15.083l27.589,27.589L454.249,149.332z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/skolehjem/public/images/icons/location.svg b/skolehjem/public/images/icons/location.svg
new file mode 100644
index 0000000..6587466
--- /dev/null
+++ b/skolehjem/public/images/icons/location.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     fill="#fff" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,0C166.035,0,91,72.47,91,165c0,35.202,10.578,66.592,30.879,96.006l121.494,189.58
+			c5.894,9.216,19.372,9.198,25.254,0l122.021-190.225C410.512,232.28,421,199.307,421,165C421,74.019,346.981,0,256,0z M256,240
+			c-41.353,0-75-33.647-75-75c0-41.353,33.647-75,75-75c41.353,0,75,33.647,75,75C331,206.353,297.353,240,256,240z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M373.264,344.695l-75.531,118.087c-19.551,30.482-64.024,30.382-83.481,0.029l-75.654-118.085
+			C72.034,360.116,31,388.309,31,422c0,58.462,115.928,90,225,90s225-31.538,225-90C481,388.285,439.909,360.077,373.264,344.695z"
+			/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/skolehjem/public/images/icons/news.svg b/skolehjem/public/images/icons/news.svg
new file mode 100644
index 0000000..fb9ee37
--- /dev/null
+++ b/skolehjem/public/images/icons/news.svg
@@ -0,0 +1,3 @@
+<svg id="Layer_3" fill="#fff" enable-background="new 0 0 64 64"
+     height="512"
+     viewBox="0 0 62 62" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m15 27h14v16h-14z"/><path d="m51 47.279v-18.558l-4 2.8v12.958z"/><path d="m45 46v7c0 2.206-1.794 4-4 4s-4-1.794-4-4v-7.35c-2.327-.826-4-3.043-4-5.65v-4c0-3.309 2.691-6 6-6h6.685l7.315-5.121v-21.879h-42v55c0 1.13-.391 2.162-1.026 3h38.026c2.757 0 5-2.243 5-5v-4.879l-7.315-5.121zm-32-40c0-.552.448-1 1-1h36c.552 0 1 .448 1 1v16c0 .552-.448 1-1 1h-36c-.552 0-1-.448-1-1zm0 20c0-.552.448-1 1-1h16c.552 0 1 .448 1 1v18c0 .552-.448 1-1 1h-16c-.552 0-1-.448-1-1zm22 31h-22v-2h22zm0-4h-22v-2h22zm0-4h-22v-2h22z"/><path d="m49 7h-34v14h34zm-25 11c0 .446-.295.838-.724.961-.091.026-.184.039-.276.039-.338 0-.662-.172-.848-.47l-3.152-5.043v5.513h-2v-9c0-.446.295-.838.724-.961.429-.122.887.053 1.124.432l3.152 5.042v-5.513h2zm7-7h-3v2h3v2h-3v2h3v2h-4c-.552 0-1-.448-1-1v-8c0-.552.448-1 1-1h4zm8 7c0 .479-.34.891-.811.982-.064.012-.127.018-.189.018-.402 0-.774-.244-.928-.628l-1.072-2.68-1.071 2.679c-.178.445-.647.699-1.118.61-.471-.09-.811-.502-.811-.981v-9h2v3.808l.071-.179c.153-.38.52-.629.929-.629s.776.249.929.628l.071.18v-3.808h2zm8-7h-3c-.551 0-1 .449-1 1s.449 1 1 1c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v-2h3c.551 0 1-.449 1-1s-.449-1-1-1c-1.654 0-3-1.346-3-3s1.346-3 3-3h3z"/><path d="m3 58c0 1.654 1.346 3 3 3s3-1.346 3-3v-49h-6z"/><path d="m53 48.68 2 1.4v-24.16l-2 1.4z"/><path d="m39 53c0 1.103.897 2 2 2s2-.897 2-2v-7h-4z"/><path d="m45 32h-6c-2.206 0-4 1.794-4 4v4c0 2.206 1.794 4 4 4h6z"/><path d="m59 35h4v2h-4z"/><path d="m58.379 29.5h4.243v2h-4.243z" transform="matrix(.707 -.707 .707 .707 -3.847 51.713)"/><path d="m59.5 39.379h2v4.243h-2z" transform="matrix(.707 -.707 .707 .707 -11.625 54.935)"/></g></svg>
diff --git a/skolehjem/public/images/icons/phone.svg b/skolehjem/public/images/icons/phone.svg
new file mode 100644
index 0000000..45bb6c9
--- /dev/null
+++ b/skolehjem/public/images/icons/phone.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     fill="#fff" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M498.808,377.784l-63.633-63.647c-16.978-16.978-46.641-17.007-63.647,0l-10.611,10.611l127.284,127.277l10.607-10.607
+			C516.427,423.798,516.368,395.314,498.808,377.784z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M339.116,345.37c-13.39,10.373-32.492,9.959-44.727-2.303L168.572,217.163c-12.263-12.263-12.676-31.379-2.303-44.736
+			L39.278,45.443c-54.631,63.68-52.495,159.633,7.8,219.928l199.103,199.19c57.86,57.858,152.635,65.532,219.932,7.797
+			L339.116,345.37z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M197.503,76.391L133.87,12.744c-16.978-16.978-46.641-17.007-63.647,0L59.612,23.355l127.284,127.277l10.607-10.608
+			C215.121,122.406,215.063,93.922,197.503,76.391z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/skolehjem/public/images/icons/role.svg b/skolehjem/public/images/icons/role.svg
new file mode 100644
index 0000000..549dae0
--- /dev/null
+++ b/skolehjem/public/images/icons/role.svg
@@ -0,0 +1 @@
+<svg height="512pt" fill="#fff" viewBox="-77 0 512 512.001" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m157.171875 105.933594h42.753906c19.820313-8.351563 33.738281-27.957032 33.738281-50.816406 0-30.441407-24.675781-55.117188-55.117187-55.117188-30.4375 0-55.117187 24.675781-55.117187 55.117188 0 22.859374 13.917968 42.464843 33.742187 50.816406zm0 0"/><path d="m115.964844 488.226562c0 13.109376 10.667968 23.773438 23.777344 23.773438 13.109374 0 23.773437-10.664062 23.773437-23.773438v-160.734374h30.0625v160.734374c0 13.109376 10.667969 23.773438 23.777344 23.773438s23.773437-10.664062 23.773437-23.773438v-212.660156l-125.164062-.058594zm0 0"/><path d="m271.285156 258.097656 47.394532-60.574218c3.238281-4.054688 2.628906-10.0625-1.355469-13.386719l-44.601563-37.203125c-8.847656-7.382813-20.0625-11.445313-31.582031-11.445313h-125.183594c-11.523437 0-22.738281 4.0625-31.585937 11.445313l-44.601563 37.203125c-3.984375 3.324219-4.59375 9.332031-1.355469 13.386719l47.488282 59.855468v-79.753906h30.0625v67.820312l125.257812.058594v-67.984375h30.0625zm0 0"/><path d="m319.277344 251.144531-48.085938 61.441407v64.515624h86.527344zm0 0"/><path d="m0 377.101562h85.902344v-65.832031l-50.574219-63.722656zm0 0"/></svg>
diff --git a/skolehjem/public/images/icons/wash.svg b/skolehjem/public/images/icons/wash.svg
new file mode 100644
index 0000000..b0e800d
--- /dev/null
+++ b/skolehjem/public/images/icons/wash.svg
@@ -0,0 +1 @@
+<svg height="512" fill="#fff" viewBox="0 0 192 192" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16 184a8 8 0 0 0 8 8h144a8 8 0 0 0 8-8v-16h-160z"/><path d="m168 0h-144a8 8 0 0 0 -8 8v152h160v-152a8 8 0 0 0 -8-8zm-88 16a8 8 0 1 1 -8 8 8 8 0 0 1 8-8zm-40 8a8 8 0 1 1 8 8 8 8 0 0 1 -8-8zm56 120a48 48 0 1 1 48-48 48.054 48.054 0 0 1 -48 48zm56-112h-32v-16h32z"/><path d="m121.6 76.821a32 32 0 1 0 0 38.358 23.96 23.96 0 0 1 0-38.358z"/></svg>
diff --git a/skolehjem/public/images/icons/wash_res.svg b/skolehjem/public/images/icons/wash_res.svg
new file mode 100644
index 0000000..e07384e
--- /dev/null
+++ b/skolehjem/public/images/icons/wash_res.svg
@@ -0,0 +1,12 @@
+<svg id="Layer_1" fill="#fff" enable-background="new 0 0 792 792"
+     height="512"
+     viewBox="0 0 512 512"
+     width="512"
+     xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path d="m165 240v-30h75v-180h-240v180h75v30h-75v75h510v-75zm-30 0h-30v-30h30z"/>
+        <path d="m30 345v165h450v-165c-13.963 0-430.815 0-450 0zm390 135h-330v-30h330zm0-60h-330v-30h330z"/>
+        <circle cx="375" cy="60" r="60"/>
+        <path d="m375 120c-52.805 0-96.623 39.184-103.924 90h207.848c-7.301-50.816-51.119-90-103.924-90z"/>
+    </g>
+</svg>
diff --git a/skolehjem/resources/sass/admin/nav/nav.scss b/skolehjem/resources/sass/admin/nav/nav.scss
index b540528..f0ea747 100644
--- a/skolehjem/resources/sass/admin/nav/nav.scss
+++ b/skolehjem/resources/sass/admin/nav/nav.scss
@@ -1,7 +1,8 @@
 .nav {
     width: 15%;
     height: 100%;
-    min-width: 194px;
+    min-width: calc(1.5em + 4rem);
+    transition: width .5s;
 }
 
 .segment > h3 {
@@ -14,14 +15,18 @@
 
 .segment > h3 > a {
     padding: 1rem 2rem;
-    display: block;
+    display: flex;
+}
+
+.segment > h3 > a > img {
+    width: 1.5em;
 }
 
 .segment > div {
-    padding: 0 1.25rem 0 1.25rem;
+    /*padding: 0 1.25rem 0 1.25rem;
     width: calc(100% - 2.5rem);
     align-items: center;
-    margin-bottom: .5rem;
+    margin-bottom: .5rem;*/
 }
 
 .segment > h3:hover {
diff --git a/skolehjem/resources/views/admin/layout/base.blade.php b/skolehjem/resources/views/admin/layout/base.blade.php
index 4cf45e2..901b49e 100644
--- a/skolehjem/resources/views/admin/layout/base.blade.php
+++ b/skolehjem/resources/views/admin/layout/base.blade.php
@@ -11,41 +11,47 @@
 @yield("header")
 <main class="row">
     <div class="col nav" style="background-color: #333333;">
-        <div class="segment">
-            <h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Brugere</span></a></h3>
+        <div class="segment" style="height: 60px;">
+            <div class="text-white row align-items-center" style="margin-left: -1rem; margin-top: 0; margin-bottom: 0; font-size: 1.15rem; height: calc(100% - 2rem); padding: 1rem 2rem; width: calc(100% - 3rem); background-color: #333333 !important;">
+                <a href="javascript:void(0)" id="open" style="padding: 0; margin-left: auto; display: none;" onclick="openNav()" class="open-btn text-white"><i class="fa fa-bars"></i></a>
+                <a href="javascript:void(0)" id="close" style="padding: 0; margin-left: auto;" onclick="closeNav()" class="close-btn text-white"><i class="fa fa-times"></i></a>
+            </div>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("roles.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Roller</span></a></h3>
+            <h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span style="margin-left: 4px;">Brugere</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("news.index")}}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Nyheder</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("roles.index") }}" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span style="margin-left: 4px;">Roller</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("menu-plans.index")}}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Menuplan</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("news.index")}}" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span style="margin-left: 4px;">Nyheder</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("events.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("menu-plans.index")}}" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span style="margin-left: 4px;">Menuplan</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("locations.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Lokationer</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("events.index") }}" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("washing-machines.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("locations.index") }}" class="text-white"><img src="{{asset("/images/icons/location.svg")}}" class="fa"><span style="margin-left: 4px;">Lokationer</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("washing-reservations.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Reservationer</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("washing-machines.index") }}" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route("contacts.index") }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Kontakter</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("washing-reservations.index") }}" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span style="margin-left: 4px;">Reservationer</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Vejledning</span></a></h3>
+            <h3 class="text-white"><a href="{{ route("contacts.index") }}" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span style="margin-left: 4px;">Kontakter</span></a></h3>
         </div>
         <div class="segment">
-            <h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><i class="fa fa-link"></i><span style="margin-left: 4px;">Feedback</span></a></h3>
+            <h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span style="margin-left: 4px;">Vejledning</span></a></h3>
+        </div>
+        <div class="segment">
+            <h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><img src="{{asset("/images/icons/feedback.svg")}}" class="fa"><span style="margin-left: 4px;">Feedback</span></a></h3>
         </div>
     </div>
-    <div class="w-85" style="background-color: #cccccc;">
+    <div class="w-85" style="transition: width .5s; background-color: #cccccc;">
         <div class="directorypath text-white">
             <a href="{{ route('root.index') }}" class="text-white">Home</a> / @yield("path")
         </div>
@@ -57,6 +63,49 @@
 
 <script src="{{ mix("/js/app.js") }}"></script>
 <script src="{{ asset("/js/jquery.are-you-sure.js") }}"></script>
+<script type="text/javascript">
+    function openNav() {
+        var open = document.getElementById("open");
+        var close = document.getElementById("close");
+
+        close.style.display = "block";
+        open.style.display = "none";
+
+        var nav = document.getElementsByClassName("nav")[0];
+        nav.style.width = "";
+
+        var w85 = document.getElementsByClassName("w-85")[0];
+        $(".w-85").css({ "width": "85%"});
+
+        $(".segment > h3").css({"margin-left": "", "width": ""});
+        $(".segment > h3 > a").css({ "display": ""});
+        $(".segment > h3 > a > span").css({"display": ""});
+
+        $(".segment > div").css({"margin-left": "-1rem", "padding": "1rem 0rem 1rem 2rem", "width": "calc(100% - 3rem)"});
+        $(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});
+    }
+
+    function closeNav() {
+        var open = document.getElementById("open");
+        var close = document.getElementById("close");
+
+        close.style.display = "none";
+        open.style.display = "block";
+
+        var nav = document.getElementsByClassName("nav")[0];
+        nav.style.width = "64px";
+
+        var w85 = document.getElementsByClassName("w-85")[0];
+        $(".w-85").css({ "width": "calc(100% - 64px)"});
+
+        $(".segment > h3").css({"margin-left": "0", "width": "100%"});
+        $(".segment > h3 > a").css({"display": "flex"});
+        $(".segment > h3 > a > span").css({"display": "none"});
+
+        $(".segment > div").css({"margin-left": "0", "padding": "1rem 0", "width": "100%"});
+        $(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});
+    }
+</script>
 @yield("scripts")
 </body>
 </html>