navbar expanded, nadbar dark init

img/logo-small.svg

+<svg width="68" height="68" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+	 <path d="M64.61 16.202A17.595 17.595 0 0 0 51.8 3.391a114.585 114.585 0 0 0-35.596 0A17.595 17.595 0 0 0 3.39 16.202a114.577 114.577 0 0 0 0 35.596 17.595 17.595 0 0 0 12.812 12.811 114.585 114.585 0 0 0 35.596 0A17.595 17.595 0 0 0 64.61 51.798a114.705 114.705 0 0 0 0-35.596z" fill="#2D89EF" fill-rule="nonzero"/>
+	 <path d="M33.327 36.329a35.68 35.68 0 0 1-11.09 10.973 4.816 4.816 0 0 1-4.78.123A4.643 4.643 0 0 1 15 43.397a4.638 4.638 0 0 1 2.367-4.08 24.319 24.319 0 0 0 6.088-5.337 27.697 27.697 0 0 0-6.088-5.294c-2.258-1.32-2.998-4.188-1.653-6.405 1.345-2.216 4.266-2.943 6.523-1.622a35.666 35.666 0 0 1 11.09 10.888 4.581 4.581 0 0 1 0 4.782zM49.2 46H37.8c-2.111 0-3.8-1.02-3.8-3s1.71-3 3.8-3h11.4c2.111 0 3.8 1.02 3.8 3s-1.71 3-3.8 3z" fill="#FFF"/>
+  </g>
+</svg>

img/logo.svg

