wip

Author: boxed

docs/_static/custom.css

@@ -100,3 +100,9 @@ h2 {
         display: none;
     }
 }
+
+.iommi_logo_menu {
+    /*noinspection CssUnknownTarget*/
+    background: url(https://docs.iommi.rocks/en/latest/_static/images/iommi_logo_text_only.svg) no-repeat;
+    background-size: contain;
+}

docs/test_doc_main_menu.py

@@ -14,6 +14,12 @@
 """
 Main menu
 ~~~~~~~~~
+
+The main menu component in iommi is used to create the main navigation for your app. This is primarily useful for SaaS or internal apps. It creates a sidebar menu with support for nested menu items, and centralized access control that automatically shows only menu items the user has access to.
+
+To set up your main menu you declare it, register the `iommi.experimental.main_menu.menu_access_control_middleware` middleware, and define the `IOMMI_MAIN_MENU` setting to point to where you have defined it (like `IOMMI_MAIN_MENU = 'your_app.main_menu.main_menu'`). 
+
+Access control is recursive, meaning that if a user does not have access to a menu item, it is automatically denied access to all subitems.
 """
 
 
@@ -24,7 +30,11 @@ def fake_view():
 menu_declaration = MainMenu(
     items=dict(
         artists=M(
-            icon='guitar',
+            icon='user',
+            view=fake_view,
+        ),
+        albums=M(
+            icon='compact-disc',
             view=fake_view,
         ),
     ),

iommi/static/css/iommi_main_menu.css

@@ -2,7 +2,7 @@
     --iommi-menu-width: 18rem;
     --iommi-iommi-menu-width: 4rem;
     --iommi-menu-background-color: #0d6efd;
-    --iommi-menu-text-color-color: white;
+    --iommi-menu-text-color-color: #689fff;
 }
 
 body {
@@ -189,13 +189,22 @@ body.right_sidebar_menu_active.compact_menu {
     }
 }
 
-.dryft_logo_menu {
+.iommi_logo_menu {
     margin-top: 0.5rem;
     margin-left: 0.7rem;
     margin-bottom: 0.5rem;
-    display: block;
     padding: 1rem;
     zoom: 148%;
+    height: 1rem;
+    width: 5rem;
+    /*noinspection CssUnknownTarget*/
+    background: url(/static/images/logo.svg);
+    background-size: cover;
+    display: block;
+}
+
+.iommi_logo_menu a.nav-link {
+    color: transparent !important;
 }
 
 .container {
@@ -224,14 +233,14 @@ body.right_sidebar_menu_active.compact_menu {
 .compact_menu .menu {
     width: var(--iommi-iommi-menu-width);
 
-    .dryft_logo_menu {
+    .iommi_logo_menu {
         zoom: 0.7;
 
         height: 5rem;
         width: 5rem;
         margin-left: 0.4rem;
         /*noinspection CssUnknownTarget*/
-        background: url(/static/images/logo_icon_white.svg);
+        background: url(/static/images/logo_compact.svg);
         background-size: cover;
     }
 
@@ -343,10 +352,10 @@ body.right_sidebar_menu_active.compact_menu {
         width: 100%;
         height: 3rem;
 
-        .dryft_logo_menu {
+        .iommi_logo_menu {
 
             /*noinspection CssUnknownTarget*/
-            background: url(/static/images/logo2-white.svg);
+            background: url(/static/images/logo_compact_mobile.svg);
             margin-top: 1rem;
             margin-left: 1rem;
             margin-bottom: 1rem;

iommi/templates/iommi/main_menu/menu.html

@@ -2,7 +2,9 @@
 <div class="menu">
 
     <nav>
-        {% block before_ul %}{% endblock %}
+        {% block before_ul %}
+            <a id="menu-logo" href="/"><div class="iommi_logo_menu"></div></a>
+        {% endblock %}
         <ul>
             {% block before_items %}{% endblock %}
 

tests/main_menu.py

@@ -0,0 +1,3 @@
+from iommi.experimental.main_menu import MainMenu
+
+main_menu = MainMenu()

tests/settings.py

@@ -41,6 +41,7 @@
 USE_TZ = False
 
 IOMMI_DEFAULT_STYLE = 'test'
+IOMMI_MAIN_MENU = 'tests.main_menu.main_menu'
 
 MIDDLEWARE = [
     'iommi.experimental.main_menu.menu_access_control_middleware',