+<svg width="232" height="68" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+	 <path d="M64.61 16.202A17.595 17.595 0 0 0 51.8 3.391a114.585 114.585 0 0 0-35.596 0A17.595 17.595 0 0 0 3.39 16.202a114.577 114.577 0 0 0 0 35.596 17.595 17.595 0 0 0 12.812 12.811 114.585 114.585 0 0 0 35.596 0A17.595 17.595 0 0 0 64.61 51.798a114.705 114.705 0 0 0 0-35.596z" fill="#2D89EF" fill-rule="nonzero"/>
+	 <path d="M33.327 36.329a35.68 35.68 0 0 1-11.09 10.973 4.816 4.816 0 0 1-4.78.123A4.643 4.643 0 0 1 15 43.397a4.638 4.638 0 0 1 2.367-4.08 24.319 24.319 0 0 0 6.088-5.337 27.697 27.697 0 0 0-6.088-5.294c-2.258-1.32-2.998-4.188-1.653-6.405 1.345-2.216 4.266-2.943 6.523-1.622a35.666 35.666 0 0 1 11.09 10.888 4.581 4.581 0 0 1 0 4.782zM49.2 46H37.8c-2.111 0-3.8-1.02-3.8-3s1.71-3 3.8-3h11.4c2.111 0 3.8 1.02 3.8 3s-1.71 3-3.8 3z" fill="#FFF"/>
+	 <path d="M105.784 46.096c.448 0 .856.216 1.224.648.368.432.552 1 .552 1.704 0 .864-.472 1.592-1.416 2.184-.944.592-2.008.888-3.192.888-1.984 0-3.656-.424-5.016-1.272-1.36-.848-2.04-2.648-2.04-5.4V31.6h-2.208c-.768 0-1.408-.256-1.92-.768S91 29.68 91 28.912c0-.736.256-1.352.768-1.848s1.152-.744 1.92-.744h2.208v-3.072c0-.832.28-1.528.84-2.088.56-.56 1.256-.84 2.088-.84.8 0 1.472.28 2.016.84.544.56.816 1.256.816 2.088v3.072h3.408c.768 0 1.408.256 1.92.768s.768 1.152.768 1.92c0 .736-.256 1.352-.768 1.848s-1.152.744-1.92.744h-3.408v13.008c0 .672.176 1.16.528 1.464.352.304.832.456 1.44.456.256 0 .608-.064 1.056-.192.384-.16.752-.24 1.104-.24zm28.032-20.736c.832 0 1.52.272 2.064.816.544.544.816 1.248.816 2.112v20.304c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.512-.272-2.04-.816-.528-.544-.808-1.232-.84-2.064-.8.928-1.88 1.72-3.24 2.376A9.767 9.767 0 0 1 123.4 52c-2.208 0-4.208-.568-6-1.704-1.792-1.136-3.208-2.712-4.248-4.728-1.04-2.016-1.56-4.304-1.56-6.864 0-2.56.512-4.856 1.536-6.888s2.424-3.616 4.2-4.752c1.776-1.136 3.736-1.704 5.88-1.704 1.536 0 2.976.28 4.32.84 1.344.56 2.48 1.272 3.408 2.136v-.048c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84zm-9.696 21.36c2.08 0 3.776-.76 5.088-2.28 1.312-1.52 1.968-3.432 1.968-5.736s-.656-4.224-1.968-5.76c-1.312-1.536-3.008-2.304-5.088-2.304-2.048 0-3.728.768-5.04 2.304-1.312 1.536-1.968 3.456-1.968 5.76s.648 4.216 1.944 5.736c1.296 1.52 2.984 2.28 5.064 2.28zm32.112-21.36c2.208 0 4.208.568 6 1.704 1.792 1.136 3.208 2.712 4.248 4.728 1.04 2.016 1.56 4.304 1.56 6.864 0 2.56-.512 4.856-1.536 6.888s-2.424 3.616-4.2 4.752c-1.776 1.136-3.736 1.704-5.88 1.704-1.536 0-2.984-.312-4.344-.936-1.36-.624-2.488-1.384-3.384-2.28v.288c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.52-.272-2.064-.816-.544-.544-.816-1.248-.816-2.112V18.928c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84.832 0 1.52.28 2.064.84.544.56.816 1.256.816 2.088V28.96c.768-.96 1.84-1.8 3.216-2.52a9.196 9.196 0 0 1 4.32-1.08zm-.72 21.36c2.048 0 3.728-.768 5.04-2.304 1.312-1.536 1.968-3.456 1.968-5.76s-.648-4.216-1.944-5.736c-1.296-1.52-2.984-2.28-5.064-2.28s-3.776.76-5.088 2.28c-1.312 1.52-1.968 3.432-1.968 5.736s.656 4.224 1.968 5.76c1.312 1.536 3.008 2.304 5.088 2.304zm23.568 1.872c0 .832-.28 1.528-.84 2.088-.56.56-1.256.84-2.088.84-.8 0-1.472-.28-2.016-.84-.544-.56-.816-1.256-.816-2.088V18.928c0-.832.28-1.528.84-2.088.56-.56 1.256-.84 2.088-.84.8 0 1.472.28 2.016.84.544.56.816 1.256.816 2.088v29.664zm29.28-10.512c-.032.768-.336 1.392-.912 1.872-.576.48-1.248.72-2.016.72h-15.84c.384 1.888 1.264 3.368 2.64 4.44 1.376 1.072 2.928 1.608 4.656 1.608 1.312 0 2.336-.12 3.072-.36.736-.24 1.32-.496 1.752-.768.432-.272.728-.456.888-.552.576-.288 1.12-.432 1.632-.432.672 0 1.248.24 1.728.72s.72 1.04.72 1.68c0 .864-.448 1.648-1.344 2.352-.896.736-2.096 1.36-3.6 1.872a14.065 14.065 0 0 1-4.56.768c-2.688 0-5.032-.56-7.032-1.68-2-1.12-3.544-2.664-4.632-4.632-1.088-1.968-1.632-4.184-1.632-6.648 0-2.752.576-5.168 1.728-7.248 1.152-2.08 2.672-3.672 4.56-4.776 1.888-1.104 3.904-1.656 6.048-1.656 2.112 0 4.104.576 5.976 1.728 1.872 1.152 3.368 2.704 4.488 4.656a12.516 12.516 0 0 1 1.68 6.336zm-12.144-7.44c-3.712 0-5.904 1.744-6.576 5.232h12.576v-.336c-.128-1.344-.784-2.496-1.968-3.456s-2.528-1.44-4.032-1.44zm30.288-5.28c.96 0 1.768.272 2.424.816.656.544.984 1.184.984 1.92 0 .992-.256 1.736-.768 2.232a2.532 2.532 0 0 1-1.824.744c-.48 0-1.024-.112-1.632-.336a20.636 20.636 0 0 0-.648-.192 3.915 3.915 0 0 0-1.08-.144c-.832 0-1.632.256-2.4.768s-1.4 1.288-1.896 2.328c-.496 1.04-.744 2.28-.744 3.72v11.376c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.52-.28-2.064-.84-.544-.56-.816-1.256-.816-2.088V28.768c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84.832 0 1.52.28 2.064.84.544.56.816 1.256.816 2.088v.624c.736-1.312 1.792-2.312 3.168-3a9.74 9.74 0 0 1 4.416-1.032z" fill="#4A4A4A"/>
+  </g>
+</svg>

img/tabler.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="232px" height="68px" viewBox="0 0 232 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-    <title>tabler</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="tabler">
-            <g id="logo" transform="translate(2.000000, 2.000000)">
-                <g id="Group">
-                    <path d="M62.6108492,14.2023992 C61.0362944,7.89220525 56.1091732,2.96520511 49.7988242,1.390689 C38.0059121,-0.463563001 25.9956602,-0.463563001 14.2027481,1.390689 C7.89239915,2.96520511 2.96527796,7.89220525 1.39072317,14.2023992 C-0.46357439,25.9950216 -0.46357439,38.0049784 1.39072317,49.7976008 C2.96527796,56.1077947 7.89239915,61.0347949 14.2027481,62.609311 C25.9956602,64.463563 38.0059121,64.463563 49.7988242,62.609311 C56.1091732,61.0347949 61.0362944,56.1077947 62.6108492,49.7976008 C64.4630503,38.0048147 64.4630503,25.9951853 62.6108492,14.2023992 Z" id="Shape" fill="#2D89EF" fill-rule="nonzero"></path>
-                    <path d="M31.3265845,34.3287172 C28.4998501,38.744786 24.7129051,42.4920516 20.237293,45.3018154 C18.7832531,46.1866386 16.9564339,46.2336005 15.4572262,45.4246963 C13.9580185,44.615792 13.0190389,43.0765309 13.0002861,41.3970559 C12.9815333,39.7175808 13.885917,38.1584785 15.3667023,37.3174988 C17.6862186,35.8857731 19.7442728,34.0816286 21.4549407,31.9803888 C19.7002939,29.9326263 17.6490197,28.148811 15.3667023,26.6859756 C13.1090632,25.3654488 12.3692039,22.4980421 13.7141804,20.2814436 C15.0591569,18.064845 17.9796539,17.3384353 20.237293,18.6589621 C24.7040198,21.4436366 28.4903515,25.1611384 31.3265845,29.5466666 C32.2244718,31.0187969 32.2244718,32.8565869 31.3265845,34.3287172 Z" id="Path" fill="#FFFFFF"></path>
-                    <path d="M47.2,44 L35.8,44 C33.6888889,44 32,42.98 32,41 C32,39.02 33.71,38 35.8,38 L47.2,38 C49.3111111,38 51,39.02 51,41 C51,42.98 49.29,44 47.2,44 Z" id="Path" fill="#FFFFFF"></path>
-                </g>
-                <path d="M103.784,44.096 C104.232002,44.096 104.639998,44.3119978 105.008,44.744 C105.376002,45.1760022 105.56,45.7439965 105.56,46.448 C105.56,47.3120043 105.088005,48.039997 104.144,48.632 C103.199995,49.224003 102.136006,49.52 100.952,49.52 C98.9679901,49.52 97.2960068,49.0960042 95.936,48.248 C94.5759932,47.3999958 93.896,45.6000138 93.896,42.848 L93.896,29.6 L91.688,29.6 C90.9199962,29.6 90.2800026,29.3440026 89.768,28.832 C89.2559974,28.3199974 89,27.6800038 89,26.912 C89,26.1759963 89.2559974,25.5600025 89.768,25.064 C90.2800026,24.5679975 90.9199962,24.32 91.688,24.32 L93.896,24.32 L93.896,21.248 C93.896,20.4159958 94.1759972,19.7200028 94.736,19.16 C95.2960028,18.5999972 95.9919958,18.32 96.824,18.32 C97.624004,18.32 98.2959973,18.5999972 98.84,19.16 C99.3840027,19.7200028 99.656,20.4159958 99.656,21.248 L99.656,24.32 L103.064,24.32 C103.832004,24.32 104.471997,24.5759974 104.984,25.088 C105.496003,25.6000026 105.752,26.2399962 105.752,27.008 C105.752,27.7440037 105.496003,28.3599975 104.984,28.856 C104.471997,29.3520025 103.832004,29.6 103.064,29.6 L99.656,29.6 L99.656,42.608 C99.656,43.2800034 99.8319982,43.7679985 100.184,44.072 C100.536002,44.3760015 101.015997,44.528 101.624,44.528 C101.880001,44.528 102.231998,44.4640006 102.68,44.336 C103.064002,44.1759992 103.431998,44.096 103.784,44.096 Z M131.816,23.36 C132.648004,23.36 133.335997,23.6319973 133.88,24.176 C134.424003,24.7200027 134.696,25.4239957 134.696,26.288 L134.696,46.592 C134.696,47.4240042 134.424003,48.1199972 133.88,48.68 C133.335997,49.2400028 132.648004,49.52 131.816,49.52 C130.983996,49.52 130.304003,49.2480027 129.776,48.704 C129.247997,48.1599973 128.968,47.4720042 128.936,46.64 C128.135996,47.5680046 127.056007,48.3599967 125.696,49.016 C124.335993,49.6720033 122.904008,50 121.4,50 C119.191989,50 117.192009,49.4320057 115.4,48.296 C113.607991,47.1599943 112.192005,45.5840101 111.152,43.568 C110.111995,41.5519899 109.592,39.2640128 109.592,36.704 C109.592,34.1439872 110.103995,31.8480102 111.128,29.816 C112.152005,27.7839898 113.551991,26.2000057 115.328,25.064 C117.104009,23.9279943 119.063989,23.36 121.208,23.36 C122.744008,23.36 124.183993,23.6399972 125.528,24.2 C126.872007,24.7600028 128.007995,25.4719957 128.936,26.336 L128.936,26.288 C128.936,25.4559958 129.207997,24.7600028 129.752,24.2 C130.296003,23.6399972 130.983996,23.36 131.816,23.36 Z M122.12,44.72 C124.20001,44.72 125.895993,43.9600076 127.208,42.44 C128.520007,40.9199924 129.176,39.0080115 129.176,36.704 C129.176,34.3999885 128.520007,32.4800077 127.208,30.944 C125.895993,29.4079923 124.20001,28.64 122.12,28.64 C120.07199,28.64 118.392007,29.4079923 117.08,30.944 C115.767993,32.4800077 115.112,34.3999885 115.112,36.704 C115.112,39.0080115 115.759994,40.9199924 117.056,42.44 C118.352006,43.9600076 120.03999,44.72 122.12,44.72 Z M154.232,23.36 C156.440011,23.36 158.439991,23.9279943 160.232,25.064 C162.024009,26.2000057 163.439995,27.7759899 164.48,29.792 C165.520005,31.8080101 166.04,34.0959872 166.04,36.656 C166.04,39.2160128 165.528005,41.5119898 164.504,43.544 C163.479995,45.5760102 162.080009,47.1599943 160.304,48.296 C158.527991,49.4320057 156.568011,50 154.424,50 C152.887992,50 151.440007,49.6880031 150.08,49.064 C148.719993,48.4399969 147.592004,47.6800045 146.696,46.784 L146.696,47.072 C146.696,47.9040042 146.424003,48.5999972 145.88,49.16 C145.335997,49.7200028 144.648004,50 143.816,50 C142.983996,50 142.296003,49.7280027 141.752,49.184 C141.207997,48.6399973 140.936,47.9360043 140.936,47.072 L140.936,16.928 C140.936,16.0959958 141.207997,15.4000028 141.752,14.84 C142.296003,14.2799972 142.983996,14 143.816,14 C144.648004,14 145.335997,14.2799972 145.88,14.84 C146.424003,15.4000028 146.696,16.0959958 146.696,16.928 L146.696,26.96 C147.464004,25.9999952 148.535993,25.1600036 149.912,24.44 C151.288007,23.7199964 152.727992,23.36 154.232,23.36 Z M153.512,44.72 C155.56001,44.72 157.239993,43.9520077 158.552,42.416 C159.864007,40.8799923 160.52,38.9600115 160.52,36.656 C160.52,34.3519885 159.872006,32.4400076 158.576,30.92 C157.279994,29.3999924 155.59201,28.64 153.512,28.64 C151.43199,28.64 149.736007,29.3999924 148.424,30.92 C147.111993,32.4400076 146.456,34.3519885 146.456,36.656 C146.456,38.9600115 147.111993,40.8799923 148.424,42.416 C149.736007,43.9520077 151.43199,44.72 153.512,44.72 Z M177.08,46.592 C177.08,47.4240042 176.800003,48.1199972 176.24,48.68 C175.679997,49.2400028 174.984004,49.52 174.152,49.52 C173.351996,49.52 172.680003,49.2400028 172.136,48.68 C171.591997,48.1199972 171.32,47.4240042 171.32,46.592 L171.32,16.928 C171.32,16.0959958 171.599997,15.4000028 172.16,14.84 C172.720003,14.2799972 173.415996,14 174.248,14 C175.048004,14 175.719997,14.2799972 176.264,14.84 C176.808003,15.4000028 177.08,16.0959958 177.08,16.928 L177.08,46.592 Z M206.36,36.08 C206.328,36.8480038 206.024003,37.4719976 205.448,37.952 C204.871997,38.4320024 204.200004,38.672 203.432,38.672 L187.592,38.672 C187.976002,40.5600094 188.855993,42.0399946 190.232,43.112 C191.608007,44.1840054 193.159991,44.72 194.888,44.72 C196.200007,44.72 197.223996,44.6000012 197.96,44.36 C198.696004,44.1199988 199.279998,43.8640014 199.712,43.592 C200.144002,43.3199986 200.439999,43.1360005 200.6,43.04 C201.176003,42.7519986 201.719997,42.608 202.232,42.608 C202.904003,42.608 203.479998,42.8479976 203.96,43.328 C204.440002,43.8080024 204.68,44.3679968 204.68,45.008 C204.68,45.8720043 204.232004,46.6559965 203.336,47.36 C202.439996,48.0960037 201.240008,48.7199974 199.736,49.232 C198.231992,49.7440026 196.712008,50 195.176,50 C192.487987,50 190.14401,49.4400056 188.144,48.32 C186.14399,47.1999944 184.600005,45.6560098 183.512,43.688 C182.423995,41.7199902 181.88,39.5040123 181.88,37.04 C181.88,34.2879862 182.455994,31.8720104 183.608,29.792 C184.760006,27.7119896 186.279991,26.1200055 188.168,25.016 C190.056009,23.9119945 192.071989,23.36 194.216,23.36 C196.328011,23.36 198.319991,23.9359942 200.192,25.088 C202.064009,26.2400058 203.559994,27.7919902 204.68,29.744 C205.800006,31.6960098 206.36,33.8079886 206.36,36.08 Z M194.216,28.64 C190.503981,28.64 188.312003,30.3839826 187.64,33.872 L200.216,33.872 L200.216,33.536 C200.087999,32.1919933 199.432006,31.0400048 198.248,30.08 C197.063994,29.1199952 195.720008,28.64 194.216,28.64 Z M224.504,23.36 C225.464005,23.36 226.271997,23.6319973 226.928,24.176 C227.584003,24.7200027 227.912,25.3599963 227.912,26.096 C227.912,27.088005 227.656003,27.8319975 227.144,28.328 C226.631997,28.8240025 226.024004,29.072 225.32,29.072 C224.839998,29.072 224.296003,28.9600011 223.688,28.736 C223.592,28.7039998 223.376002,28.6400005 223.04,28.544 C222.703998,28.4479995 222.344002,28.4 221.96,28.4 C221.127996,28.4 220.328004,28.6559974 219.56,29.168 C218.791996,29.6800026 218.160002,30.4559948 217.664,31.496 C217.167998,32.5360052 216.92,33.7759928 216.92,35.216 L216.92,46.592 C216.92,47.4240042 216.648003,48.1199972 216.104,48.68 C215.559997,49.2400028 214.872004,49.52 214.04,49.52 C213.207996,49.52 212.520003,49.2400028 211.976,48.68 C211.431997,48.1199972 211.16,47.4240042 211.16,46.592 L211.16,26.768 C211.16,25.9359958 211.431997,25.2400028 211.976,24.68 C212.520003,24.1199972 213.207996,23.84 214.04,23.84 C214.872004,23.84 215.559997,24.1199972 216.104,24.68 C216.648003,25.2400028 216.92,25.9359958 216.92,26.768 L216.92,27.392 C217.656004,26.0799934 218.711993,25.0800034 220.088,24.392 C221.464007,23.7039966 222.935992,23.36 224.504,23.36 Z" id="tabler" fill="#4A4A4A"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file

pages/_includes/layout/sidenav-content.html

+<a href="{{ site.base }}" class="navbar-brand text-inherit">
+   <img src="{{ site.base }}/img/logo-small.svg" alt="" class="navbar-brand-logo mr-3">
+</a>
+<ul class="navbar-nav mb-md-4">
+   <li class="nav-item">
+      <a class="nav-link" href="#">
+         {% include ui/icon.html icon="clipboard" %}
+         <span class="nav-link-text">Getting started</span>
+      </a>
+   </li>
+   <li class="nav-item dropdown">
+      <a class="nav-link" href="#" data-toggle="collapse" role="button" aria-expanded="false">
+         {% include ui/icon.html icon="book-open" %}
+         <span class="nav-link-text">Components</span>
+      </a>
+      <div class="collapse">
+         <ul class="nav nav-sm flex-column">
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Alerts
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Avatars
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Badges
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Breadcrumb
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Buttons
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Button group
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Cards
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Charts
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Dropdowns
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Forms
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Icons
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Lists
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Modal
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Navs
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Navbar
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Page headers
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Pagination
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Popovers
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Progress
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Social post
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Spinners
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Tables
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Toasts
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Tooltips
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Typography
+               </a>
+            </li>
+            <li class="nav-item">
+               <a href="#" class="nav-link">
+                  Utilities
+               </a>
+            </li>
+         </ul>
+      </div>
+   </li>
+   <li class="nav-item">
+      <a class="nav-link" href="#">
+         {% include ui/icon.html icon="git-branch" %}
+         <span class="nav-link-text">Changelog</span>
+         <span class="badge bg-primary text-white ml-auto">v1.0.0</span>
+      </a>
+   </li>
+</ul>

pages/_includes/layout/sidenav.html

-<div class="sidenav sidenav-narrow">
-1
+<div class="sidenav sidenav-narrow sidenav-dark sidenav-expand-md">
+   <div class="container">
+      {% include layout/sidenav-content.html %}
+   </div>
 </div>
-{% comment %}
-<div class="sidenav">
-2
+<div class="sidenav sidenav-expand-xl">
+   <div class="container">
+      {% include layout/sidenav-content.html %}
+   </div>
 </div>
-{% endcomment %}

pages/_includes/parts/navbar.html

@@ -12,7 +12,7 @@
       <a href="{{ site.base }}" class="navbar-brand text-inherit">
          {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
          {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-         {% if include.logo %}<img src="{{ site.base }}/img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+         {% if include.logo %}<img src="{{ site.base }}/img/logo.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
          {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
       </a>
 

pages/_layouts/default.html

@@ -7,10 +7,8 @@ layout: base
 
 	<div class="flex-fill d-flex flex-column mw-100">
 		{% include layout/header.html %}
-		{% comment %}{% include layout/topnav.html %}{% endcomment %}
 
 		<div class="d-flex flex-fill">
-			{% comment %}{% include layout/sidebar.html %}{% endcomment %}
 
 			<div class="flex-fill px-lg-2 mw-100">
 				<div class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">

scss/_variables.scss

@@ -47,7 +47,7 @@ $white: #fff !default;
 $body-bg: #f5f7fb !default;
 
 $text-color: #495057 !default;
-$text-muted: #9aa0ac !default;
+$text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
 $border-color: rgba(0, 40, 100, .12) !default;
@@ -171,6 +171,14 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
+//sidenav
+$sidenav-bg: $white !default;
+$sidenav-border-color: $border-color !default;
+
+$sidenav-dark-bg: $dark !default;
+
+$sidenav-link-padding-x: .5rem !default;
+
 //spinner
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;

scss/layout/_navbar.scss

@@ -3,26 +3,10 @@
   min-height: 3.75rem;
   padding: .75rem 1rem;
 
-  .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-    vertical-align: sub;
-  }
-
   .nav-link {
     color: inherit;
     white-space: nowrap;
   }
-
-  .nav-active-border .nav-link {
-    margin: -.75rem 0;
-    line-height: 2.75rem;
-  }
 }
 
 .navbar-brand {

scss/layout/_sidebar.scss

-$sidebar-width: 15rem;
-
-.sidebar {
-  flex: 1 0 15rem;
-  width: $sidebar-width;
-  height: 100%;
-  padding: 1.5rem;
-  background: #fff;
-  border-right: 1px solid $border-color;
-
-  @include media-breakpoint-down(md) {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: 1000;
-    max-width: 90vw;
-    margin-left: -($sidebar-width);
-    transition: .3s transform;
-
-    @at-root body.sidebar-opened & {
-      transform: translate($sidebar-width, 0);
-    }
-  }
-}
-
-.sidebar-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  display: none;
-  visibility: hidden;
-  background: rgba(0, 0, 0, .1);
-  opacity: 0;
-  backdrop-filter: blur(1px);
-
-  @include media-breakpoint-down(md) {
-    display: block;
-    transition: .3s backdrop-filter, .3s opacity;
-
-    @at-root body.sidebar-opened & {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-
-.sidebar-btn {
-  position: fixed;
-  bottom: 1rem;
-  left: 1rem;
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  color: $text-muted !important;
-  background: theme-color-lightest($text-muted);
-  border-radius: 50%;
-  box-shadow: $box-shadow-sm;
-
-  .icon {
-    width: 24px;
-    height: 24px;
-    stroke-width: 1;
-  }
-
-  @include media-breakpoint-up(md) {
-    display: none;
-  }
-}

scss/layout/_sidenav.scss

+/*
+Sidebar
+ */
 .sidenav {
-  background: $dark;
+  background: $sidenav-bg;
   width: 16rem;
-  outline: 1px solid red;
+  min-width: 16rem;
+  border-right: 1px solid $sidenav-border-color;
+  padding: .75rem 1rem;
+
+  .nav-link {
+    color: $text-muted;
+  }
 }
 
+/**
+Narrow sidebar
+ */
 .sidenav-narrow {
-  width: 4rem
+  width: 4rem;
+  min-width: 4rem;
+  padding: .5rem;
+}
+
+/*
+Right sidebar
+ */
+.sidenav-right {
+  order: 9;
+  border-left: 1px solid $sidenav-border-color;
+  border-right: none;
+}
+
+/*
+Dark sidebar
+ */
+.sidenav-dark {
+  background-color: $sidenav-dark-bg;
+  border: none;
+  color: #fff;
+}
+
+@each $breakpoint, $dimension in $grid-breakpoints {
+
+  .sidenav-expand-#{$breakpoint} {
+    display: none;
+
+    @include media-breakpoint-up(#{$breakpoint}) {
+      padding-left: 0;
+      padding-right: 0;
+      display: block;
+
+      .navbar-nav {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .navbar-nav .nav-link {
+        padding: .625rem $sidenav-link-padding-x;
+
+        &.active {
+          position: relative;
+
+          &:before {
+            top: auto;
+            left: $sidenav-link-padding-x;
+            right: $sidenav-link-padding-x;
+            bottom: calc(-#{$navbar-padding-y} - #{$border-width});
+            border-left: 0;
+            border-bottom: 1px solid $primary;
+          }
+        }
+      }
+
+      .sidenav > [class*="container"] {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
 }

scss/ui-kit.scss

@@ -13,7 +13,6 @@
 @import "layout/grid";
 @import "layout/header";
 @import "layout/navbar";
-@import "layout/sidebar";
 @import "layout/sidenav";
 @import "layout/page";